Anime Info Samehadaku Part#2

Lanjut Part#2, Cara Membuat Anime Info Serperti Samehadaku. Sebelum nya Part#1 hanya berupa gambar, judul dan sinopsis. Dan di Part#2 adalah bagian Information nya seperti Type, Tanggal-Rilis, Producers, Studio, Musim dan lainnya.

Anime Info Samehadaku Part#2
Dagruel

Anime Info Samehadaku Part#2 - Information

Pertama pasang dulu CSS nya

/* Anime Info Samehahadaku Part#2 - Information - Dagruel */
.infox {background-color: #f1f1f1;border-radius: 7px;}
h3.anim-detail {font-size: 20px;background: #fff;font-weight: 500;padding: 10px;margin: 0;border-bottom: 1px solid #f1f1f1;}
.infox .spe {overflow: hidden;font-size: 12px;background: #fff;}
.infox .spe span {padding-left: 9px;width: 48%;margin-right: 2%;float: left;position: relative;font-size: 14px;color: #222d34;line-height: 28px;text-overflow: clip;white-space: nowrap;overflow: hidden;border-bottom: 1px solid #f1f1f1;padding-bottom:
5px;padding-top: 5px;}
.infox .spe span:hover {background: #f1f1f14f;}
.infox .spe b {font-weight: 500;overflow: hidden;min-width: 117px;float: left;border-right: 1px solid #f1f1f1;margin-right: 10px;}

@media screen and (max-width:920px) {
.infox .spe span {width: 100%!important;}
}
Blogger: Buka Tema > Edit HTML > paste css nya tepat diatas kode </style>.
WordPress: Buka Appearance > Theme Editor > style.css > pasang css nya, atau Appearance > Customize > Additional CSS > pasang css nya.

Jika sudah, pasang HTML nya.

<div class="infox">
  <h3 class="anim-detail">Information</h3>
  <div class="spe">
    <span><b>Japanese</b>半妖の夜叉姫</span>
    <span><b>Synonyms</b>Unknown</span>
    <span><b>English</b>Yashahime: Princess Half-Demon</span>
    <span><b>Type</b>TV</span>
    <span><b>Status</b>Not yet Aired</span>
    <span><b>Aired</b>Oct 3, 2020 to ?</span>
    <span><b>Season</b><a href="Link nya" rel="tag">Fall 2020</a></span>
    <span><b>Producers</b>Shogakukan, Yomiuri TV Enterprise</span>
    <span><b>Studios</b>Sunrise</span>
    <span><b>Source</b>Original</span>
    <span><b>Duration</b>Unknown</span>
  </div>
</div>
Untuk Blogger pastikan menggunakan Mode HTML bukan Compose.
Dan WordPress menggunakan Mode Text bukan Visual.
Juga ganti tulisan yang ditandai sesuai keinginan kalian.

Untuk Part#3 berisi daftar Episode Anime nya tapi bukan otomatis jadi harus di isi link nya satu satu. Tapi itu nanti dulu.

Sekian Postingan saya kali ini semoga bermanfaat, dan jika ada yang ingin di tanyakan silahkan berkomentar dibawah. Sampai jumpa dipostingan selanjutnya Terima Kasih.

https://samehadaku.vip/
https://demo.eastheme.com/eastplay/

Comments