Ongoing List Anime Auto Index [Responsive Update]

Ongoing List Anime Auto Index - Ongoing List Anime biasanya sering dilihat pada blog atau web fansub/fanshare anime diindonesia yang berguna untuk memberikan informasi kepada visitor blog/web tersebut dapat mengetahui anime apa saja yang dirilis tiap musimnya.



Tutorial sebelumnya saya sudah membahas tentang Mengatasi Gambar Buram, Blur, Pecah di Blog, pada hari ini saya akan membagikan tutorial cara Membuat Ongoing List Anime [Auto Index], sesuai judulnya fitur ini mudah dan 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.


Cara Membuat Ongoing List Anime Auto Index diHalaman Blog

  1. Silahkan Buka Blogger > Tema > Edit HTML, lalu cari javascript berikut ini diatas </head>, jika 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. Selanjutnya simpan CSS berikut kedalam <b:skin>...</b:skin> atau <style>...</style>
    /* Ongoing List Auto Index By Arlethdesign
       ======================================= */
    #ongoing-list-post{margin:0 auto;line-height:normal;list-style:none;font-weight:400}
    #ongoing-list-post li.list-ongoing{margin:5px 5px;width:46%;padding:5px;float:left;line-height:normal;font-size:13px;position:relative;border:1px solid #ddd;list-style:none}
    #ongoing-list-post img.ongoinglist-images{float:left;width:122px;height:145px;margin-right:5px;border:1px solid}
    #ongoing-list-post .ongoinglist-judul{margin-bottom:5px;font-weight:600}
    #ongoing-list-post .ongoinglist-more{position:absolute;bottom:0;right:5px}
    @media screen and (max-width:728px){
    #ongoing-list-post li.list-ongoing{width:100%;max-width:95%;float:none;display:block;clear:both;margin:10px auto;overflow:hidden;}
    }

  4. Jika sudah save template
  5. Lalu Buka Blogger > Halaman > Tambahkan Halaman, simpan javascript
    <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 id="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>

Silahkan lihat pratinjau yang sudah jadi dibawah ini beserta cara settingnya



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 bagian Css & Javascript
Related Post
Comment Post