Ongoing List Anime Auto Index

Ongoing List Anime Auto Index - Ongoing List Anime biasanya sering dilihat pada blog atau web fansub/fanshare anime diindonesia yang berkhasiat untuk memperlihatkan isu kepada visitor blog/web tersebut sanggup mengetahui anime apa saja yang dirilis tiap musimnya.

Tutorial sebelumnya aku sudah membahas ihwal Mengatasi Gambar Buram, Blur, Pecah di Blog, pada hari ini aku akan membagikan tutorial cara Membuat Ongoing List Anime [Auto Index], sesuai judulnya fitur ini gampang dan mudah kalian tidak perlu lagi untuk mengedit satu-persatu tiap musimnya alasannya aku memperlihatkan fitur Auto Index jadi hanya perlu memakai label dan otomatis akan terindeks, ok eksklusif saja kita mulai.

Cara Membuat Ongoing List Anime Auto Index diHalaman Blog

1. Silahkan Buka Blogger > Tema > Edit HTML, kemudian cari javascript berikut ini diatas </head>, kalau sudah ada abaikan, kalau belum ada silahkan tambahkan

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



2. Cari </body> atau &lt;!--</body>--&gt;&lt;/body&gt;, tambahkan javascript berikut diatasnya

<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'> <script type="text/javascript"> $(document).ready(function() {$('img.ongoinglist-images').attr('src', function(i, src)  {return src.replace( 's72-c', 'w122-h145-c' );});}); </script> </b:if>



3. Jika sudah save template
4. Lalu Buka Blogger > Halaman > Tambahkan Halaman, simpan javascript dan CSS dihalaman tersebut

<style> /* Ongoing List Auto Index By Arlethdesign    ======================================= */ 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} </style>  <script type="text/javascript"> var jumlah_ongoinglist = 90; var showongoingimages = true; var articleongoing = true; var ongoing_konten = true; var jumlah_konten = 70; 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwwr1t-vVkn6O3RVruSkGWgrxO80qMMkCbApfTfjKF4mGo98CzBxWxjveCYHWpowclfp27hPqSk6CjF_y7RfNCp_qB-dwOJXCTCYHJuvDhLOo_DdgivjfyPqWdF4Wk2JfRcfQjZml6xMqp/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+'" sasaran ="_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" sasaran ="_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+'" sasaran ="_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>

Silahkan lihat pratinjau yang sudah jadi dibawah ini beserta cara settingnya

Demo

Tag	Keterangan
var jumlah_ongoinglist = 90;	No 99 untuk menampilkan Jumlah postnya
var jumlah_konten = 70;	No 75 untuk menampilkan Jumlah kontennya
Fall%202016	Ganti Dengan Label

Jika Gambar tidak sesuai silahkan edit bab Css & Javascript

Bagikan Artikel ini