Bagaimana Daftar Isi di Blog Ini Dibuat?

Daftar isi (table of content) atau sering ditulis sitemap ini menjadi kebutuhan setiap blog atau website. Tujuannya adalah untuk memudahkan pengunjung menjelajah isi blog/website. Seperti yang ada di blog ini juga disediakan menu daftar isi dengan 3 model daftar isi. Berharap pengunjung dimudahkan penjelajahannya. Daftar isi atau daftar tulisan di blog ini ketiga-tiganya menggunakan kode yang diambil dari pihak ketiga. Oleh karena itu semua kredit dari pembuatnya tetap dibiarkan muncul di halaman dafar isi.


Berikut ini hasil tangkap layar 3 model daftar isi/tulisan di blog ini:

Daftar Isi Model-1

Daftar Isi Model-2

Daftar Isi Model-3

Untuk membuatnya, ketiga-tiganya masing-masing dibuat pada halaman tersendiri.
Kode yang disalin ke halaman (mode html) untuk setiap model seperti di bawah ini:

Daftar Isi Model-1

<div style="text-align: right;">
<a href="http://www.urip.info/p/daftar-isi-tulisan-model-tabel.html"><button>Daftar Tulisan Bentuk Tabel</button></a><a href="http://www.urip.info/p/daftar-tulisan-berdasar-kategori-utama_9.html"><button>Daftar Tulisan - Kategori Utama</button></a></div>
<div id="TOC-date">
</div>
<script>
    var tocDate = {};
     
    tocDate.loadNumber = 50;
    tocDate.loadMoreText = "Load More";
    tocDate.loadAllText = "Load All";
    tocDate.toggleEffect = "fadeToggle";
    tocDate.month = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
    (function () {
    var url = "https://googledrive.com/host/0B6semvf0Cp63SS1DNC1tcTZ3X00/toc-date-sonic-en-min-140410.js",
    script = document.createElement("script");
    script.src = url;
    document.documentElement.firstChild.appendChild(script);
    } )();
    </script>  <style>
.tocYearTitle { /* year button */
display: inline-block;
float: left;
width: 60px;
padding: 3px;
font-size: 20px;
text-align: center;
cursor: pointer;
color: #ffffff;
font-family: Arial, sans-serif;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 1px 0px #3d768a;
-moz-box-shadow: 0px 10px 14px -8px #276873;
-webkit-box-shadow: 0px 10px 14px -8px #276873;
box-shadow: 0px 10px 14px -8px #276873;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
background: -moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -o-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
background-color: #599bb3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.tocYearTitle:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
background: -moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -o-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
background-color:#408c99;
}
.tocYearTitle:active {
position: relative;
top: 1px;
}
.tocYear { /* year area */
margin: 0px 5px 30px;
}
.tocYearToggle { /* year toggle */
margin-left: 83px;
}
.tocMonthTitle { /* month button */
display: inline-block;
font-size: 20px;
font-family: Arial, sans-serif;
font-weight: bold;
color: #000060;
cursor: pointer;
margin: 5px 0px 15px;
text-shadow: 2px 2px 4px #999;
}
.tocMonthTitle:hover {
text-shadow: 0 0 10px #000060;
}
.tocMonthTitle:active {
position: relative;
top: 1px;
}
.tocMonthToggle { /* month toggle */
margin-bottom: 20px;
}
.tocDayNo { /* date */
float: left;
font-size: 15px;
line-height: 1.6em;
}
.tocPostTitle { /* post title */
margin-left: 35px;
font-size: 15px;
line-height: 1.6em;
}
#tocMore { /* load button area */
margin: 40px 0px 40px 100px;
}
.tocMore { /* load button */
display: inline-block;
margin-right: 50px;
width: 140px;
padding: 10px;
cursor: pointer;
color: #3a8a9e;
font-family: arial, sans-serif;
font-size: 20px;
font-weight: bold;
text-align: center;
-moz-box-shadow: 0px 10px 14px -7px #899599;
-webkit-box-shadow: 0px 10px 14px -7px #899599;
box-shadow: 0px 10px 14px -7px #899599;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0);
background-color:#ededed;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
text-decoration:none;
text-shadow:0px 1px 0px #e1e2ed;
}
.tocMore:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed));
background:-moz-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:-webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:-o-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:-ms-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed',GradientType=0);
background-color:#bab1ba;
}
.tocMore:active {
position:relative;
top:1px;
}
#tocInfo { /* info area */
text-align: left;
margin-top: 40px;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 14px;
font-style: italic;
text-shadow: 1px 1px 1px lavender;
}
</style>

Daftar Isi Model-2

<div style="text-align: right;">
<a href="http://www.urip.info/p/daftar-tulisan.html"><button>Daftar Tulisan Secara Kronologis</button></a><a href="http://www.urip.info/p/daftar-tulisan-berdasar-kategori-utama_9.html"><button>Daftar Tulisan - Kategori Utama</button></a></div>
<div id="bp_toc">
Sedang Memuat Peta Situs. Sabar yah....</div>
<script type="text/javascript">
/* Author : Tushar Sharma
*  Add Table of Content in blogger (7 type provided)
*  Url: http://eutectics.blogspot.com/2014/12/add-table-of-content-or-sitemap-in-blogger-blog.html
*/
var postTitle=[],postUrl=[],postDate=[],postSum=[],postLabels=[],sortBy="datenewest",tocLoaded=!1,numChars=250,postFilter="",tocdiv=document.getElementById("bp_toc"),totalEntires=0,totalPosts=0;
function loadtoc(c){if("entry"in c.feed){var d=c.feed.entry.length;totalEntires+=d;totalPosts=c.feed.openSearch$totalResults.$t;if(totalPosts>totalEntires){var b=document.createElement("script");b.type="text/javascript";startindex=totalEntires+1;b.setAttribute("src","/feeds/posts/summary?start-index="+startindex+"&max-results=500&alt=json-in-script&callback=loadtoc");tocdiv.appendChild(b)}for(b=0;b<d;b++){for(var a=c.feed.entry[b],e=a.title.$t,k=a.published.$t.substring(0,10),l,f=0;f<a.link.length;f++)if("alternate"==
a.link[f].rel){l=a.link[f].href;break}var g="content"in a?a.content.$t:"summary"in a?a.summary.$t:"",g=g.replace(/<\S[^>]*>/g,"");if(g.length>numChars)var g=g.substring(0,numChars),h=g.lastIndexOf(" "),g=g.substring(0,h)+"...";h="";if("category"in a){for(f=0;f<a.category.length;f++)h+="<a href=\"javascript:filterPosts('"+a.category[f].term+"');\" title=\"Click here to select all posts with label '"+a.category[f].term+"'\">"+a.category[f].term+"</a>,  ";a=h.lastIndexOf(",");-1!=a&&(h=h.substring(0,
a))}postTitle.push(e);postDate.push(k);postUrl.push(l);postSum.push(g);postLabels.push(h)}}totalEntires==totalPosts&&(tocLoaded=!0,showToc());sortPosts(sortBy);tocLoaded=!0}function filterPosts(c){postFilter=c;displayToc(postFilter)}function allPosts(){postFilter="";displayToc(postFilter)}
function sortPosts(c){function d(a,b){var c=postTitle[a];postTitle[a]=postTitle[b];postTitle[b]=c;c=postDate[a];postDate[a]=postDate[b];postDate[b]=c;c=postUrl[a];postUrl[a]=postUrl[b];postUrl[b]=c;c=postSum[a];postSum[a]=postSum[b];postSum[b]=c;c=postLabels[a];postLabels[a]=postLabels[b];postLabels[b]=c}for(var b=0;b<postTitle.length-1;b++)for(var a=b+1;a<postTitle.length;a++)"titleasc"==c&&postTitle[b]>postTitle[a]&&d(b,a),"titledesc"==c&&postTitle[b]<postTitle[a]&&d(b,a),"dateoldest"==c&&postDate[b]>
postDate[a]&&d(b,a),"datenewest"==c&&postDate[b]<postDate[a]&&d(b,a)}
function displayToc(c){var d=0,b,a="Click to sort by title",e="Click to sort by date",k="";"titleasc"==sortBy&&(a+=" (descending)",e+=" (newest first)");"titledesc"==sortBy&&(a+=" (ascending)",e+=" (newest first)");"dateoldest"==sortBy&&(a+=" (ascending)",e+=" (newest first)");"datenewest"==sortBy&&(a+=" (ascending)",e+=" (oldest first)");""!=postFilter&&(k="Click to show all posts");b="<table>
<tr>";b+='<td class="toc-header-col1">';b+='<a href="javascript:toggleTitleSort();" title="'+a+'">JUDUL TULISAN</a>';
b+="</td>";b+='<td class="toc-header-col2">';b+='<a href="javascript:toggleDateSort();" title="'+e+'">TANGGAL </a>';b+="</td>";b+='<td class="toc-header-col3">';b+='<a href="javascript:allPosts();" title="'+k+'">KATEGORI/LABEL</a>';b+="</td>";b+="</tr>
";for(a=0;a<postTitle.length;a++)""==c?(b+='
<tr><td class="toc-entry-col1"><a href="'+postUrl[a]+'" title="'+postSum[a]+'">'+postTitle[a]+'</a></td><td class="toc-entry-col2">'+postDate[a]+'</td><td class="toc-entry-col3">'+postLabels[a]+"</td></tr>
",d++):
(z=postLabels[a].lastIndexOf(c),-1!=z&&(b+='
<tr><td class="toc-entry-col1"><a href="'+postUrl[a]+'" title="'+postSum[a]+'">'+postTitle[a]+'</a></td><td class="toc-entry-col2">'+postDate[a]+'</td><td class="toc-entry-col3">'+postLabels[a]+"</td></tr>
",d++));b+="</table>
";c=d==postTitle.length?'<span class="toc-note">Tampilan semua dari '+postTitle.length+" tulisan
</span>":'<span class="toc-note">Displaying '+d+" posts labeled '"+(postFilter+"' of "+postTitle.length+" posts total
</span>");tocdiv.innerHTML=
c+b}function toggleTitleSort(){sortBy="titleasc"==sortBy?"titledesc":"titleasc";sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){sortBy="datenewest"==sortBy?"dateoldest":"datenewest";sortPosts(sortBy);displayToc(postFilter)}function showToc(){tocLoaded?(displayToc(postFilter),document.getElementById("toclink")):alert("Just wait... TOC is loading")}
function hideToc(){document.getElementById("toc").innerHTML="";document.getElementById("toclink").innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">\u00bb Show Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQllUHkHY0kYMpbtbPJs9y__3563qTX-s6oqPz8GwPPokgv0PTWdciThQJU85AxizkNtXnyEuOk1lHQEkS_srFysUz0_dpsQke_qh8atnnjbyPYwck9EoARlnVrHDeIR63QustQavkWDWj/s200/new_1.gif"/>'};

</script> 
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<style>#bp_toc{background:0 0;width:100%;color:#999;margin:0 auto;padding:5px}.toc-header-col1{padding:15px!important;line-height:15px;background-color:#2E8B57;width:250px;}.toc-header-col2{padding:15px!important;line-height:15px;background-color:#373737;width:75px;}.toc-header-col3{padding:15px!important;line-height:15px;background-color:#2E8B57;width:125px;}.toc-header-col1:hover,.toc-header-col2:hover,.toc-header-col3:hover{opacity:.9}.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:15px;text-decoration:none;color:#fff;font-family:Raleway;font-weight:400;letter-spacing:.5px}.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px;font-size:92%;}.toc-entry-col1:hover,.toc-entry-col2:hover,.toc-entry-col3:hover{background: #E7F7FA;}.toc-entry-col1:nth-child(even),.toc-entry-col1:nth-child(odd),.toc-entry-col2:nth-child(even),.toc-entry-col2:nth-child(odd),.toc-entry-col3:nth-child(even),.toc-entry-col3:nth-child(odd){padding:10px;font-size:92%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{text-decoration:none;color:#666}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#000;text-decoration:underline}span.toc-note{padding:10px;margin:10px 0;display:inline-block;background:#fff;color:#666}#bp_toc table{width:100%;margin:0 auto;border-collapse:collapse;border-spacing:0;border-color:transparent}#bp_toc tr:nth-child(even){background:#fafafa}#bp_toc tr:nth-child(odd){background:#D6FFD6}#secondarybpart{display:none}#primarybpart{width:100%}.entry-content td {
border-bottom: none;}</style>

Daftar Isi Model-3

<div style="text-align: right;">
<a href="http://www.urip.info/p/daftar-isi-tulisan-model-tabel.html"><button>Daftar Tulisan Bentuk Tabel A</button></a><a href="http://www.urip.info/p/daftar-tulisan.html"><button>Daftar Tulisan Secara Kronologis</button></a></div>
<script type="text/javascript">
var labels = ['Tutorial', 'Kimia-1', 'Kimia-2', 'Kimia-3', 'Ragam' ];
var type = 'cloud';
var sorting = 'titleasc';
var numChars = 250;
var newestFlags = 10;
var numDisplay = 10;
var adjacents = 2;
var exception = false;
var slwep = true;
var incLabelAll = true;
</script>
<script src="http://yourjavascript.com/01550351441/init-toc.js" type="text/javascript"></script>
<script src="http://urip-info.blogspot.com/feeds/posts/summary?max-results=999&amp;alt=json-in-script&amp;callback=inittoc" type="text/javascript"></script>
<script type="text/javascript">
var postFilter="";var searchQuery="";var searchRegex;var access;var page;var tempPage=1;var display;function displaydata(){for(var i=0;i<postTitle.length;i++){if(i<newestFlags){labeled.push("<img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieKKOEJkDDkQvkizRatTph1TPXd1x5dzdyw42nGNKAZqxslL588kinvMAo99pxOhV_nHCI7tSE0ovsbOWFXLcEhSZSs_UwmFUfTnM26QWgxXbdv0gDGzge3exyTHijD0sAHMO7BnuM23w6/s1600/new.gif\" />");}else{labeled.push("");}}sortBy=sorting;sortPosts(sortBy);access=1;page=1;display=checkdisplay(numDisplay);displayItem();if(incLabelAll==true){displayToc(postFilter);}else{if(!exception&&slwep&&labels.length>0){labels.sort();postFilter=labels[0];displayToc(postFilter);}else{blogLabels.sort();postFilter=blogLabels[0];displayToc(postFilter);}}};function ju67iO(){var _1=document.getElementById("donotremove");var _2=_1.getElementsByTagName("a");if(_2[0].href.length==83){displaydata();}};ju67iO();function displayItem(){var _3="";_3+="<table width=\"100%\">
<tr>";_3+="<td id=\"ds-id1\"><form>
Cari Judul : <input type=\"text\" id=\"toc-search\" onkeyup=\"javascript:searchPosts()\" /></form>
</td>";_3+="<td id=\"ds-id2\" align=\"right\"></td>";_3+="</tr>
</table>
";document.getElementById("toc-display").innerHTML=_3;};function filterPosts(_4){sortBy=sorting;sortPosts(sortBy);access=1;page=1;postFilter=_4;displayToc(postFilter);};function selectFilterPosts(){var _5=document.tocForm;filter=_5.tocList.options[_5.tocList.selectedIndex].value;filterPosts(filter);};function selectPage(cp){var x=document.getElementById("toc-display").offsetLeft;var y=document.getElementById("toc-display").offsetTop;page=cp;tempPage=cp;displayToc(postFilter);window.scroll(x,y);};function selectDisplay(){var _6=document.formDisplay;displayTemp=_6.listDisplay.options[_6.listDisplay.selectedIndex].value;display=checkdisplay(displayTemp);page=1;displayToc(postFilter);};function checkdisplay(cd){var _7;if(cd=="All"){_7=postTitle.length;}else{_7=parseInt(cd);}return _7;};function searchPosts(){var _8;searchQuery=document.getElementById("toc-search").value;searchRegex=new RegExp(searchQuery,"i");if(searchQuery!=""){page=1;}else{page=tempPage;}displayToc(postFilter);};function sortPosts(_9){function _a(x,y){var _b=postTitle[x];postTitle[x]=postTitle[y];postTitle[y]=_b;var _b=postDate[x];postDate[x]=postDate[y];postDate[y]=_b;var _b=postDF[x];postDF[x]=postDF[y];postDF[y]=_b;var _b=postUpdate[x];postUpdate[x]=postUpdate[y];postUpdate[y]=_b;var _b=postUDF[x];postUDF[x]=postUDF[y];postUDF[y]=_b;var _b=postURL[x];postURL[x]=postURL[y];postURL[y]=_b;var _b=postSummary[x];postSummary[x]=postSummary[y];postSummary[y]=_b;var _b=postLabels[x];postLabels[x]=postLabels[y];postLabels[y]=_b;var _b=labeled[x];labeled[x]=labeled[y];labeled[y]=_b;};for(var i=0;i<postTitle.length-1;i++){for(var j=i+1;j<postTitle.length;j++){if(_9=="titleasc"){if(postTitle[i]>postTitle[j]){_a(i,j);}}if(_9=="titledesc"){if(postTitle[i]<postTitle[j]){_a(i,j);}}if(_9=="dateoldest"){if(postDF[i]>postDF[j]){_a(i,j);}}if(_9=="datenewest"){if(postDF[i]<postDF[j]){_a(i,j);}}if(_9=="updateoldest"){if(postUDF[i]>postUDF[j]){_a(i,j);}}if(_9=="updatenewest"){if(postUDF[i]<postUDF[j]){_a(i,j);}}}}};function displayToc(_c){var _d="";if(type=="cloud"){if(incLabelAll==true){if(_c=="All"||_c==""){_d+="<span>Semua</span>";}else{_d+="<a href=\"javascript:filterPosts('All')\">Semua</a>";}}if(!exception&&slwep&&labels.length>0){labels.sort();for(var i=0;i<labels.length;i++){if(labels[i]==_c){_d+="<span>"+labels[i]+"</span>";}else{_d+="<a href=\"javascript:filterPosts('"+labels[i]+"')\">"+labels[i]+"</a>";}}}else{blogLabels.sort();for(var i=0;i<blogLabels.length;i++){if(blogLabels[i]==_c){_d+="<span>"+blogLabels[i]+"</span>";}else{_d+="<a href=\"javascript:filterPosts('"+blogLabels[i]+"')\">"+blogLabels[i]+"</a>";}}}}else{if(type=="dropdown"){_d+="<form name=\"tocForm\">
<select name=\"tocList\" onchange=\"javascript:selectFilterPosts()\">";if(incLabelAll==true){if(_c=="All"||_c==""){_d+="<option value=\"All\" selected=\"selected\">All</option>";}else{_d+="<option value=\"All\">All</option>";}}if(!exception&&slwep&&labels.length>0){labels.sort();for(var i=0;i<labels.length;i++){if(labels[i]==_c){_d+="<option value=\""+labels[i]+"\" selected=\"selected\">"+labels[i]+"</option>";}else{_d+="<option value=\""+labels[i]+"\">"+labels[i]+"</option>";}}}else{blogLabels.sort();for(var i=0;i<blogLabels.length;i++){if(blogLabels[i]==_c){_d+="<option value=\""+blogLabels[i]+"\" selected=\"selected\">"+blogLabels[i]+"</option>";}else{_d+="<option value=\""+blogLabels[i]+"\">"+blogLabels[i]+"</option>";}}}_d+="</select></form>
";}}document.getElementById("toc-header").innerHTML=_d;var _e;var _f;var _10;var _11="<img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHVOiB0jNHV4RkZ0ikNYiSoP61A3jM9HXmrAEWINQTAY9IFN5ywsJdlODW6NjtbU4SNcebjhNKzDPc5Hr0n8Qz804wLKr3bbZ0Vn-ZpQnb0TlzQYz0sGz5f0RDnM3BCNasm4vIJ0VaIadd/s1600/bt-up.gif\" />";var _12="<img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_TMmNq8PzZEQ3LFt9oKgtQkIlOReEwQ-BCsmN0yjZ9L4c1oiArQBJS-IP-UIGhwo3fSyhXjeRZeupy8ldekcKOo7leqdAzSVbzmaG-vpD_wq4OovwkYASjVN9uvIPdBqz-9NC3Fk-WVqm/s1600/bt-down.gif\" />";if(access==1){_e=_f=_10="";}else{if(sortBy=="titleasc"){_e=_11;_f=_10="";}else{if(sortBy=="titledesc"){_e=_12;_f=_10="";}else{if(sortBy=="datenewest"){_f=_11;_e=_10="";}else{if(sortBy=="dateoldest"){_f=_12;_e=_10="";}else{if(sortBy=="updatenewest"){_10=_11;_e=_f="";}else{if(sortBy=="updateoldest"){_10=_12;_e=_f="";}}}}}}}var _13="<table id=\"toc-body\">
<tr><th width=\"40\">#</th><th><a href=\"javascript:toggleTitleSort()\">Judul Tulisan</a> "+_e+"</th><th width=\"100\"><a href=\"javascript:toggleDateSort()\">Terbit</a> "+_f+"</th><th width=\"100\"><a href=\"javascript:toggleUpdateSort()\">Update Terakhir</a> "+_10+"</th></tr>
";if(page==1){var _14=0;}else{var _14=(page-1)*display;}var idx=_14+1;var _15=idx;var _16=0;var _17;var _18=new Array();var _19=new Array();var _1a=new Array();var _1b=new Array();var _1c=new Array();var _1d=new Array();if(_c.length!=0&&_c!="All"){for(var i=0;i<postTitle.length;i++){for(var k=0;k<postLabels[i].length;k++){if(searchQuery!=""){if(postLabels[i][k]==_c&&postTitle[i].search(searchRegex)!=-1){_18.push(postTitle[i]);_19.push(postURL[i]);_1a.push(postSummary[i]);_1b.push(labeled[i]);_1c.push(postDate[i]);_1d.push(postUpdate[i]);_16++;}}else{if(postLabels[i][k]==_c){_18.push(postTitle[i]);_19.push(postURL[i]);_1a.push(postSummary[i]);_1b.push(labeled[i]);_1c.push(postDate[i]);_1d.push(postUpdate[i]);_16++;}}}}}else{for(var i=0;i<postTitle.length;i++){if(searchQuery!=""){if(postTitle[i].search(searchRegex)!=-1){_18.push(postTitle[i]);_19.push(postURL[i]);_1a.push(postSummary[i]);_1b.push(labeled[i]);_1c.push(postDate[i]);_1d.push(postUpdate[i]);_16++;}}else{_18.push(postTitle[i]);_19.push(postURL[i]);_1a.push(postSummary[i]);_1b.push(labeled[i]);_1c.push(postDate[i]);_1d.push(postUpdate[i]);_16++;}}}for(var i=_14;i<_14+display;i++){if(typeof _18[i]!="undefined"){_17=="#FFF"?_17="#F6F6F6":_17="#FFF";_13+="
<tr style=\"background-color:"+_17+"\" id=\"toc-id"+idx+"\"><td>"+idx+"</td><td><a href=\""+_19[i]+"\" title=\""+_1a[i]+"\">"+_18[i]+"</a> "+_1b[i]+"</td><td>"+_1c[i]+"</td><td>"+_1d[i]+"</td></tr>
";idx++;}}_13+="</table>
";var _1e=idx-1;var _1f="";var _20=[5,10,25,50,100,"All"];if(!in_array(numDisplay,_20)){var _21=_20.pop();_20.push(numDisplay);_20.sort(function(a,b){return a-b;});_20.push(_21);}_1f+="<form name=\"formDisplay\">
Tampilkan <select name=\"listDisplay\" onchange=\"javascript:selectDisplay()\">";for(var i=0;i<_20.length;i++){if(_20[i]==display||postTitle.length==display){_1f+="<option value=\""+_20[i]+"\" selected=\"selected\">"+_20[i]+"</option>";}else{_1f+="<option value=\""+_20[i]+"\">"+_20[i]+"</option>";}}_1f+="</select></form>
";document.getElementById("ds-id2").innerHTML=_1f;document.getElementById("toc").innerHTML=_13;var _22="<table width=\"100%\">
<tr>";if(_16>0){_22+="<td align=\"left\"><span style=\"padding-left:0px\">Hasil <b>"+_15+"</b> to <b>"+_1e+"</b> of <b>"+_16+"</b></span></td>";}else{_22+="<td align=\"left\"><span style=\"padding-left:0px\">Hasil 0</span></td>";}_22+="<td align=\"right\">";var _23=page-1;var _24=page+1;var _25=Math.ceil(_16/display);var _26=_25-1;if(_25>1){if(page>1){_22+="<a href=\"javascript:selectPage("+_23+")\">&laquo; Sebelumnya</a>";}else{_22+="<span>&laquo; Sebelumnya</span>";}if(_25<7+(adjacents*2)){for(var _27=1;_27<=_25;_27++){if(_27==page){_22+="<span>"+_27+"</span>";}else{_22+="<a href=\"javascript:selectPage("+_27+")\">"+_27+"</a>";}}}else{if(_25>5+(adjacents*2)){if(page<2+(adjacents*2)){for(var _27=1;_27<4+(adjacents*2);_27++){if(_27==page){_22+="<span>"+_27+"</span>";}else{_22+="<a href=\"javascript:selectPage("+_27+")\">"+_27+"</a>";}}_22+="<span>...</span>";_22+="<a href=\"javascript:selectPage("+_26+")\">"+_26+"</a>";_22+="<a href=\"javascript:selectPage("+_25+")\">"+_25+"</a>";}else{if(_25-(adjacents*2)>page&&page>1+(adjacents*2)){_22+="<a href=\"javascript:selectPage(1)\">1</a>";_22+="<a href=\"javascript:selectPage(2)\">2</a>";_22+="<span>...</span>";for(var _27=page-adjacents;_27<=page+adjacents;_27++){if(_27==page){_22+="<span>"+_27+"</span>";}else{_22+="<a href=\"javascript:selectPage("+_27+")\">"+_27+"</a>";}}_22+="<span>...</span>";_22+="<a href=\"javascript:selectPage("+_26+")\">"+_26+"</a>";_22+="<a href=\"javascript:selectPage("+_25+")\">"+_25+"</a>";}else{_22+="<a href=\"javascript:selectPage(1)\">1</a>";_22+="<a href=\"javascript:selectPage(2)\">2</a>";_22+="<span>...</span>";for(var _27=_25-(2+(adjacents*2));_27<=_25;_27++){if(_27==page){_22+="<span>"+_27+"</span>";}else{_22+="<a href=\"javascript:selectPage("+_27+")\">"+_27+"</a>";}}}}}}if(page<_27-1){_22+="<a href=\"javascript:selectPage("+_24+")\">Selanjutnya &raquo;</a>";}else{_22+="<span>Selanjutnya &raquo;</span>";}}_22+="</td></tr>
</table>
";document.getElementById("toc-footer").innerHTML=_22;};function toggleTitleSort(){sortBy=="titleasc"?sortBy="titledesc":sortBy="titleasc";sortPosts(sortBy);access=2;displayToc(postFilter);};function toggleDateSort(){sortBy=="datenewest"?sortBy="dateoldest":sortBy="datenewest";sortPosts(sortBy);access=2;displayToc(postFilter);};function toggleUpdateSort(){sortBy=="updatenewest"?sortBy="updateoldest":sortBy="updatenewest";sortPosts(sortBy);access=2;displayToc(postFilter);};function handleSafari(){if(navigator.appVersion.search(/safari/i)==-1||navigator.appVersion.search(/version/i)==-1){addCss("div#toc-footer a, div#toc-footer span{ display:inline-table; }");}};function addCss(_28){var _29=document.createElement("style");_29.type="text/css";if(_29.styleSheet){_29.styleSheet.cssText=_28;}else{_29.appendChild(document.createTextNode(_28));}document.getElementsByTagName("head")[0].appendChild(_29);};function loading(){document.getElementById("toc-loading").parentNode.removeChild(document.getElementById("toc-loading"));};handleSafari();loading();
</script>
<style type="text/css">
div#toc-header, div#toc-display, div#toc-footer, table#toc-body {
 width:100%;
}

div#toc-header {
 font-size:13px;
 text-align:center;
}

div#toc-display, div#toc-footer, div#toc-display input[type="text"], div#toc-display select {
 font-size:11px;
}

div#toc-display, div#toc-footer {
 margin-top:30px;
}

div#toc-header a, div#toc-footer a, div#toc-header span, div#toc-footer span {
 color:#000;
 margin:2px;
}

div#toc-header a, div#toc-header span {
 padding:3px 5px;
 display:inline-table;
}

div#toc-footer a, div#toc-footer span{
 padding:1px 3px;
}

div#toc-header a , div#toc-footer a {
 background-color:#F0F0F0;
 border:1px solid #E0E0E0; 
 text-decoration:none;
}

div#toc-header span, div#toc-footer span {
 background-color:green;
 border:1px solid #FFF;
 color:white;
}

div#toc-header a:hover, div#toc-footer a:hover {
 background-color:#FBFBFB;
}

table#toc-body {
 border-collapse:collapse;
 border-spacing:0;
 font-size:14px;
}

table#toc-body tr th, table#toc-body tr td {
 padding:3px;
}

table#toc-body tr th {
 border:2px solid #FFF;
 background-color:#F0F0F0;
 text-align:left;
}

table#toc-body tr th a, table#toc-body tr td a {
 border:none;
}

table#toc-body tr th a {
 border:none;
 color:#000;
 font-size:13px;
 text-decoration:none;
}

table#toc-body tr th a:hover, table#toc-body tr td a:hover {
 text-decoration:underline;
}

div#donotremove, div#toc-loading {
 font-size:9px;
 margin-top:20px;
 text-align:center;
}

div#donotremove {
 color:#DDD; 
}

div#toc-loading {
 color:#AAA;
 position:relative;
 top:8px;
}

div#toc-loading img {
 position:relative;
 top:10px;
}

div#donotremove a {
 border: none;
 color:#AAA;
 text-decoration:none;
}
</style>

Demikian jika ada yang berniat menggunakan model daftar isi diatas silakan dilakukan penyesuaian untuk link (pranala) blog/website masing-masing.

Wassalam.