Ongoing List Anime [Auto Index]

Syahrul
Cara Membuat Ongoing List Anime [Auto Index] - Ongoing List Anime biasanya dapat ditemui diblog atau web-web anime baik itu fansub atau fanshare yang gunanya untuk memberi informasi kepada visitor blog/web tersebut dapat mengetahui anime apa saja yang dirilis tiap musimnya.

Kali ini saya akan membagikan tutorial yang bermanfaat untuk kalian yang mempunyai blog fansub atau fanshare anime, yaitu Cara Membuat Ongoing List Anime Auto Index, sesuai judulnya tutorial ini sangat simpel, kalian tidak perlu lagi untuk mengedit satu-persatu tiap musimnya karena saya memberikan fitur Auto Index jadi hanya perlu menggunakan label dan otomatis akan terindeks, ok langsung saja kita mulai.

Ongoing List Anime Auto Index

1. Pertama Buka Blogger > Template > Edit HTML, lalu pastikan ada javascript ini di atas </head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>

2. Cari </body>, lalu tambahkan javascript ini di atasnya
<script type="text/javascript">
$(document).ready(function() {$('img.ongoinglist-images').attr('src', function(i, src) 
{return src.replace( 's72-c', 'w122-h145-c' );});});
</script>

3. Cari </style>, dan simpan CSS berikut di atasnya, Jika Sudah Save Template
/* Ongoing List Auto Index By Arleth98 */
ul.ongoing-list-post{margin:0!important;line-height:normal!important;list-style:none!important;font-weight:400!important}
li.list-ongoing{margin:5px 5px!important;width:46%!important;padding:5px!important;float:left!important;line-height:normal!important;font-size:13px!important;position:relative!important;border:1px solid #ddd!important;list-style:none!important}
img.ongoinglist-images{float:left!important;width:122px!important;height:145px!important;margin-right:5px!important;border:1px solid!important}
.ongoinglist-judul{margin-bottom:5px!important;font-weight:600!important}
.ongoinglist-more{position:absolute!important;bottom:0!important;right:5px!important}

3. Buatlah Halaman/ Page baru, kemudian tambahkan Javascript & HTML berikut ini, jangan lupa di edit, jika sudah Save & lihat hasilnya.
<script type="text/javascript">
var jumlah_ongoinglist = 99;
var showongoingimages = true;
var articleongoing = true;
var ongoing_konten = true;
var jumlah_konten = 75;
var showcommentslink = false;var ongoing_release = false; function showongoinglist(C){document.write('<ul class="ongoing-list-post">');for(var P=0;P<jumlah_ongoinglist;P++){var D,H=C.feed.entry[P],L=H.title.$t;if(P==C.feed.entry.length){break}for(var G=0;G<H.link.length;G++){if("replies"==H.link[G].rel&&"text/html"==H.link[G].type){var J=H.link[G].title,I=H.link[G].href}if("alternate"==H.link[G].rel){D=H.link[G].href;break}}var B;try{B=H.media$thumbnail.url}catch(M){s=H.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),B=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var F=H.published.$t,O=F.substring(0,4),N=F.substring(5,7),z=F.substring(8,10),x=new Array;if(x[1]="Jan",x[2]="Feb",x[3]="Mar",x[4]="Apr",x[5]="May",x[6]="Jun",x[7]="Jul",x[8]="Aug",x[9]="Sep",x[10]="Oct",x[11]="Nov",x[12]="Dec",document.write('<li class="list-ongoing">'),1==showongoingimages&&document.write('<a href="'+D+'"><img class="ongoinglist-images" src="'+B+'"/></a>'),document.write('<div class="ongoinglist-judul"><a href="'+D+'" target ="_top">'+L+"</a></div>"),"content" in H){var E=H.content.$t}else{if("summary" in H){var E=H.summary.$t}else{var E=""}}var K=/<\S[^>]*>/g;if(E=E.replace(K,""),1==ongoing_konten){if(E.length<jumlah_konten){document.write(E)}else{E=E.substring(0,jumlah_konten);var q=E.lastIndexOf(" ");E=E.substring(0,q),document.write(E+"...")}}var Q="",j=0;document.write('<br><div class="ongoinglist-more">'),1==ongoing_release&&(Q=Q+x[parseInt(N,10)]+" "+z+" "+O,j=1),1==articleongoing&&(1==j&&(Q+=" | "),Q=Q+'<a href="'+D+'" class="url" target ="_top">Read more</a>',j=1),1==showcommentslink&&(1==j&&(Q+=" <br> "),"1 Comments"==J&&(J="1 Comment"),"0 Comments"==J&&(J="No Comments"),J='<a href="'+I+'" target ="_top">'+J+"</a>",Q+=J,j=1),document.write(Q),document.write("</div>"),document.write("</li>")}document.write("</ul>")};
</script>
<script src="/feeds/posts/default/-/Fall%202016?orderby=published&alt=json-in-script&callback=showongoinglist"></script>
<noscript>Your browser does not support JavaScript!</noscript>

Demo

Setting

TagKeterangan
var jumlah_ongoinglist = 99; No 99 untuk menampilkan Jumlah postnya
var jumlah_konten = 75; No 75 untuk menampilkan Jumlah kontennya
Fall%202016 Ganti Dengan Label
Jika Lebar & tinggi-nya tidak sesuai silahkan kalian ubah di langkah ke 3 & 2
Related Posts
Disqus Comments