Cara membuat Info anime part 2 [Auto Index]

Cara membuat Info anime part 2 [Auto Index] - Halo semuanya, sebelumnya saya sudah share tutorial tentang Cara membuat Info anime part 1.

Tutorial kali ini saya share Anime Info Part 2 dengan fitur Auto Index, Jadi kalian tidak perlu repot-repot lagi mengedit lagi jika ada post baru. Info anime part 2 ini saya design sendiri dengan menggabungkan 2 post yaitu :
1. Anime Info Part 1
2. Recent Post By Label
Ok kita mulai saja tutorial kali ini

Cara membuat Info anime dengan fitu Auto Index

1. Buka Blogger Template > Edit HTML,
lalu simpan CSS berikut ini diatas </style> jika sudah save Template.

/* Css Info Anime By Arleth98 */
.cover-image{float:left;margin-right:1px}
.cover-image img{width:166px;height:225px;border:1px solid #E7E7E7;padding:4px;margin-top:0;border-radius:0;background:#FFF}
.line-titles{position:relative;margin-top:0;margin-bottom:5px;text-align:center;display:block}
h1.line-titles:before,h2.line-titles:before,h3.line-titles:before,h4.line-titles:before,h5.line-titles:before,h6.line-titles:before{position:absolute;top:50%;z-index:1;display:block;width:100%;height:1px;border-top:2px solid #ccc;content:""}
.data{position:relative}
h1.line-titles span,h2.line-titles span,h3.line-titles span,h4.line-titles span,h5.line-titles span,h6.line-titles span{position:relative;z-index:1;padding:0 20px;background:#fff;display:inline-block}
.yuu-inf{font-family:"Open sans",sans-serif;font-size:12px;line-height:25px;padding:0 5px;border-bottom:1px solid #FFF;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yuu-inf:nth-child(2n+1){background:none repeat scroll 0% 0% #E5E5E5}
.yuu-inf b{display:block;float:left;width:95px}
.yuu-inf a{color:#333}
.list_eps ul:before{display:block;content:'\f07c   List Episode';font-family:FontAwesome,sans-serif;background:#333;color:#FFF;padding:5px;margin:10px auto 0}
.list_eps ul{list-style:none;padding:0;margin:0}
.list_eps ul li{margin:0;border:1px solid #ddd;border-top:none}
.list_eps ul li a{line-height:25px;color:#2e51a2;padding:5px;margin:5px auto}
.list_eps ul li a:hover{color:#03A9F4}
.list_eps ul li a:before{content:'\f0c1';margin-right:5px;font-family:fontawesome}
@media only screen and (max-width:480px){.cover-image{float:none;text-align:center;margin:0 auto 5px}}

2. Buat Page/ Post baru lalu simpan HTML & Javascript berikut di post/ page tersebut.

<div class='bungkus-inspect'>
<h3 class="line-titles"><span>Flip Flappers</span></h3>
<!-- Bungkus Data -->
<div class="kantong-kresek">
<!-- Kiri -->
<div class="kiri">
<div class="cover-image">
<img width="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSfNbt0Dw0hxturPmqXnvC1e8VxybZO71V_cb3zzNY78SOZudv3xtzSBsazTr4at4C76xqmGlqPHurmDCrkMa5QzTcYE8IxkHx5xqw_XnIye5ZitOThZBsBkpIliM7zHTYWBXt06Mv/s1600/flip-flapper.jpg" title="Flip Flappers" alt="Flip Flappers"></div>
</div>

<!-- Kanan -->
<div class="kanan">
<div class="data">
<div class="yuu-inf">
<b>Japanese</b>: フリップフラッパーズ</div>
<div class="yuu-inf">
<b>Premiered</b>: Fall 2016</div>
<div class="yuu-inf">
<b>Status</b>: Ongoing</div>
<div class="yuu-inf">
<b>Genre</b>: Comedy, Sci-Fi</div>
<div class="yuu-inf">
<b>Durasi</b>: 23 min. per episode</div>
<div class="yuu-inf">
<b>Episode</b>: ? Episode</div>
<div class="yuu-inf">
<b>Rating</b>: PG-13 - Teens 13 or older</div>
<div class="yuu-inf">
<b>Aired</b>: Oct 6, 2016 to ?</div>
<div class="yuu-inf">
<b>Credit</b>: Arleth-desz</div>
</div></div>
</div>
<!-- END Bungkus data -->
<br/>
<!-- Bagian Sinopsis -->
<h3 class="line-titles"><span>Sinopsis</span></h3>
<div style="text-align:center;">
Papika dan Cocona memegang kunci untuk membuka pintu. Ketika mereka berdua bertemu, petualangan di waktu dan dimensi yang berbeda, yang disebut "Pure Illusion" dimulai. Banyak hal di dalam Pure Illusion yang akan menghalangi mereka berdua itu mencari kristal misterius yang disebut "Kepingan Mimi", sebuah benda yang disebut-sebut dapat mengabulkan permintaan. Namun, saat mereka dalam bahaya, Kepingan Mimi bersinar, dan mereka dapat berubah.
</div>
</div>

<script type="text/javascript">
var numposts = 100; var standardstyling = true; function showrecentposts(json) { for (var i = 0; i < numposts; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; }} posttitle = posttitle.link(posturl); if (standardstyling) document.write('<li>'); document.write(posttitle);} if (standardstyling) document.write('</li>'); } 
</script>
<div class='list_eps'>
<ul>
<script src="https://arleth-desz.blogspot.co.id/feeds/posts/default/-/Tutorial?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script>
</ul>
</div>

Demo
Silahkan kalian ganti yang sudah di tandai, cukup sekian tutorial kali ini semoga bermanfaat.