Cara Membuat Widget Daftar Isi / Site Map

Source Code Widget Daftar Isi Dinamis Blogger 3 Kolom (Judul, Tanggal, dan Label)

Artikel singkat kali ini akan membagikan source code daftar isi Site Map yang digunakan di blog ini.
Nah langsung saja menuju langkah-langkahnya:

1. Buat laman baru atau buka laman sitemap yang sudah ada sebelumnya.
2. Masuk mode HTML
3. Copy paste code berikut ini didalamnya

   <style type="text/css">
     #sitemap .title {font-size:150%; background-color:transparent; font-weight:600; text-align:center; margin-bottom:20px; padding:20px}
     #sitemap table {background-color:transparent; margin:0px; padding:0px; border:0px; border-collapse:collapse; border-spacing:0px; width:100%;}
     #sitemap table a, #sitemap table a:hover {text-decoration:none;}
     span.loading{text-align:center;display:block}
     th a {color: rgba(255, 255, 255, .84);}
     div.title{padding:10px;margin:10px 0;display:block;text-align:center;border-radius:5px;}
     @media screen and (max-width:480px){
       #sitemap table tbody tr td, #sitemap table thead tr th {width:100% !important; white-space:nowrap}
     }
   </style>
   <div id="sitemap"><span class="loading">Loading....</span></div>
   <script> //<![CDATA[/* TaufiqHdyt.com SiteMaps */var postTitle = postUrl = postDate = postSum = postLabels = new Array(), sortBy = 'datenewest', tocLoaded = false, numChars = 50, postFilter = '', tocdiv = document.getElementById('sitemap'), totalEntires = 0, totalPosts = 0;  function sitemap(t){function e(){if("entry"in t.feed){var e=t.feed.entry.length;if(totalEntires+=e,totalPosts=t.feed.openSearch$totalResults.$t,totalPosts>totalEntires){var s=document.createElement("script");s.type="text/javascript",startindex=totalEntires+1,s.setAttribute("src","/feeds/posts/summary?start-index="+startindex+"&max-results=9999&alt=json-in-script&callback=sitemap"),tocdiv.appendChild(s)}for(var o=0;e>o;o++){for(var a,l=t.feed.entry[o],r=l.title.$t,i=l.published.$t.substring(0,10),n=0;n<l.link.length;n++)if("alternate"==l.link[n].rel){a=l.link[n].href;break}if("content"in l)var p=l.content.$t;else if("summary"in l)var p=l.summary.$t;else var p="";var c=/<\S[^>]*>/g;if(p=p.replace(c,""),p.length>numChars){p=p.substring(0,numChars);var d=p.lastIndexOf(" ");p=p.substring(0,d)+"..."}var f="";if("category"in l){for(var n=0;n<l.category.length;n++)f+="<a href=\"javascript:filterPosts('"+l.category[n].term+"');\" title=\"Klik disini untuk menampilkan semua artikel dengan label '"+l.category[n].term+"'\">"+l.category[n].term+"</a>,  ";var u=f.lastIndexOf(",");-1!=u&&(f=f.substring(0,u))}postTitle.push(r),postDate.push(i),postUrl.push(a),postSum.push(p),postLabels.push(f)}}totalEntires==totalPosts&&(tocLoaded=!0,showToc())}e(),sortPosts(sortBy),tocLoaded=!0}function filterPosts(t){postFilter=t,displayToc(postFilter)}function allPosts(){postFilter="",displayToc(postFilter)}function sortPosts(t){function e(t,e){var s=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=s;var s=postDate[t];postDate[t]=postDate[e],postDate[e]=s;var s=postUrl[t];postUrl[t]=postUrl[e],postUrl[e]=s;var s=postSum[t];postSum[t]=postSum[e],postSum[e]=s;var s=postLabels[t];postLabels[t]=postLabels[e],postLabels[e]=s}for(var s=0;s<postTitle.length-1;s++)for(var o=s+1;o<postTitle.length;o++)"titleasc"==t&&postTitle[s]>postTitle[o]&&e(s,o),"titledesc"==t&&postTitle[s]<postTitle[o]&&e(s,o),"dateoldest"==t&&postDate[s]>postDate[o]&&e(s,o),"datenewest"==t&&postDate[s]<postDate[o]&&e(s,o)}function displayToc(t){var e=0,s="",o="Title",a="Sort byt title",l="Date",r="Sort by date",i="Label",n="";"titleasc"==sortBy&&(a+=" (descending)",r+=" (newest first)"),"titledesc"==sortBy&&(a+=" (ascending)",r+=" (newest first)"),"dateoldest"==sortBy&&(a+=" (ascending)",r+=" (newest first)"),"datenewest"==sortBy&&(a+=" (ascending)",r+=" (oldest first)"),""!=postFilter&&(n="Click to see all articles"),s+='<div style=overflow-x:auto><table>',s+="<thead>",s+="<tr>",s+="<th>",s+='<a href="javascript:toggleTitleSort();" title="'+a+'">'+o+"</a>",s+="</th>",s+="<th>",s+='<a href="javascript:toggleDateSort();" title="'+r+'">'+l+"</a>",s+="</th>",s+="<th>",s+='<a href="javascript:allPosts();" title="'+n+'">'+i+"</a>",s+="</th>",s+="</tr>",s+="</thead>",s+="<tbody>";for(var p=0;p<postTitle.length;p++)""==t?(s+='<tr><td><a href="'+postUrl[p]+'" title="'+postSum[p]+'">'+postTitle[p]+"</a></td><td>"+postDate[p]+"</td><td>"+postLabels[p]+"</td></tr>",e++):(z=postLabels[p].lastIndexOf(t),-1!=z&&(s+='<tr><td><a href="'+postUrl[p]+'" title="'+postSum[p]+'">'+postTitle[p]+"</a></td><td>"+postDate[p]+"</td><td>"+postLabels[p]+"</td></tr>",e++));if(s+="</tbody>",s+="</table></div>",e==postTitle.length)var c='<div class="title">Total Article: '+postTitle.length+"</div>";else{var c='<div class="title">Displaying '+e+" articles labelled by '";c+=postFilter+"' from "+postTitle.length+" total articles.</div>"}tocdiv.innerHTML=c+s}function toggleTitleSort(){sortBy="titleasc"==sortBy?"titledesc":"titleasc",sortPosts(sortBy),displayToc(postFilter)} function toggleDateSort(){sortBy="datenewest"==sortBy?"dateoldest":"datenewest",sortPosts(sortBy),displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);document.getElementById("toclink")}else alert("Just wait. Sitemap is loading....")} function hideToc(){var t=document.getElementById("toc");t.innerHTML="";var e=document.getElementById("toclink");e.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">» Show Sitemap</a>'}var postTitle=new Array,postUrl=new Array,postDate=new Array,postSum=new Array,postLabels=new Array,sortBy="datenewest",tocLoaded=!1,numChars=250,postFilter="",tocdiv=document.getElementById("sitemap"),totalEntires=0,totalPosts=0; //]]> </script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=sitemap"></script>

4. Publikasikan atau Update laman tersebut

Script di atas hanya dasarnya saja, belum ada tambahan CSS khusus untuk mempercantik tampilannya, jadi disarankan untuk mengkustomisasi CSS di atas sesuai dengan selera masing-masing.

Demo tampilan dasar di atas via Codepen

Demo hasil tampilan yang sudah dimodifikasi

Demikian artikel singkat ini, semoga bermanfaat.