Tutorial Membuat Daftar Isi Blog Berdasarkan Label

 Assalamu'alaikum Bapak Ibu sahabat Berbagi Tutorial

Daftar isi / sitemap blog berdasarkan label adalah daftar judul artikel blog beserta tautannya yang dikelompokkan menurut label atau kategori. Sehingga akan membuat tampilannya terlihat lebih rapi dan keren tentunya. Selain itu juga, dapat memudahkan pengunjung untuk memilih dan mencari apa yang mereka inginkan.

Daftar isi ini bisa dipasang sebagai widget blog. Tapi, kebanyakan blogger lebih memilih untuk memasang daftar isi ini pada halaman statis (Laman). Alasannya, biar terlihat lebih profesional.

Berikut ini cara membuat daftar isi berdasarkan label pada halaman statis Blog.

1. Masuk ke Blogger, kemudian pilih Blog yang ingin Anda buatkan halaman daftar isi.

2. Pada menu Blogger sebelah kiri pilih Laman/Halaman, kemudian klik Laman/Halaman baru.

3. Buatlah judul Daftar Isi, Klik Mode HTML (< >) kemudian Copy dan Pastekan kode script di bawah,.


  1. <style>
  2. p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
  3. a.post-titles {}
  4. ol li{list-style-type:decimal;line-height:25px;}
  5. </style>
  6. <script>
  7. //<![CDATA[
  8. var postTitle=new Array();var postUrl=new Array();var postLabels=new Array();var postRecent=new Array();function sitemaplabel(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postUrl[ii]=j;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2()}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var c="Category";var j="";if(postFilter!=""){j="Click to view all"};if(l==postTitle.length)var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">Baru!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}};
  9. //]]>
  10. </script>
  11. <script src="https://www.otodidak.web.id/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=sitemaplabel"></script>

DOWNLOAD SCRIPT

4. Jangan lupa ganti url www.otodidak.web.id dengan url blog milik Anda. Dan langsung publikasikan pada mode HTML. Silahkan lihat, daftar isi blog keren sudah jadi.

Sekian Tutorial cara Membuat Daftar Isi Blog Berdasarkan Label Selamat Mencoba

1 Comments

Previous Post Next Post