Ads

Source Code Anime Info Samehadaku Part#1

Anime Info Samehadaku Part#1
Dayat.id

Punya blog "Download Anime" tapi tampilan nya jelek, tenang kali ini saya akan membagikan tampilan anime info seperti web "Samehadaku".

Anime Info Samehadaku Part#1

langsung saja tutorial nya. Pertama-tama pasang CSS nya dulu.

untuk Blogger silahkan buka Tema > Edit HTML > cari kode </style> dan taro diatas nya.

dan untuk Wordpress buka Appearance > Theme Editor > CSS letakkan css nya, atau bisa juga Appearance > Customize > Additional CSS letakkan css nya.

/* Dagruel - Anime Info Samehadaku Part#1 */

  .dagruel-sinopsis {overflow: hidden;z-index: 99;background: #fff;}
  .dagruel-sinopsis .left {float: left;padding: 10px;}
  .dagruel-sinopsis .right {overflow: hidden;padding: 10px;}
  .sinojudul {overflow: hidden;margin: 5px;border-bottom: 1px solid #ECEFF5;padding-bottom: 13px;}
  .judul h1 {margin: 0 0 5px;font-size: 24px;font-weight: 500;line-height: 34px;color: #222d34;margin-top: 10px;float: left;display: contents;margin-top: 0px;}
  .judul span.trailer {padding: 7px;margin-left: 5px;font-size: 13px;line-height: 28px;display: inline-block;}
  .judul span.trailer a svg {color: #ef5350;}

  .alternaiv {color: #333;overflow: hidden;width: 100%;font-weight: 500;}
  .alternaiv span {font-size: 13px;line-height: 20px;padding-right: 13px;display: inline-block;float: left;}
  .alternaiv span:after {content: "/";padding-left: 11px;}
  .alternaiv span:last-child:after {content: "";}

  .desc {line-height: 1.4em;color: #888;}
  .desc h3 {padding: 10px;font-size: 17px;font-weight: 500;color: #222;}
  .desc p {padding: 10px;margin: 0;overflow: hidden;font-size: 14px;font-weight: 400;color: #222d34;line-height: 26px;}

  .genre-info {margin-bottom: 0px;display: block;margin-top: 9px;margin-left: 11px;}
  .genre-info span {padding: 0px 10px;display: -webkit-inline-box;margin-right: 7px;margin-bottom: 6px;font-size: 13px;border-radius: 4px;background: #f5f7fa;}
  .genre-info span:hover {background-color: #009688;color: #fff;}
  
  @media screen and (max-width: 875px) {
    .dagruel-sinopsis .left {text-align: center;float: none;}
    .dagruel-sinopsis .right {padding: 0;}
    .sinojudul {text-align: center;}
    .desc {margin-left: 5px;}
    .desc p {padding: 5px;}
    .desc h3 {padding: 0;margin-bottom: 10px;}
  }

Selesai, saat membuat postingan baru di Blogger pastikan memakai mode HTML bukan Compose, dan Wordpress mode Text bukan Visual. jika mengerti salin HTML dibawah dan pastekan.

<div class="dagruel-sinopsis">
  <div class="left">
    <bingkai>
      <div class="waluhImage"><img alt="JudulAnime" src="LinkGambar" title="JudulAnime">
        <div class="copyright"><span>JudulWeb</span></div>
      </div>
    </bingkai>
  </div>
  <div class="right">
    <div class="sinojudul">
      <div class="judul">
        <h1>JudulAnime</h1>
        <span class="trailer"><a href="LinkYoutube / Trailer"><svg style="width:14.63px;height:13px" viewBox="0 0 24 24">
    <path fill="currentColor" d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z" /></svg>Trailer</a></span>
      </div>
      <div class="alternaiv">
        <span>Versi Anime</span>
        <span>Completed / Ongoing</span>
        <span>DurasiAnime</span>
        <span>MusimAnime</span>
      </div>
    </div>
    <div class="desc">
      <h3>Sinopsis</h3>
      <p>Sinopsis1</p>
      <p>Sinopsis2</p>
    </div>
    <div class="genre-info">
      <span>Genre1</span>
      <span>Genre2</span>
      <span>Genre3</span>
      <span>Genre4</span>
      <span>Genre5</span>
    </div>
  </div>
</div>
Perhatikan Tulisan yang diberi warna. silahkan ganti sesuai keinginan kalian.

Anime info ini hanya berisi Judul Anime, Gambar, Sinopsis, dan Genre saja. Untuk Part#2 (Bagian Information) Silahkan Klik Disini!

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!