Anime List Auto Index Dengan Satu Label

Sebelumnya saya pernah share Anime List Auto Index di Blogger namun dengan cara menggunakan label dengan huruf A - Z satu persatu, namun kali ini saya akan membagikan tutorial Anime List Auto Index lainnya dengan 1 label saja. Bagaimana caranya? langsung saja ikuti langkah dibawah ini:


1. Buat atau Beri Label postingan yang hendak ingin ditampilkan ke dalam anime list dengan nama label Anime.
2. Buat Laman baru kemudian masukkan kode CSS, HTML dan JavaScript dibawah ini ke dalam tab HTML (sebelah Compose).

<script type="text/javascript">
/* Script Anime List 1 Label Blogger by Ex10sionlabs */
var numposts = 10000;
var as = [];
var al = [];
var sa;
function animelist(json){for(var i = 0; i < numposts; i++){ var entry = json.feed.entry[i];var posttitle = entry.title.$t;as.push(posttitle);sa = json.feed.entry.length;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;al.push(posturl);break;}}as.sort();al.sort();}}
</script>
<script src="/feeds/posts/default/-/Anime?orderby=published&alt=json-in-script&callback=animelist&max-results=9999999"></script>
<style>
.nav-anime-list ul{overflow:hidden;list-style-type:none;}
.nav-anime-list ul li{float:left;overflow:hidden;padding:3px;height:16px;width:16px;text-align:center;font-size:16px;margin-right:1px;background-color:#ddd;}
.nav-anime-list ul li a{color:#333;font-weight:bold;}
.anime-list-ex10{margin:0 auto;font-family:sans-serif;padding:15px;overflow:hidden;}
.anime-list-ex10 a{text-decoration:none;}
.anime-list-ex10 b{display:block;width:100%;margin:5px 0;border-bottom:2px solid #ddd;color:#666;height:16px;font-size:16px;padding:5px 0;overflow:hidden;clear:both;}
.anime-list-ex10 b:first-child{margin-top:0;}
.anime-list-ex10 b span{padding:5px 8px;background-color:#ddd;}
.anime-list-ex10 li.it{list-style-type:square;font-size:12px;padding:2px 0;float:left;width:48%;white-space:nowrap;overflow:hidden;padding-right:5px;text-overflow:ellipsis;}
.anime-list-ex10 .anime-list-ttl{padding-top:5px;overflow:hidden;clear:both;}
@media screen and (max-width:640px){.anime-list-ex10{width:inherit;}}
</style>
<div class="anime-list-ex10">
<div class="nav-anime-list"></div>
<script>
var ehem = "";
var pertama = "";
var oi = true;
var ia = [];
var cts = "";
for(var q = 0; q < sa; q++){pertama = as[q].substr(0, 1);if(pertama != ehem){document.write("<div class='anime-list-ttl'><b id='" + pertama + "'><span>" + pertama + "</span></b></div>");ehem = pertama;ia.push(pertama);}document.write("<li class='it'><a href='" + al[q] + "' title='" + as[q] + "'>" + as[q] + "</a></li>");}
for(var x = 0; x < ia.length; x++){cts += "<li><a href='" + ia[x] + "'>" + ia[x] + "</a></li>"}
document.getElementsByClassName("nav-anime-list")[0].innerHTML = "<ul>" + cts + "</ul>";
</script>
</div>

3. Publikasikan Laman, dan sukses!

Perhatian! mungkin script ini saya tidak menjamin keakuratan judul tautan dengan link tautan animenya itu cocok, tapi selama masih cocok dan benar Judul dengan linknya tidak apa. Jika ragu-ragu bisa kalian gunakan cara yang ini (Anime List Auto Index di Blogger).

Jangan lupa, kalian bisa ganti styling nya. Sekian dari cara membuat anime list ini semoga bermanfaat bagi kalian

Demo

Author : Ex10sionlabs

Belum sukses.

Share this

Related Posts