-->

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 &gt; 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/AVvXsEjybl2u7maNybeqSsHZe3Y8UF23rFedF0mpaccCOtittP-Yz_1HD2pTSX1JTfkuca_RkbdtKYuulX7HDlAKbjODVasYJRJidgiTRiAiKO8WEZXpQVOKvdgrWt9yGc1AojLA-PY7-9AGvBk/w135-c-h191/74447.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjybl2u7maNybeqSsHZe3Y8UF23rFedF0mpaccCOtittP-Yz_1HD2pTSX1JTfkuca_RkbdtKYuulX7HDlAKbjODVasYJRJidgiTRiAiKO8WEZXpQVOKvdgrWt9yGc1AojLA-PY7-9AGvBk/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/AVvXsEjBiOVEF-OAgHzqNMCubAfRsj4WjhCpY4pnIAGWvZSLxCbZgUM4rqmslXNuimtokT7-tMOoc_AzfUP1U6frjhEPUUOOSJeFuOHpre6SQbs_pDyk6yXSOM1DGr2K9hyEMChkACwzNfNTamk/w135-c-h191/75938.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBiOVEF-OAgHzqNMCubAfRsj4WjhCpY4pnIAGWvZSLxCbZgUM4rqmslXNuimtokT7-tMOoc_AzfUP1U6frjhEPUUOOSJeFuOHpre6SQbs_pDyk6yXSOM1DGr2K9hyEMChkACwzNfNTamk/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/AVvXsEgmJi2ecbyR24FlvZNa6qWQWgk2AL7JKhRoY_rtK3aXC6cvQzy_sj2TmzanKq-ijai203hXikMSOd7JosQQnUCt9kG4SYFOEhj88sd_jfJDfd4CwRhCm73w153bjcvIBZVrKbLYmUfVxhw/s400/Valkyrie.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmJi2ecbyR24FlvZNa6qWQWgk2AL7JKhRoY_rtK3aXC6cvQzy_sj2TmzanKq-ijai203hXikMSOd7JosQQnUCt9kG4SYFOEhj88sd_jfJDfd4CwRhCm73w153bjcvIBZVrKbLYmUfVxhw/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/AVvXsEgtnLdFx_qUayD34CHlBa2QaRP7I8yLsmr81F-RQkF-5iwTq9MhVBVzqj142KV9KbL1s84ZIKOiBVSpgAGj-RJqrO_qLFeFQCZFhGuJ13uk9zd3q5vnDsSZOpH1AxhDOTkzxepPqVu4AA4/s1600/76493.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtnLdFx_qUayD34CHlBa2QaRP7I8yLsmr81F-RQkF-5iwTq9MhVBVzqj142KV9KbL1s84ZIKOiBVSpgAGj-RJqrO_qLFeFQCZFhGuJ13uk9zd3q5vnDsSZOpH1AxhDOTkzxepPqVu4AA4/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/AVvXsEjqRllHMYCQEIUI2ro_bnKunpOCdJt9QSmB4BUBcx5gXVwYo5MXP1XSByUtyL9zARL8lEpHnYix2W4cRVj_6Xs35qV78HbW5sqTv9zeavven2cx3u_NcGtCtw5Cy8PlKasrOqdHlnNuBak/w135-c-h191/76114.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqRllHMYCQEIUI2ro_bnKunpOCdJt9QSmB4BUBcx5gXVwYo5MXP1XSByUtyL9zARL8lEpHnYix2W4cRVj_6Xs35qV78HbW5sqTv9zeavven2cx3u_NcGtCtw5Cy8PlKasrOqdHlnNuBak/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.
Facebook Comments