Anime Info Auto Index DiBlogger Part 1 [Update]

Artikel Kali ini saya akan membagikan Cara Membuat Anime Informasi Auto Index DiBlogger Part 1, Anime Informasi ini mungkin akan berguna untuk kamu yang mempunyai blog dengan niche Download Anime, karena fitur ini akan memudahkan pengunjung melihat Informasi anime lebih detail.


Update Responsive

Pada artikel sebelumnya saya sudah membagikan tutorial Cara Membuat Like box Plugin Facebook Valid AMP DiBlogger. Karena ini part 1 mungkin kedepannya saya akan membagikan part 2nya, tapi itu masih rencana saja, ok kita mulai saja tutorial kali ini.


Cara Membuat Anime Info Auto Index Part 1

  1. Buka Blogger > Tema > Edit HTML, Cek Javascript berikut diatas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;, Jika sudah ada abaikan & jika tidak ada tambahkan.
  2. <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>

  3. Simpan Javascript Berikut ini diatas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
  4. <b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
    <script type='text/javascript' src='https://cdn.staticaly.com/gh/Arleth98/Js/master/anime-info-with-release-date-v1.js'></script>
    </b:if>

  5. Kemudian cari </style>, simpanlah CSS berikut diatasnya.
  6. /* Informastion Anime Auto Index - Arlethdesign
       ============================================ */
    .arleth98{font-size:12px;font-family:'Open sans',sans-serif}
    .arleth98 h2{font-weight:bold;font-size:14px;border-bottom:3px solid #6b4e4d;margin-bottom:1px;padding:4px 0}
    .arleth98 .img-thumb{float:left;margin-right:1px}
    .arleth98 .img-thumb img{width:166px;height:223px;border:1px solid #E7E7E7;padding:4px;background:#FFF}
    .arleth98 .inf-inc .lol{line-height:25px;padding:0 5px;border-bottom:1px solid #FFF;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .arleth98 .inf-inc .lol:nth-child(odd){background:#FAFAFA}
    .arleth98 .inf-inc .lol:nth-child(even){background:#F5F5F5}
    .arleth98 .inf-inc .lol b{display:block;float:left;width:95px}
    .arleth98 .inf-inc .lol a{color:#333;text-decoration:none}
    .arleth98 .synopsis{text-align:justify;font-size:14px;margin:1px 0;border:1px solid #E1EAF0;padding:10px}
    .arleth98 .sinopsiss{font-size:12px}
    .arleth98 .sinopsiss p{margin:1em 0!important;line-height:20px}
    .arleth98 ul.last-post-wrap{position:relative;margin:0;list-style:none}
    .arleth98 ul.last-post-wrap:before{content:'\f07c  Episode List';display:block;font-family:fontawesome,sans-serif;font-weight:700;padding:10px 5px;border-bottom:3px solid #6b4e4d}
    .lol b:hover{transform:none}
    .arleth98 ul.last-post-wrap:after{content:'Tanggal';top:0;position:absolute;right:0;font-weight:700;padding:10px 35px}
    .arleth98 li.last-post-item{line-height:25px;padding:0 5px;border-bottom:1px solid #F0F0F0;margin:0}
    .arleth98 li.last-post-item:nth-child(odd){background:#FFFFFF}
    .arleth98 li.last-post-item:nth-child(even){background:#FAFAFA}
    .arleth98 span.post-update{float:right;padding:0!important;margin:0!important;display:inline-block!important}
    .arleth98 .post_item{display:inline-block;width:500px;vertical-align:bottom;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .arleth98 .post_item a{color:#555}
    .arleth98 .post_item a:hover{color:#000}
    /* Responsive css Anime Info - Arlethdesign
     ========================================== */
    @media screen and (max-width:728px){
    .arleth98 .inf-wrap{overflow:hidden;display:block;clear:both}
    .arleth98 .inf-wrap .img-thumb{float:none;margin:auto;display:block;text-align:center}
    .arleth98 .inf-wrap .inf-inc{overflow:hidden;display:block}
    .arleth98 ul.last-post-wrap{display:block;overflow:hidden;clear:both}
    .arleth98 ul.last-post-wrap li{}
    .arleth98 ul.last-post-wrap li .post_item{display:block;width:100%}
    .arleth98 ul.last-post-wrap li span.post-update{display:none!important;float:none}
    }

  7. Jika sudah Save Tema.
  8. Buka Halaman > Tambahkan Halaman, Gunakan metode HTML bukan Compose, lalu simpan html berikut
  9. <div class="arleth98">
     <h2>Judul Anime</h2>
     <div class="inf-wrap">
      <div class="img-thumb">
        <img src="LINK IMAGE" alt="Judul Anime"/>
      </div>
      <div class="inf-inc">
        <div class="lol"><b>Japanese</b>: Nama Lain / Nama Jepang Anime</div>
        <div class="lol"><b>Producer</b>: Produser Anime</div>
        <div class="lol"><b>Type</b>: Tipe Anime</div>
        <div class="lol"><b>Status</b>: Status Anime</div>
        <div class="lol"><b>Genres</b>:
         <a href="#">Genre Anime</a>,
         <a href="#">Genre Anime</a>,
         <a href="#">Genre Anime</a>
        </div>
        <div class="lol"><b>Durasi</b>: Durasi Anime</div>
        <div class="lol"><b>Episode</b>: Episode Anime</div>
        <div class="lol"><b>Rating</b>: Rating Anime</div>
        <div class="lol"><b>Added On</b>: Tanggal Rilis Anime</div>
      </div>
     </div>
    <div class="synopsis">
       <b>Sinopsis:</b></br>
       <span class="sinopsiss">
        <p>Description Anime Here - Arlethdesign</p>
       </span>
     </div>
    
    <script src='/feeds/posts/default/-/LABEL POST?orderby=published&amp;alt=json-in-script&amp;callback=post_latest'></script>
    <noscript>Opps, Javascript No Load, Please Reload Again</noscript>
    
    </div>
  10. Jangan lupa edit html yang sudah saya tandai.


TagKeterangan
LABEL POST Ganti Dengan Label post
LINK IMAGE Ganti Dengan Gambar Cover Anime
# Ganti Dengan URL/Link Post Label
Related Posts