Cara Membuat Featured Series Anime Di Blog Dengan Mudah

Hay sobat kali ini saya akan membagikan cara membuat featured series atau featured anime di blog. Bagi anda yang mempunyai blog atau website anime pasti akan menginginkan blog anda terlihat menarik dan bagus. Dan salah satu caranya adalah memasang featured series anime. Selain untuk membuat menarik blog, featured series anime juga memudahkan bagi para pengunjung blog kita untuk mencari anime tertentu. Featured series banyak digunakan oleh blog atau website anime seperti Wardhanime, Kurogaze, dll. Bagaimana caranya membuat featured series? berikut ini langkah-langkahnya :

1. Masuk ke Blogger.com

2. Masuk ke menu Template >> Edit HTML

3. Dan untuk memudahkan pencarian tekan Ctrl + F dan cari kode ]]</b:skin> kemudian masukkan CSS berikut ini tepat diatas kode ]]</b:skin>

/* CSS Featured Anime */
#recomanim {
    margin: 1% 1% 0px;
}
.stat {
    position: absolute;
    z-index: 10;
    color: #FFF;
    padding: 3px 6px;
    font-size: 10px;
    border-radius: 3px;
    top: 5px;
    right: 5px;
}
.recobox {
    margin-bottom: 20px;
    padding: 5px;
    background-image: linear-gradient(to bottom, #E8E8E8 0px, #F5F5F5 100%);
    background-repeat: repeat-x;
    border: 1px solid #DBDBDB;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 1px 0px rgba(255, 255, 255, 0.1);
}
.anim {
    float: left;
    margin: 5px;
    border: 1px solid #CCC;
    border-radius: 3px;
    position: relative;
    width: 122px;
    height: 171px;
    overflow: hidden;
}
.stat.ongo {
    background: none repeat scroll 0% 0% #3B5CA3;
}
.anim a {
    display: block;
    font-size: 0px;
}
.anim img {
    width: 100%;
    height: 100%;
}
.anim p {
    margin: 0px;
    font-size: 11px;
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.5);
    color: #FFF;
    position: absolute;
    bottom: 0px;
    z-index: 200;
    padding: 4px 6px 5px;
    width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

4. Setelah memasukkan CSS di atas, Save Template.
5. Kemudian ke menu Tata Letak >> Tambahkan Gadget >> HTML/Javascript, terserah mau di taruh di bawah header atau diatas footer, kemudian masukkan kode HTML berikut :

<div id='recomanim'>
<div class='recobox'>
<div class='anim'>
<span class='stat ongo'>Ongoing</span>
<a href='http://ziget-share.blogspot.com/2015/02/download-tokyo-ghoul-season-2-episode.html'>
<img alt='Tokyo Ghoul' src='https://40.media.tumblr.com/6c238aa1102625813348c9d14733ef87/tumblr_newtryiON51qmlmyuo1_500.jpg' title='Tokyo Ghoul'/>
<p>
Tokyo Ghoul</p>
</a>
</div>
<div class='anim'>
<span class='stat ongo'>Ongoing</span>
<a href='http://ziget-share.blogspot.com/2015/02/kiseijuu-sai-no-kakuritsu-episode-17.html'>
<img alt='Kiseijuu Sai no Kakuritsu' src='https://farm6.staticflickr.com/5610/15298325937_759034c6c9_o.jpg' title='Kiseijuu Sai no Kakuritsu'/>
<p>
Kiseijuu Sai no Kakuritsu</p>
</a>
</div>
<div class='anim'>
<span class='stat ongo'>Ongoing</span>
<a href='http://ziget-share.blogspot.com/2015/02/kamisama-hajimemashita-season-2-eps-03.html'>
<img alt='Kamisama Hajimemasita' src='http://www.myanimestream.net/cat-images/454.jpg' title='Kamisama Hajimemasita'/>
<p>
Kamisama Hajimemasita</p>
</a>
</div>
<div class='anim'>
<span class='stat ongo'>Ongoing</span>
<a href='http://ziget-share.blogspot.com/2015/02/seiken-tsukai-no-world-break-episode-05.html'>
<img alt='Seiken Tsukai no World Break' src='http://img105.imagetwist.com/th/06802/9j7oorfm3r2m.jpg' title='Seiken Tsukai no World Break'/>
<p>
Seiken Tsukai no World Break</p>
</a>
</div>
<div class='anim'>
<span class='stat ongo'>Ongoing</span>
<a href='http://ziget-share.blogspot.com/2015/02/info-judul-kuroko-no-basket-tipe-serial.html'>
<img alt='Kuroko no Basuke' src='http://s22.postimg.org/yu0knezgx/1302685049_1364364793500x6985.png' title='Kuroko no Basuke'/>
<p>
Kuroko no Basuke</p>
</a>
</div>
<div class='clear'/>
</div>
</div>
</div>
</form>
</div>

Keterangan :

Ganti yang didalam tanda petik <a href='http://ziget-share.blogspot.com/2015/02/kamisama-hajimemashita-season-2-eps-03.html'> dengan alamat link anda
Ganti yang didalam tanda petik src='http://www.myanimestream.net/cat-images/454.jpg' dengan alamat gambar anda
Ganti yang didalam tanda petik title='Kamisama Hajimemasita' dengan judul anime anda
Ganti yang diapit tanda <p> => <p>Kamisama Hajimemasita</p> dengan judul anime anda