Cara Membuat Anime List dengan Gambar dan Status untuk Blogger dan Wordpress

Cara Membuat Anime List dengan Gambar dan Status untuk Blogger dan Wordpress
Kali ini kita akan membuat anime list dengan gambar dan status di atas gambarnya, seperti gambar di atas. Langsung aja kita ke tutorial pemasangannya.

Pertama, masuk ke Blogger > Theme > Edit HTML. Temukan kode </style> atau ]]></b:skin> lalu copy CSS di bawah ini tepat di atas kode tersebut.

/* CSS Anime List dengan Gambar */
#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;
} 

Setelah itu save theme. Dan buat halaman baru, lalu masukkan HTML dibawah ini dan ubah url gambar, judul, dan statusnya sesuai keinginan kalian.

<div id='recomanim'>
<div class='anim'>
<span class='stat ongo'>Ongoing</span>
<a href='#'>
<img src='https://myanimelist.cdn-dena.com/images/anime/6/78438.jpg' title='Akame ga Kill!!'/>
<p>Akame ga Kill!!</p>
</a>
</div>
<div class='anim'>
<span class='stat ongo'>Ongoing</span>
<a href='#'>
<img src='https://myanimelist.cdn-dena.com/images/anime/5/85435.jpg' title='Amagi Brilliant Park'/>
<p>Amagi Brilliant Park</p>
</a>
</div>
<div class='anim'>
<span class='stat ongo'>Ongoing</span>
<a href='#'>
<img src='https://myanimelist.cdn-dena.com/images/anime/9/75230.jpg' title='Daitoshokan no Hitsujikai'/>
<p>Daitoshokan no Hitsujikai</p>
</a>
</div>
<div class='anim'>
<span class='stat ongo'>Tamat</span>
<a href='#'>
<img src='https://myanimelist.cdn-dena.com/images/anime/11/65185.jpg' title='Sword Art Online II'/>
<p>Sword Art Online II</p>
</a>
</div>
</div></div> 

Sampai disini selesai, untuk melihat hasilnya silakan lihat di bawah.

See the Pen Anime List dengan Gambar by hilmanfad (@hilmanfad) on CodePen.