Cara Membuat Halaman Ongoing Anime di Blogger Responsive dan Index Otomatis

Cara pasang halaman ongoing aniem di blogger

Halaman ongoing dalam blog download anime atau manga sangat identik kaitannya dengan sebuah postingan yang masih berlanjut. Fungsi dari halaman ongoing adalah untuk memberitahukan anime dengan judul apa saja yang sedang dirilis dan digarap oleh web tersebut.

Dalam blog download anime hal ini sebenarnya tidak wajib ada, namun kalian bisa mencobanya jika ingin memasang halaman ongoing anime, mangam dan light novel auto index.

Cara buat halaman ongoing anime di blogger.

  1. Masuk Blogger.com > Tema > Edit HTML
  2. Kalian cek apakah template blogger yang kalian pergunakan sudah dipasang Jquery atau belum. Silahkan pergunakan CTRL + F untuk mencari link Jquery di blog kalian.
  3. Jika belum memasang Jquery diblognya, kalian copy dan pastekan script Jquery berikut ini tepat diatas </head> atau dibawah tag <head>. Rekomendasi kami ya dibawah tag <head>
  4. 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"/>
    
  5. Jika sudah memasang Jquery, cari kode </body> dan copas kode berikut tapat diatasnya.
  6. 
    <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>
    
  7. Lalu cari tag </style> atau </b:skin>, letakkan kode berikut tepat diatasnya.
  8. 
    /* List ongoing auto index By Bloggerxcode
    ======================================= */
    #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;}
    }
    
  9. Jika setiap step diatas telah dilakukan, selanjutnya save tema.
  10. kemudian buat halaman baru, klik menu Halaman > Halaman baru.
  11. Masuk ke mode HTML, copas kode javascript berikut.
  12. 
    <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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgugj2qbzsTmme6VFUJ-0RH5leJ9JUPBXAYUaJDiPbrEwyd0HckuBSpPhYkFDygAMd2XZZ2mOhNdR3OFYCa9c3ppXwPwX4GD0bUdxm-GvuVdMJnSAyQKwZfIlpC0Zg_1_SywGhnnsOyCjnm/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%202021?orderby=published&alt=json-in-script&callback=showongoinglist"></script>
    <noscript>Your browser does not support JavaScript!</noscript>
    
  13. Publish halaman baru tersebut, jangan lupa beri judul ya.

Keterangan

Tag Keterangan
var jumlah_ongoinglist = 90; Silahkan ganti nomor 90-nya dengan angka yang lain. Angka 90 ini menunjukkan jumlah post yang di tampilkan
var jumlah_konten = 70; Ganti angka 70 untuk menentukan jumlah kontennya.
Fall%202021 Ganti dengan lebel musim anime ongoingnya.

Cara menggunakan dan menampilkan ongoing list anime di blogger.

Disini aku coba beri step-step kalian membuat halaman ongoing anime. Langsung aja ya.

  1. Buat postingan baru.
  2. Jika sudah selesai kalian tambahkan label sesuai dengan kapan animenya dirilis. Misal, fall 2022, summer 2021, dsb.
  3. Setelah postingan terpublish, kalian buat halaman list ongoingnya dengan cara diatas ya.
  4. Ganti tag yang kami tandai agar anime ongoingnya bekerja. Di kode diatas yang perlu kalian ganti adalah Fall%202021 dengan label yang tadi dibuat.
  5. Done

Kalian bisa juga membuat halaman ongoingnya dulu, baru posting anime ongoingnya.

Penutup.

Begitulah cara membuat halaman ongoing anime di blogger. Cara ini dan demonya aku lakukan melalui blogger dengan tema viomagz sebagai demo jadi sangat mungkin tampilannya akan tidak sesuai dengan yang didemo. Jika ada kendala silahkan komentar atau kirim email.

Sekian dari kami.

Source kode : https://arlethdesign.blogspot.com/2017/10/ongoing-list-anime-auto-index.html

Post a Comment

Previous Post Next Post