Di Postingan ke-3 saya kali ini saya akan membuat tutorial, Cara Membuat Anime Ongoing Series di Homepage ala Fansub.
Demo
Langsung saja tutorialnya :
1. Buka Template/HTML copy CSS di bawah ini di atas </b:skin>
2. Cari code content-wrapper tepatnya mirip seperti ini jika ketemu <div id="content-wrapper">
lalu copy-kan code di bawah ini tepat di bawah <div id="content-wrapper">
3. dan terakhir Save template, Selesai.
Sekian dari tutorial postingan saya ke 3 yaitu, Cara Membuat Anime Ongoing Series di Home saja. Jika ada masalah jangan sungkan ajukan permasalahanmu di kolom komentar bawah.
Terima kasih.
Langsung saja tutorialnya :
1. Buka Template/HTML copy CSS di bawah ini di atas </b:skin>
/* CSS Anime Ongoing */
#fs-inf{font-size:13px;background:url(https://lh3.googleusercontent.com/-v4NPgfv1wOQ/VgLD2bAyQdI/AAAAAAAABy4/u8gLB9MBPqo/s300-Ic42/Hakua.png)no-repeat #189FD1;background-position:right bottom;background-size:110px;padding:15px;color:#FFF;border:1px solid #EAE0A6;margin:5px auto 15px}#fs-inf > b{text-align:center;display:block;text-transform:uppercase;font-size:12px;margin-bottom:10px}#fs-inf p{padding-bottom:6px}
.fbott .fright,.ftop .fright{text-align:right}
.moe-desz {float: left;padding: 5px;margin-bottom: 0px;}
.moe-desz img {width: 130px;height: 180px;}
.moe-desz img:hover {background:rgba(51, 51, 51, 0.56)}
.moe-desz-jdl {font-family: inherit;width: 130px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;background-color: rgba(51, 51, 51, 0.74);font-size: 12px;padding: 3px;margin: -23px 0px;text-align: center;position: absolute;z-index: 3;color: #FDFDFD;font-weight: normal;}2. Cari code content-wrapper tepatnya mirip seperti ini jika ketemu <div id="content-wrapper">
lalu copy-kan code di bawah ini tepat di bawah <div id="content-wrapper">
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='animebaru'><div class='moeupdate'><h1><i class='fa fa-list'/> Anime Ongoing</h1><div class='releaser'/></div>
<div id='onmdesz'>
<div class='moe-desz'>
<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpEn3nPEm522zbwViOxsqneP006EjOqGm9NvnYWxJnWcdfi_E9XlEuKWSj4RCoYyTFtiVxg0QIPYKc7eh7UJSsxHB4FfdtPrFtGlpYTWV9kKL80yBHn74_oQsIuCeuQvMN3rpnKDSY9m8/w135-c-h191/74447.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpEn3nPEm522zbwViOxsqneP006EjOqGm9NvnYWxJnWcdfi_E9XlEuKWSj4RCoYyTFtiVxg0QIPYKc7eh7UJSsxHB4FfdtPrFtGlpYTWV9kKL80yBHn74_oQsIuCeuQvMN3rpnKDSY9m8/w135-c-h191/74447.jpg' title='Gakushen Toshi Asterisk'/></a>
<div class='moe-desz-jdl'>Gakushen Toshi Asterisk</div>
</div>
<div class='moe-desz'>
<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGo753qelMoMZHia7qqJPMzpIYzPaaHo9YlEVTPkWj_Y1tCK9l3rEoRJTPx4zIopXe-b3nK5cY6bj4vEA1VlVmas2GkYekZvKRJohoJSXID84BhXTx_EHg4ZGZqqhFsg3IkY4puug5BHU/w135-c-h191/75938.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGo753qelMoMZHia7qqJPMzpIYzPaaHo9YlEVTPkWj_Y1tCK9l3rEoRJTPx4zIopXe-b3nK5cY6bj4vEA1VlVmas2GkYekZvKRJohoJSXID84BhXTx_EHg4ZGZqqhFsg3IkY4puug5BHU/w135-c-h191/75938.jpg' title='Heavy Object'/></a>
<div class='moe-desz-jdl'>Heavy Object</div>
</div>
<div class='moe-desz'>
<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCr_0VxfhIFmfozJ2569fVX2xpbz-0dqUcXuHMVaZfD6lFczqw-OP0LPS6E_aiPk8t8PfsrSMhlw6obgHiN8cF9h4-tCP0leOLtVkUpY4X2s_mJGwVTwc0zoCVDHepGiFXJo2kYO-puEM/s400/Valkyrie.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCr_0VxfhIFmfozJ2569fVX2xpbz-0dqUcXuHMVaZfD6lFczqw-OP0LPS6E_aiPk8t8PfsrSMhlw6obgHiN8cF9h4-tCP0leOLtVkUpY4X2s_mJGwVTwc0zoCVDHepGiFXJo2kYO-puEM/s400/Valkyrie.jpg' title='Valkyrie Drive: Mermaid'/></a>
<div class='moe-desz-jdl'>Valkyrie Drive: Mermaid</div>
</div>
<div class='moe-desz'>
<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA5nMHsSJfKjfcJl-bMdJtxPeRObCXWal5yDwlhAGZc3_p7XdZcULRwmikudyMmVtYWQk-RPpkqPM35uVZlnqMPsRwFy5KcyUcMLbkNbUhIdwy5r0V0qCFtM_pGVQPIcGDZ7XvgQ-BAks/s1600/76493.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA5nMHsSJfKjfcJl-bMdJtxPeRObCXWal5yDwlhAGZc3_p7XdZcULRwmikudyMmVtYWQk-RPpkqPM35uVZlnqMPsRwFy5KcyUcMLbkNbUhIdwy5r0V0qCFtM_pGVQPIcGDZ7XvgQ-BAks/s1600/76493.jpg' title='Rakudai Kishi no Cavalry'/></a>
<div class='moe-desz-jdl'>Rakudai Kishi no Cavalry</div>
</div>
<div class='moe-desz'>
<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTh5i2Ky0wS8wnbyhfFFagK1fQJM7MtQw6c8qdBYgnfwWkqcK6Z49V-ppfWP-LSeNJFCcdbGdL6LwcQeyZnbzw_VY_JC3VsoNzIe6JcAd2iuyMXjhvZ-EOISByStWv2n4FTcwPG6AHZng/w135-c-h191/76114.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTh5i2Ky0wS8wnbyhfFFagK1fQJM7MtQw6c8qdBYgnfwWkqcK6Z49V-ppfWP-LSeNJFCcdbGdL6LwcQeyZnbzw_VY_JC3VsoNzIe6JcAd2iuyMXjhvZ-EOISByStWv2n4FTcwPG6AHZng/w135-c-h191/76114.jpg' title='Lance N Masques'/></a>
<div class='moe-desz-jdl'>Lance N' Masques</div>
</div>
</div>
</div>
</b:if>
</b:if>
3. dan terakhir Save template, Selesai.
Sekian dari tutorial postingan saya ke 3 yaitu, Cara Membuat Anime Ongoing Series di Home saja. Jika ada masalah jangan sungkan ajukan permasalahanmu di kolom komentar bawah.
Terima kasih.