Anime Warta Auto Index Diblogger Part 1

Artikel Kali ini aku akan membagikan Cara Membuat Anime Informasi Auto Index DiBlogger Part 1, Anime Informasi ini mungkin akan mempunyai kegunaan untuk kau yang mempunyai blog dengan niche Download Anime, alasannya yaitu fitur ini akan memudahkan pengunjung melihat Informasi anime lebih detail.

Pada artikel sebelumnya aku sudah membagikan tutorial Cara Membuat Like box Plugin Facebook Valid AMP DiBlogger. Karena ini part 1 mungkin kedepannya aku 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 & jikalau tidak ada tambahkan.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>



2. Simpan Javascript Berikut ini diatas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

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



3. Kemudian cari </style>, simpanlah CSS berikut diatasnya.

/* 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}



4. Jika sudah Save Tema.
5. Buka Halaman > Tambahkan Halaman, Gunakan metode HTML bukan Compose, kemudian simpan html berikut

<div class="arleth98">  <h2>Judul Anime</h2>  <div class="inf-wrap">   <div class="img-thumb">     <img src="LINK IMAGE" alt="Cara Membuat Anime Informasi Auto Index DiBlogger Part  Anime Informasi Auto Index DiBlogger Part 1"/>   </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>

6. Jangan lupa edit html yang sudah aku tandai.

Demo

Tag	Keterangan
LABEL POST	Ganti Dengan Label post
LINK IMAGE	Ganti Dengan Gambar Cover Anime
#	Ganti Dengan URL/Link Post Label

Bagikan Artikel ini