Cara Membuat Daftar Isi Blog Otomatis Berdasarkan Label

at Tuesday, September 02, 2014
Tutorial cara membuat daftar isi blog otomatis dengan format HTML yang akan dikelompokkan berdasarkan label / kategori. Sitemap ini bisa berguna bagi sobat blogger atau siapa saja yang mengunjungi sebuah blog pasti akan terbantu apabila pada menu tersedia halaman daftar isi karena akan dengan mudah menemukan informasi yang dicari.


Cara Membuat Daftar Isi Blog Otomatis Berdasarkan Label


Karena dengan cepat setiap pengunjung bisa menemukan artikel yang mereka cari atau butuhkan, begitu juga dengan algoritma mesin pencari karena menyukai blog yang memiliki navigasi tertata dengan baik. Begitu juga dengan idlogs yang masih sangat baru, maka melengkapi blog ini dengan halaman daftar isi / sitemap memang harus saya lakukan.

Baiklah, secara singkat saja saya akan berbagi tips mengenai cara membuat daftar isi otomatis untuk blog, yang berarti untuk setiap artikel yang baru saja dipublish nantinya akan dimasuk kedalam artikel sebelumnya dengan label yang sama. Untuk script yang akan digunakan nantinya saya ambil dari sebuah blog yang bisa sobat kunjungi di cara membuat sitemap otomatis blogger.

Sebelumya letakkan terlebih dahulu script ini pada template sebelum </head>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><script type='text/javascript'>
//<![CDATA[
function loadtoc(e){function t(){if("entry"in e.feed){var t=e.feed.entry.length;numberfeed=t;ii=0;for(var n=0;n<t;n++){var r=e.feed.entry[n];var i=r.title.$t;var s=r.published.$t.substring(0,10);var o;for(var u=0;u<r.link.length;u++){if(r.link[u].rel=="alternate"){o=r.link[u].href;break}}var a="";for(var u=0;u<r.link.length;u++){if(r.link[u].rel=="enclosure"){a=r.link[u].href;break}}var f="";if("category"in r){for(var u=0;u<r.category.length;u++){f=r.category[u].term;var l=f.lastIndexOf(";");if(l!=-1){f=f.substring(0,l)}postLabels[ii]=f;postTitle[ii]=i;postUrl[ii]=o;ii=ii+1}}}}}t();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write()}function filterPosts(e){scroll(0,0);postFilter=e;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(e){function t(e,t){var n=postTitle[e];postTitle[e]=postTitle[t];postTitle[t]=n;var n=postUrl[e];postUrl[e]=postUrl[t];postUrl[t]=n;var n=postLabels[e];postLabels[e]=postLabels[t];postLabels[t]=n;var n=postBaru[e];postBaru[e]=postBaru[t];postBaru[t]=n}for(var n=0;n<postTitle.length-1;n++){for(var r=n+1;r<postTitle.length;r++){if(e=="titleasc"){if(postTitle[n]>postTitle[r]){t(n,r)}}if(e=="titledesc"){if(postTitle[n]<postTitle[r]){t(n,r)}}if(e=="dateoldest"){if(postDate[n]>postDate[r]){t(n,r)}}if(e=="datenewest"){if(postDate[n]<postDate[r]){t(n,r)}}if(e=="orderlabel"){if(postLabels[n]>postLabels[r]){t(n,r)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var e=0;var t=0;while(t<postTitle.length){temp1=postLabels[t];firsti=e;do{e=e+1}while(postLabels[e]==temp1);t=e;sortPosts2(firsti,e);if(t>postTitle.length){break}}}function sortPosts2(e,t){function n(e,t){var n=postTitle[e];postTitle[e]=postTitle[t];postTitle[t]=n;var n=postUrl[e];postUrl[e]=postUrl[t];postUrl[t]=n;var n=postLabels[e];postLabels[e]=postLabels[t];postLabels[t]=n}for(var r=e;r<t-1;r++){for(var i=r+1;i<t;i++){if(postTitle[r]>postTitle[i]){n(r,i)}}}}function displayToc2(){var e=0;var t=0;while(t<postTitle.length){temp1=postLabels[t];document.write('<p style="background: #f7f7f7;padding: 5px;" />');document.write('<span class="labl"><span>Label :  </span><a href="/search/label/'+temp1+'">'+temp1+"</a></span><ul class='postname'>");firsti=e;do{document.write("<li>");document.write('<a href="'+postUrl[e]+'">'+postTitle[e]+"</a>");document.write("</li>");e=e+1}while(postLabels[e]==temp1);t=e;document.write("</ul>");sortPosts2(firsti,e);if(t>postTitle.length){break}}}var postTitle=new Array;var postUrl=new Array;var postLabels=new Array;var postBaru=new Array;var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;document.write("")
//]]>
</script><b:else/></b:if>

Selanjutnya buat page baru, karena untuk daftar isi sebaiknya kita menggunakan laman statis dan pilih pada metode penulisan HMTL. Berikutnya dilanjutkan dengan meng-copy kode yang ada di bawah ini, namun sebelum dipublish terlebih dahulu ganti link yang saya beri warna merah dengan link blog sobat.

<script src="http://idlogs.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Setelah itu baru dipublish, maka hasilnya akan sama dengan yang ada pada blog ini yang bisa sobat lihat disini. Untuk sesuatu yang bisa dibilang perlu ternyata tidak butuh waktu lama dalam proses pengerjaannya dan juga sangat mudah.

Cukup banyak panduan cara membuat daftar isi blog otomatis yang bisa sobat temukan saat ini, tentunya dengan hasil atau bentuk rancangan yang berbeda-beda untuk halaman sitemap ini, tinggal sobat pilih yang sesuai dengan selera. Nah bagi sobat yang saat mungkin mempunyai blog, bisa membaca tutorial lengkap mengenai cara membuat blog gratis di blogspot beikut ini.