Cara Membuat Anime Ongoing Series di Homepage!

OPMLoverz

Tutorial Blogger

Selasa, 12 Juli 2016

Belum ada komentar

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/AVvXsEjLvd5UXtlxaIOUPjXVof0-9q3FUT1W0WKX4xUb0ux3RivcN9FFyN7SNy4FQiSUe9JlSoG-jFzeSALPJbrrgY8D7Euek8fPgEECDNIQkWKUDkx7sUZOLKulsNy4ZDVVsh7DUcfOkW_1YlE/w135-c-h191/74447.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLvd5UXtlxaIOUPjXVof0-9q3FUT1W0WKX4xUb0ux3RivcN9FFyN7SNy4FQiSUe9JlSoG-jFzeSALPJbrrgY8D7Euek8fPgEECDNIQkWKUDkx7sUZOLKulsNy4ZDVVsh7DUcfOkW_1YlE/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/AVvXsEh2ZD0kMifqyMylY9NAtTwR8MNjygOV48_jF74WTDPWRL0xXYbalJJ_4AJPjhCO_mHItxi0PIOPc__o3SyHxMlqr_iNdDR39IJ1IkZbEuFc1Wm5DxFgvwn35acRySCC1S7KhXq-0VGwFys/w135-c-h191/75938.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ZD0kMifqyMylY9NAtTwR8MNjygOV48_jF74WTDPWRL0xXYbalJJ_4AJPjhCO_mHItxi0PIOPc__o3SyHxMlqr_iNdDR39IJ1IkZbEuFc1Wm5DxFgvwn35acRySCC1S7KhXq-0VGwFys/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/AVvXsEjWmcl5rfHe1MMSag5lvfC6wHbdMwLZo-FbR3QLMvMbDGjrC9YyTP_TbldplzR5ue8xa36cHEiPXEemr2UuK-52L7gsxMOGcDMpYlMG5nW_iKZ_0QzdRxVxxoevJ9AUdeEqYYrS8GramN4/s400/Valkyrie.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWmcl5rfHe1MMSag5lvfC6wHbdMwLZo-FbR3QLMvMbDGjrC9YyTP_TbldplzR5ue8xa36cHEiPXEemr2UuK-52L7gsxMOGcDMpYlMG5nW_iKZ_0QzdRxVxxoevJ9AUdeEqYYrS8GramN4/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/AVvXsEizCNnVZ30ROepgZkDc817pxcoiLrmcSezpUh853Qwfeu1YdznsiJTed8enmewjRSsaT5pdwdLAOFPX5agmXev0U5d9-QtcOUqSd55xvrkNJ842OCbqAFg6p75O_Q_ggrhXV-iO1Z5Mbv8/s1600/76493.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizCNnVZ30ROepgZkDc817pxcoiLrmcSezpUh853Qwfeu1YdznsiJTed8enmewjRSsaT5pdwdLAOFPX5agmXev0U5d9-QtcOUqSd55xvrkNJ842OCbqAFg6p75O_Q_ggrhXV-iO1Z5Mbv8/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/AVvXsEgwSq9e2llQjCGvymo8gkEkhTZXb8jz1fny78XaPLZXTkX0qcAChwzSJMFxqTL0_BjdfEajgrxrT6iWdXITM6KSzdI1yLdPWubjgHEt0KS7G3W7cRJ0uM7-WctWmqPd_z-BB1HePPftz34/w135-c-h191/76114.jpg'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwSq9e2llQjCGvymo8gkEkhTZXb8jz1fny78XaPLZXTkX0qcAChwzSJMFxqTL0_BjdfEajgrxrT6iWdXITM6KSzdI1yLdPWubjgHEt0KS7G3W7cRJ0uM7-WctWmqPd_z-BB1HePPftz34/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.