cara membuat daftar Isi blog satu halaman penuh

Image by http://jember-preker.blogspot.com/

Daftar Isi atau yang biasa disebut sitemap sangat penting bagi kepentingan pengunjung untuk melihat semua daftar artikel dengan kategory.Untuk membuat daftar isi sangat memiliki pilihan yang banyak dan untuk mendapatkan mmodel daftar Isi yang simple,praktis namun rapi tidaklah mudah.

Disini akan di jelaskan beberapa cara membuat daftar Isi yang mudah,simple,rapi,dengan menggunakan Jquery ataupun javascript dengan kotak 2 coloum dengan kolom sebelah kiri kategory dan kolom sebelah kanan semua artikel kategory dan ada juga dengan menggunakan hasil dari kategory dari beberapa nomer saja dengan tambahan navigasi next.

Untuk lebih jelasnya mari kita simak cara membuat beberapa daftar isi yang simple.

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
<br />
<br />
<link href="http://zongreen.xtgem.com/tabbed-toc-skin.css" media="screen" rel="stylesheet" type="text/css"></link>

<br />
<div id="tabbed-toc">
<span class="loading">Memuat...</span></div>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "Ganti URL blogmu", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // true to show the post date
showSummaries: false, // true to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: tru, // true to show the posts thumbnails (Not recommended)
monthNames: [ // Array of month names
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum posts result
preload: 0 // Load the feed after 5 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="http://zongreen.xtgem.com/tabbed-toc.js" type="text/javascript"></script></div>

DEMO

Cara kedua yang lebih simple dai hasil seperti milik Jember Preker

1. Pertama buat Laman baru lalu edit HTML paste kode dibawah
<div dir="ltr" style="text-align: left;" trbidi="on"> <style scoped="scoped" type="text/css"> #show-cat{float:left;margin-right:20px;width:220px;height:391px;overflow-x:hidden;overflow-y:auto;line-height:18px} #show-cat ul{margin:0;border-top:1px solid #ccc;padding:0} #show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:1px solid #ccc;padding:0} #show-cat ul li a{display:block;padding:10px} #show-cat ul li a,#navi-cat a{background:#fff;color:#d80556;text-decoration:none} #show-cat ul li a,#navi-cat a,#navi-cat span{font-size:12px} #show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff} #show-post{float:left;width:60%} #show-post ul li{list-style-type:none} #navi-cat{padding:20px 0} #navi-cat a{margin-right:10px;border:1px solid #ccc} #navi-cat a,#navi-cat span{padding:5px 10px} #navi-cat span{float:right} </style> <div id="show-cat"> </div> <div id="show-post"> <script type="text/javaScript"> var cat_home='http://www.jember-preker.blogspot.com';cat_numb=11;cat_pre='Prev';cat_nex='Next'; var cat_name;var cat_start;var cat_class; function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+=' <li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li> '}dw+='</ul> ';dw+='<div id="navi-cat"> ';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' – '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div> ';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+=' <li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li> '}dw+='</ul> ';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>'); </script> </div> <div style="clear: both;"> </div> </div>





Setelah itu ganti URL jember-preker.blogspot.com dengan URL blog anda 
setelah itu save dan lihat hasilnya.

Jika anda sudah memiliki daftar isi atau yang sering disebut sitemap ini maka hapus daftar isi anda untuk menampilkan daftar isi baru anda.Semoga membantu anda.