Cara Membuat Anime Ongoing Series di Homepage!

Di Postingan ke-3 saya kali ini saya akan membuat tutorial, Cara Membuat Anime Ongoing Series di Homepage ala Fansub.

Kepoin Dikit!
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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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/AVvXsEh_bd1FHvVr96GYWvOfJAv-dy3ELlJ-WK_JC4ER-4XcqMWNDPkLOGrdVnnqnqAWdrgLGPH_5T1rmUu0oAT_wEirGECeOt3__RgQhw3jbOLe9wP7ZrpG3_q8d1OFNHiQoNOpxuiJ60YS7vg/w135-c-h191/74447.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_bd1FHvVr96GYWvOfJAv-dy3ELlJ-WK_JC4ER-4XcqMWNDPkLOGrdVnnqnqAWdrgLGPH_5T1rmUu0oAT_wEirGECeOt3__RgQhw3jbOLe9wP7ZrpG3_q8d1OFNHiQoNOpxuiJ60YS7vg/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/AVvXsEh_SuZ8Oz0iTrjD8dhZsjbpnvKXL0fvQdp2i6iBJrr0izN1rr8SNkylATIPxwA_vRSZ1SiuGQxKoBy8F44oilQSsq5w8b-OaSBF0E6vTbJrb2x7yqEqRu69VZqPwXk4V_7lnRd8q39hAD8/w135-c-h191/75938.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_SuZ8Oz0iTrjD8dhZsjbpnvKXL0fvQdp2i6iBJrr0izN1rr8SNkylATIPxwA_vRSZ1SiuGQxKoBy8F44oilQSsq5w8b-OaSBF0E6vTbJrb2x7yqEqRu69VZqPwXk4V_7lnRd8q39hAD8/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/AVvXsEgHqpBRQwrlJuPFNSCt7oLXpPf1daP9Oz_NZHt0AEdi37pUav0leX3SdQ_nwt8DPckTn21SPVK_a-rF3A7WODqmqd41c9_zRF7yjEVGwz2CcSqhnWb6zSS-RjkPYc2w-69BFC6ErJDUlOY/s400/Valkyrie.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHqpBRQwrlJuPFNSCt7oLXpPf1daP9Oz_NZHt0AEdi37pUav0leX3SdQ_nwt8DPckTn21SPVK_a-rF3A7WODqmqd41c9_zRF7yjEVGwz2CcSqhnWb6zSS-RjkPYc2w-69BFC6ErJDUlOY/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/AVvXsEg_xNbbiacRekXNnhkdiapRanHELqKYdISFSQ383AYwHcDF1ZMz8jt_frh05xnU2mw8LN3u0TJVFmfbpNA8RDmyqFPyGWPIUuk7yg1Yg8oBeysq5HgVb3Ccis4kWrtTi5jLP2m3QMltg4k/s1600/76493.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_xNbbiacRekXNnhkdiapRanHELqKYdISFSQ383AYwHcDF1ZMz8jt_frh05xnU2mw8LN3u0TJVFmfbpNA8RDmyqFPyGWPIUuk7yg1Yg8oBeysq5HgVb3Ccis4kWrtTi5jLP2m3QMltg4k/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/AVvXsEizmFgUyz0KjTMwSqKsSIUxm0wF7fUx11gaegYuUPS_RMUd3aerK0zu_L1IfWiPaOHi1y3JqfvRSjtbu2zipjuFqYyF6i-7d74JbS_UTTblLOquWvwkYZu-D3FaFqQukyoVFUo5FdKHdEE/w135-c-h191/76114.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizmFgUyz0KjTMwSqKsSIUxm0wF7fUx11gaegYuUPS_RMUd3aerK0zu_L1IfWiPaOHi1y3JqfvRSjtbu2zipjuFqYyF6i-7d74JbS_UTTblLOquWvwkYZu-D3FaFqQukyoVFUo5FdKHdEE/w135-c-h191/76114.jpg' title='Lance N Masques'/></a>
<div class='moe-desz-jdl'>Lance N&#39; 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.