Ads

Source Code 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

Blogger Disqus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!