Cara Membuat Daftar Isi Blog Tanpa Javascript Lebih Ringan

Untuk membuat daftar isi blog, biasanya membutuhkan eksternal javascript yang diletakan di luar blogger. cara membuat daftar isi blog yang seperti ini secara tidak langsung akan menambah berat blog saat diakses. Dengan membuat daftar isi blog tanpa eksternal javascript, akan mempercepat loading halaman blog dan membuat pengunjung lebih betah berlama-lama. tentunya akan berdampak positif pada page view yang didapatkan dari pengunjung blog.

Cara membuat sitemap blog tanpa eksternal javascript saya temukan dari pengalaman pribadi yang bersumber dari eksternal javascript yang digunakan Kopi Anget Kang Topjer.

Tampilan daftar isi blog dengan internal javascript

Dan teryata untuk membuat daftar isi blog tidaklah susah dan dampaknya tentu loading halaman daftar isi blog akan lebih cepat dibanding menggunakan eksternal javascript. sedangkan dampak positif yang lebih jauh adalah kesempatan mendapatkan page view lebih banyak dari pengunjung blog.

Dalam pembuatan sitemap blog tanpa eksternal javascript ini dibutuhkan 2 buah script, yang pertama untuk meng-generate list artikel atau daftar postingan dan yang kedua untuk memanggil url postingan dari feed blog.
Kedua script tersebut akan dimasukan kedalam static page yang nantinya digunakan sebagai halaman daftar isi blog.

Script pertama digunakan untuk membuat daftar isi blog :

<script type='text/javascript'>
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postYear=new Array();var postMonth=new Array();var postYearMonth=new Array();var postYearMonth2=new Array();var postTanggal=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];function loadtoc(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 m=a.feed.entry[h];var e=m.title.$t;var l=m.published.$t.substring(0,10);var p=m.published.$t.substring(5,7);var g=m.published.$t.substring(8,10);var n=month2[parseInt(p,10)-1]+" "+m.published.$t.substring(0,4);var c="/"+m.published.$t.substring(0,4)+"_"+p+"_01_archive.html";var j;for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="alternate"){j=m.link[f].href;break}}var o="";for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="enclosure"){o=m.link[f].href;break}}postTitle.push(e);postDate.push(l);postUrl.push(j);postYearMonth.push(n);postYearMonth2.push(c);postTanggal.push(g)}}}b();displayToc2();document.write('<br/><a href="http://www.kopianget.com/" style="font-size: 1px; text-decoration:none; color: #333;">kangtopjer</a></br/>')}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postYearMonth[b];document.write("<p/>");document.write('<p><a href="'+postYearMonth2[b]+'">'+temp1+"</a></p><ul>");firsti=a;do{document.write("<li>");document.write("["+postTanggal[a]+'] <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><p>");document.write("</li>");a=a+1}while(postYearMonth[a]==temp1);b=a;document.write("</ul>");if(b>postTitle.length){break}}};
//]]>
</script>

Script kedua digunakan untuk memanggil posting dari feed blog :

<script type='text/javascript'>
//<![CDATA[
<script src="http://www.kopianget.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
//]]>
</script>

Cara membuat daftar isi blog tanpa eksternal javascript

1. Login ke akun blogger
2. Klik Posting kemudian Edit Pages
3. Klik New Page dan paste script pertama yang sudah di copy tadi
4. Kemudian paste script kedua persis dibawah script pertama
5. Klik Publish Page
6. Daftar isi blog tanpa javascript sudah jadi

ALTERNATIF LAIN CARA MEMBUAT DAFTAR ISI PADA BLOG

Dikarnakan banyak sobat blogger yang belum sukses dalam membuat daftar isi pada blog menggunakan cara diatas, maka kang topjer menyediakan alternatif script untuk membuat daftar isi blog.

Cara membuat daftar isi pada blog dengan script yang kang topjer buat sangatlah mudah, langkah awal sama dengan cara pertama diatas yaitu membuat Halaman atau Pages baru yang nantinya akan dijadikan sebagai halaman daftar isi.

Kemudian copy paste script berikut ini pada halaman yang sudah dibuat tadi

<style>
#sitemap{height:1010px;padding:4px;overflow:auto;}
#sitemap a{color:#000000;font-weight:normal;}
#sitemap a:hover{color:#C97106;text-decoration:underline;}
</style>

<div id="sitemap">
<script src="https://kopiangetweb.googlecode.com/svn/trunk/daftar-isi.js" type="text/javascript"></script>
<script src="http://www.nama-blog-mu.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

- Atur tampilan Daftar Isi Blog yang sudah dibuat dengan merubah kode CSS pada bagian
<style>
........
........
</style>

Demo daftar isi blog tanpa javascript dapat dilihat di Daftar Isi Blog Kopi Anget Kang Topjer.