Cara Membuat Daftar Isi Otomatis Di Blog

Cara Membuat Daftar Isi Otomatis Di Blog - Pada kali ini kita akan membuat daftar isi blog otomatis atau daftar isi (sitemap) sederhana berdasarkan label di blog. Berbicara mengenai daftar isi, pasti kita sering melihatnya di halaman depan setiap buku. Daftar isi blog dapat mempermudah pembaca untuk mencari subjudul yg ingin dibaca. Sama seperti daftar isi buku, daftar isi blog juga berguna untuk memudahkan pembaca mencari artikel yg relevan dengan mudah. Daftar isi blog otomatis ini tidak perlu di update secara manual, karena setiap artikel terbaru akan langsung tertera secara otomatis sesuai dengan label pada daftar isi tersebut.

Demo

CSS Daftar Isi Blog Otomatis

• Login ke blogger.
• Pada dashboard, klik template, kemudian edit html.
• pastekan kode berikut diatas kode.

#daftar-isi{width:100%}#daftar-isi h2{font-size:14px;font-weight:400;text-transform:uppercase;padding:10px;background:#ff5848;border:1px solid #ff5848;border-bottom:none;border-top-left-radius:4px;border-top-right-radius:4px;color:#fff}#daftar-isi h2 a{color:#fff}#daftar-isi ol{font-size:14px;-webkit-padding-start: 0;border:1px solid #ddd;border-bottom-left-radius:4px;border-bottom-right-radius:4px;margin-top:-5px;list-style:none}#daftar-isi h3{font-size:14px;font-weight:400;border:0;display:inline}#daftar-isi li {padding: 5px;border-bottom: 1px dashed #ccc;}

• Klik Simpan

Script Daftar Isi Blog Otomatis

• Login ke akun blogger sobat.
• Pada menu dashboard pilih dan klik Laman.
• Kemudian klik Laman baru, lalu Laman kosong.
• klik HTML.
• Pastekan kode berikut

<div id="daftar-isi"><script>var postTitle=new Array();var postUrl=new Array();var typepedia=new Array();var postDate=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;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 n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);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;postDate[ii]=m;postUrl[ii]=j;typepedia[ii]=o;if(h<10){postBaru[ii]=true}else{postBaru[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><a href="http://typepedia.blogspot.com" style="font-size: 8px; text-decoration:none; color: #616469;">Widget by type pedia</a>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[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=typepedia[e];typepedia[e]=typepedia[g];typepedia[g]=f;var f=postBaru[e];postBaru[e]=postBaru[g];postBaru[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,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=postDate[f];postDate[f]=postDate[h];postDate[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=typepedia[f];typepedia[f]=typepedia[h];typepedia[h]=g;var g=postBaru[f];postBaru[f]=postBaru[h];postBaru[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="Judul Artikel";var m="Klik untuk sortir berdasarkan judul";var d="Tanggal";var k="Klik untuk Sortir bedasarkan tanggal";var c="Kategori";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Klik untuk menampilkan semua"}h+="<table>";h+=" <tr>";h+='<td class="toc-header-col1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="toc-header-col2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+'</a>';h+="</td>";h+='<td class="toc-header-col3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="toc-header-col4">';h+="typepedia.blogspot.com";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+=' <tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+typepedia[g]+'">typepedia.blogspot.com</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+=' <tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+typepedia[g]+'">typepedia.blogspot.com</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Menampilkan Semua '+postTitle.length+" Artikel<br/></span>"}else{var f='<span class="toc-note">Menampilkan '+l+" artikel dengan kategori '";f+=postFilter+"' dari "+postTitle.length+" Total Artikel<br/></span>"}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('<h2><a href="/search/label/'+temp1+'">'+temp1+'</a></h2><ol>');firsti=a;do{document.write(" <li>");document.write('<h3><a href="'+postUrl[a]+'">'+postTitle[a]+'</a></h3>');if(postBaru[a]==true){document.write(' - <strong><em><span style="color: rgb(255, 0, 0);">New !!</span> </em></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Menampilkan Daftar Isi</a> <img src=""/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link    : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('typepedia.blogspot.com: <a href="'+typepedia[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}}; </script>   <script src="http://typepedia.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">  </script></div>

• Klik publikasikan

Pengaturan

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

Sebelum anda mempublish halaman daftar isi blog, ubah tulisan warna merah dengan url blog anda. Untuk tulisan warna biru adalah jumlah maksimal dari postingan yg akan muncul. Demikianlah tutorial saya mengenai cara membuat daftar isi blog otomatis atau cara membuat daftar isi (sitemap) sederhana menurut label di blog. Semoga artikel ini dapat bermanfaat bagi kita semua.

• Cara Membuat Subscribe Box Di Blog