April 12, 2014

Cara Membuat Daftar Isi Blog (Sitemap) Berdasarkan Label/Kategori

April 12, 2014

Cara Membuat Daftar Isi Blog (Sitemap, Table of Content) Simple Fast Loading Berdasarkan Label/Kategori.

daftar-isi-sitemap-blogspot

MEMBUAT daftar isi blog (peta situs, sitemap, table of content) berdasarkan label atau kategori posting sangat baik untuk mesin pencari juga user.

Menu daftar isi blog akan memudahkan pembaca mengakses bagian-bagian atau konten blog secara cepat dan mencari tulisana, artikel, atau posting yang mereka butuhkan.

Demo: Contoh Daftar Isi Blog

Menu navigasi daftar isi ini juga dianjurkan Google guna memudahkan user menjelajahi blog kita. Google memang "selalu berpihak" pada user. Apa yang disukai user, disukai pula oleh Google. Hidup user!!!! :)

Fungsi Daftar Isi Blog

Menurut Social Media Tutorial, daftar isi juga bagus untuk optimisasi mesin pencari (Good for SEO) karena menyajikan kata kunci yang benar yang sudah digunakan (provided correct keywords have been used).

Fungsi lainnya, terjemahin sendiri ya :)
  • Delivers a good overview of the information that awaits the reader
  • Avoids duplicate posts in diverse labels and remove the bewilderment of search engine bots.
  • Supports for creating internal links of blog posts, which boost up page rank
  • It can be used as “Related posts” link, on any blog-post.
  • Last, but not the least, to show a certain requirement of the blog posts to explore under Specific label.

Cara Membuat Daftar Isi Blog Simple Berdasarkan Label

  1. Klik menu "Page" (Halaman) di Dashboard Blog
  2. Klik New Page  (Halaman Baru) 
  3. Isi nama halaman dengan Sitemap, Peta Situs, atau Daftar Isi
  4. Klik tombol mode HTML
  5. Copy dan Paste kode daftar isi di bawah ini. 
  6. Klik Publish! 
Membuat Daftar Isi Blog

Kode Daftar Isi Blog 

Ini kode daftar isi yang CB gunakan untuk sitemap blog ini seperti bisa diilihat contohnya di halaman Sitemap.

Jangan lupa, paste di mode HTML. Klik dulu mode HTML, lalu copas kode, dan langsung publish! Jangan klik mode Compose ya!

paste di mode HTML

Ini kodenya:

<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
.sitemap-link {display:none}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script type="text/javascript">//<![CDATA[ var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(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;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link"><a href="http://contohblognih.blogspot.com/2014/04/cara-membuat-daftar-isi-blog-sitemap.html" style="font-size: 10px; text-decoration:none; color: #5146CD;" target="_blank">Cara Membuat Daftar Isi Blog</a></div>')}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=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[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=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[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="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";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="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<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("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></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\');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAluPMYg5uUmqlrOoEfJI2LMEA5w-df1314YzizGqqGENJS7Reqm3j8RUu-pqe3FxlvynWGsOk366wgTEV4I2fbpUZ-ov2ndTl0r9IipZ7KjqYCCTjwAUdkpF2juQO8v23vJxQooZpE-_Q/s1600/new_icon.gif"/>'}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('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}}; //]]>
</script>
<script src="https://contohblognih.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

NOTE!
Ganti alamat blognya (warna merah) dengan alamat blog Anda.

Kode Alternatif:

<style>
p.labels a {color: #fff;text-transform: uppercase;font-size: 15px;font-weight: 600;border-bottom: 1px solid #ddd;display: block;padding: 8px;background: #555;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
.sitemap-link{display:none}
</style>
<script type="text/javascript">
//<![CDATA[ var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(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;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link"><a href="http://contohblognih.blogspot.com/2014/04/cara-membuat-daftar-isi-blog-sitemap.html" style="font-size: 10px; text-decoration:none; color: #5146CD;" target="_blank">Cara Membuat Daftar Isi Blog</a></div>')}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=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[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=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[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="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";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="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<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("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></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\');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAluPMYg5uUmqlrOoEfJI2LMEA5w-df1314YzizGqqGENJS7Reqm3j8RUu-pqe3FxlvynWGsOk366wgTEV4I2fbpUZ-ov2ndTl0r9IipZ7KjqYCCTjwAUdkpF2juQO8v23vJxQooZpE-_Q/s1600/new_icon.gif"/>'}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('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}}; //]]>
</script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

Itu dia Cara Membuat Daftar Isi Blog (Sitemap) Berdasarkan Label/Kategori.

Cara Membuat Daftar Isi Blog lainnya

Cara Membuat Daftar Isi Blog lainnya adalah berikut ini.Tampilannya seperti ini:

Daftar Isi Blog

Cara memasangnya:

1. Klik Halaman (Page) > klik Halaman Baru (New Page)
2. Isi judul dengan Daftar Isi atau Sitemap
3. Klik mode HTML
4. Copas kode berikut ini:

<style>
#show-cat{float:left;margin-right:20px;width:30%;height:auto;overflow-x:hidden;overflow-y:auto;line-height:15px}
#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:15px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}
#show-post{float:left;width:65%}
#show-post ul li{list-style-type:none;padding-bottom:15px}
#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='https://contohblognih.blogspot.co.id/';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+=' &ndash; '+(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>

5. Ganti alamat blog https://contohblognih.blogspot.co.id/ dengan kepunyaan Anda.
5. Langsun Publikasikan! Jangan klik Compose! Awas! Langsung aja Publish!

Kini daftar isi blog Anda sudah muncul.



TAMPILAN DAFTAR ISI BLOG TABULASI

sitemap daftar isi tabulasi

Kode Daftar Isi Berdasarkan Tanggal Publikasi

Berikut ini kode daftar isi blog berdasarkan tanggal publikasi posting. Lihat Demo Daftar Isi plus Tanggal.

<style>
#w-sitemap-wrapper {font-size:13px}
#w-sitemap-wrapper li {position:relative;padding:.385em 0 .385em 6.923em;border-top:none;border-bottom:1px solid #f6f6f6}
#w-sitemap-wrapper span {position:absolute;left:0;color:#bd8b56}
#w-sitemap-wrapper a {font-weight:bold}
#w-sitemap-loading-msg {height:100px;line-height:100px;text-align:center;font-weight:bold;letter-spacing:1px;font-size:18px;color:#bbbbbb}
</style>
<script>
(function(c,m){var h=window;var l=document;var e="w-sitemap-wrapper";var g="w-sitemap-loading-msg";var b=h.location;var n=b.protocol;var f=b.hostname;var k=0;l.write("<div id='"+e+"'><ol></ol><div id='"+g+"'>"+m+"</div></div>");var a=l.getElementById(e);var d=l.getElementById(g);var j=l.getElementById(e).getElementsByTagName("ol")[0];function i(o){var p=l.createElement("script");p.src=n+"//"+f+"/feeds/posts/summary?alt=json-in-script&callback=wijs_get_sitemap&start-index="+o+"&max-results=150";a.appendChild(p)}h.wijs_get_sitemap=function(E){var A=E.feed.entry;var u=parseInt(E.feed.openSearch$totalResults.$t);var x=A.length;var w="";for(var s=0;s<x;s++){var o=A[s];var C=o.title.$t;var p;var D=o.link;var y=D.length;for(var r=0;r<y;r++){if(D[r].rel==="alternate"){p=D[r].href;break}}var z=o.published.$t;var q=z.substring(0,4);var t=z.substring(5,7);var v=z.substring(8,10);var B=c.replace("dd",v).replace("mm",t).replace("yyyy",q);w+="<li><span>"+B+"</span><a href='"+p+"'>"+C+"</a></li>"}j.innerHTML+=w;k+=x;if(k<u){i(k+1)}else{d.parentNode.removeChild(d)}};i(1)})("dd/mm/yyyy","Loading......");</script>

Selain sitemap daftar isi berdasarkan label (kategori) dan berdasarkan tanggal, masih banyak kode daftar isi di luar sana yang di-share oleh para blogger yang baik hati dan tidak sombong :)

Ada juga format daftar isi blog yang "interaktif" dan (mungkin) lebih menarik, seperti yang di-share oleh My Blogger Lab dan HiFiFan. Moggo... dipilih....!

Demikian Cara Membuat Daftar Isi Blog (Sitemap) Berdasarkan Label/Kategori plus-plus.

Good Luck & Happy Blogging! (www.contohblog.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

144 comments on Cara Membuat Daftar Isi Blog (Sitemap) Berdasarkan Label/Kategori

  1. terima kasih infonya, saya dah pasang nih sitemap

    ReplyDelete
    Replies
    1. siiip..... goog luck........

      Delete
  2. tapi kok saya coba ga bs ya.. itu kode no 1 sama no 2 di gabung atau gimana sih bos...

    ReplyDelete
    Replies
    1. pilih satu kode aja.....ubah dulu alamat url nya....

      Delete
  3. saya sudah ubah alamat url nya tapi tetap tidak bisa. pls advised. thx

    ReplyDelete
    Replies
    1. Klik "New Page" > klik tombol Mode "HTML" (JANGAN "Compose"), paste kodenya, dan PUBLISH! Good luck......!

      Delete
    2. saya sudah praktikkan koo gak muncul d blognya, padahal udah ganti URL dan versi HTML

      Delete
  4. Saya sudah praktekkan gan. thank's

    ReplyDelete
  5. kok gak muncul ya mbak, masalahnya apa, saya udah pastekan di html, masih gak bisa. mohon pencerahanya

    ReplyDelete
    Replies
    1. paste di Mode HTML.... CB cek malah "The requested URL / was not found on this server. That’s all we know" tuh blognya :)

      Delete
  6. Sukses gan, makasih ya atas tutorialnya :)

    ReplyDelete
  7. Gan, gmn cara membuat link seperti di blog ini? makasih banyak bantuannya.

    ReplyDelete
  8. Cara Membuat Daftar isi Blog Keren dan Cantik memang menjadi keinginan para blogger ya sob, hal itu sebagai salah satu penarik pengunjung. oya terima kasih atas artikel yang bermanfaat ini, Salam hangat

    ReplyDelete
  9. Excellent Post thanks a lot man You can Also Visit my Blog and See the Sitemap http://www.gobloggertricks.com/p/sitemap.html

    ReplyDelete
  10. terima kasih banyak sangat keren yang kode kedua bang langsung saya pasang di blog hehe
    jangan lupa kunbalnya ya arifinbp.blogspot.com

    ReplyDelete
  11. simple, jadi gk berat-beratin blog :D
    makasih (y)

    ReplyDelete
  12. Keren mas tips triknya..dlu juga saya pake kode html sitemap ini tp blognya lupa password jd gbsa dibuka hehe...
    nice info :) thanks

    ReplyDelete
  13. makasih infonya mas, tapi saya punya masalah, dengan halaman pagenya bukan /p/dafta-isi.html tapi /p/blog-page_47.html cara ubahnya bagaimana mas? ditunggu balasannya
    http://areakostnetwork.blogspot.com/p/blog-page_47.html

    ReplyDelete
    Replies
    1. Bikin baru aja, hapus yang itu, begitu klik New Page, langsung isi judul halamannya dgn "Daftar Isi" atau "Sitemap"

      Delete
    2. Yap.. Bener mas. Buat judulnya terlebih dahulu, jangan langsung nulis dikolom tulisan. Ini permasalahan diwaktu saya masih newbie dulu sih. *sekarang masih newbie.

      Delete
  14. saya mau tanya mas, kenapa laman saya kok tidak mau muncul ya ? padahal sudah saya isi seperti cara yang ada di atas,
    mohon bantuannya

    www.cakarlele.com

    ReplyDelete
    Replies
    1. URL-nya ganti dengan url cakarlele....

      Delete
    2. Hahahaa sejak kapan lele punya cakar, yang ada mah kumis :(

      Delete
  15. thank gan infonya,

    kunjungi juga blog ane :D berbagi ilmu

    ReplyDelete
  16. mantab gan. langsung diterapkan

    ReplyDelete
  17. yang alternatif, mantaaaappp gann... cek dah di blog ane...
    makasih gan :D

    ReplyDelete
  18. Terima Kasih atas tutorialnya CB Blogger,
    Sitemap sudah berhasil saya pasang di blog saya

    ReplyDelete
  19. akhirnya ini yang saya cari-cari ketemu juga :D , makasih sudah mengasih tahu tutorialnya

    ReplyDelete
  20. Mantep gan artikelnya ... Makasih share ilmunya

    ReplyDelete
  21. makasih banget mas, keren abis yang cara 1, saya ijin modifikasi yah mas, karena mau cocokin sama tampilan blog saya.... :)
    maklum newbie, jadi masih fokus tampilan dlu... hehehe

    ReplyDelete
    Replies
    1. Jangan terlalu banyak menghabiskan waktu hanya untuk menyetel tampilan blog mas. Waktu yang berharga terbuang sia-sia.

      Solusinya... Sering-sering baca dan pahami dulu tutorial tentang bagaimana tampilan blog yang baik dan benar. Sekiranya sudah paham, baru deh dicoba dan diterapkan pada tampilan blog. Otomatis dengan pengetahuan yang kita pahami tadi, waktu untuk menyetel tampilan lebih cepat. (Memasang dan Menyetel Ulang Tampilan Template Blog Sangat Menguras Waktu).

      Pesan khusus... Cari template blogger yang memang udah nyatu dihati, sehingga dikemudian hari tidak mengganti-ganti template lagi. Bahaya loh ganti template terus-terusan. Dampaknya ke trafik pengunjung.
      Nah, jika template yang diganti tersebut memang lebih SEO, silahkan diganti saja. Awalnya trafik down (jatuh), itu wajar. Dikemudian hari, pengunjung blog semakin meningkat.

      Nah... Yang paling utama sih konten yang berkualitas. Jadi usahakan waktu yang berharga tersebut untuk membuat konten (artikel).

      Thanks! CB: Jika ada kesalahan kalimat, tolong diperbaiki :D

      Delete
  22. min cara buat url kyk gmn http://contohblognih.blogspot.com/p/disclaimer.html gmn yak? maaf newbie :)

    ReplyDelete
    Replies
    1. sama seperti buat daftar isi, di laman page baru, lalu buat judul disclaimer atau ketentuan layanan, isinya menjelaskan ketentuan blog agan. jgn lupa kunjungannya http://areakostnetwork.blogspot.com

      Delete
  23. Sukses besar!
    Jadi semakin tertata deh blog ane....

    ReplyDelete
  24. Mas Kalo berdasarkan 1 label aja gimana mas ?

    ReplyDelete
    Replies
    1. Ubah... /feeds/posts/default?max.... menjadi ..../feeds/posts/-/Label?max....

      Delete
  25. Wah ilmu yang sangat bermanfaat bagi Newbe Pemula seperti Saya ini gan. ijin Copas Gan.. :)

    ReplyDelete
    Replies
    1. Jangan copas, nanti dibanned sama google... :)

      Delete
  26. sukses terus contohblognih saya banyak belajar dari sini untuk membuat blog saya menarik, mohon review blog saya ya sob, bagaimana komentarnya, karena saya butuh masukan, saya masih pemula :)

    ReplyDelete
  27. gan '' menu page '' nya itu lokasinya dmana ??

    ReplyDelete
    Replies
    1. biasanya di "nav" atau "navigasi", deretan "Home", "About", dll. Cari *Ctrl+F) di "Template" > "Edit HTML"

      Delete
  28. keren benar tampilannya. mksh atas tutornya !

    ReplyDelete
  29. cara nentuin daftarnya misal blogging apa aja gmn ya gan?

    ReplyDelete
  30. Udah saya coba, cara ngeliatnya gimana ya? kok ga keliatan isi sitemap nya?

    ReplyDelete
    Replies
    1. Anda pake wordpress, cara membuat daftar isi (sitemap) ini buat blogspot....

      Delete
  31. Kalo tips buat wordpress ada ga ya?

    ReplyDelete
    Replies
    1. Ada, silakan cek:
      http://en.support.wordpress.com/archives-shortcode/#customization

      Delete
  32. Makasih banget Tutor nya >_< Keren bgt dan pas buat blog aku
    Lope-Lope deh :*

    ReplyDelete
  33. terima kasih sekali, sangat membantu

    ReplyDelete
  34. Bagus. Bisa dicoba.

    Terima kasih gan

    ReplyDelete
  35. admin cb blogger, cara buat kotak komentar yg warna warni itu gimana cara buatnya?
    terus bisa juga utk dijadikan top artikel yg warna-warni spt itu jga?

    ReplyDelete
  36. itu scriptnya dipasang dimana mas?

    ReplyDelete
  37. gan,kalo mau buat daftar isi menurut abjad bagaimana utk style yg 1?

    ReplyDelete
    Replies
    1. http://contohblognih.blogspot.com/2015/01/Daftar-Isi-Sitemap-Blog-Tabulasi.html

      Delete
  38. gan, kok gue coba, malah, letaknya bukan di arsip, tp malah di postingan! gmn dong? apa gue ada yg salah ya?

    ReplyDelete
    Replies
    1. Jika agan bikin sebagai postingan seperti artikel blog iyalah keluarnya di postingan, coba agan klik di laman, kemudian klik laman baru, masukan judulnya, dan klik edit HTML disampingnya, ini contoh daftar isi saya
      http://areakostnetwork.blogspot.com/p/daftar-isi.html

      Delete
    2. mas umraici ,tolong minta kodenya. soalnya kode diatas tak coba gak ada yang bisa.cuma muncul judul daftar isi aja, isinya gak ada.terimakasih
      jika berkenan tolong kirim ke punakawanarif@gmail.com

      Delete
  39. gan mau nanya....
    kalau buat sitemap nya untuk 1 label aja bisa ga gan ?

    ReplyDelete
  40. Wow keren, kalau mau cuma satu label bagaimana yah? untk satu label dan bisa terlihat semua postingan dalam satu label itu? maaf masih baru, mohon bantuannya...

    ReplyDelete
  41. yang ane udah tampil gan (label sama postingan), cuman nomornya yang ga tampil, itu gimana ya gan?

    ReplyDelete
    Replies
    1. kode "ol" di dalam templatenya bermasalah alias belum disetting

      Delete
  42. malam gan..
    gan,mau tnya ne : cara buat katalog seperti di atas gimana ya
    contoh nya : Home, tips seo, templates, desain, posting tips,adsense dsb yang seperti diatas gimana ya.
    maklum masih newbie :)

    ReplyDelete
    Replies
    1. http://contohblognih.blogspot.com/2014/12/Membuat-Menampilkan-Halaman-Statis-Blog-Navigasi-Menu.html

      Delete
  43. Untuk Kode HTML site map di antara ke3 tsb kira" yg terbaik untuk/menurut "GOOGLE" yg mana ya mas Bro ??
    Trims

    ReplyDelete
    Replies
    1. yang pertama, yg lebih simple...........

      Delete
    2. Sippp dah Mas Bro.. Thanks infonya

      Delete
  44. itu biar sesuai abjad gmna ya ?

    ReplyDelete
    Replies
    1. Intuk daftar isi alfabetis, coba kode yang ada di sini:
      http://mybloggercontrol.blogspot.com/2012/11/list-posts-in-alphabetical-order.html

      Delete
    2. http://contohblognih.blogspot.com/2015/07/daftar-isi-blog-berdasarkan-abjad.html

      Delete
  45. Terima kasih..blog CB banyak bantu saya dari segi template dan seo ya..
    Lupa..saya dari malaysia tapi banyak belajar dari blog CB..
    Terima kasih ya...

    ReplyDelete
  46. wah hasilnya bagus banget, saya pakai yang no.2 makasih banyak...

    ReplyDelete
  47. hasilnya lebih rapih master thank you Owner CB :)

    ReplyDelete
  48. gan, maaf .. kok ga bisa .. ?

    ReplyDelete
  49. nanya lagi min, kalo cuman nampilin daftar satu label aja bisa ga?

    soalnya label punya ane banyak dan isinya banyak pula.
    ane sendiri pegel scroll bawah mulu.
    bisa aja pake yang tabulasi tapi loadingnya sedikit lebih lama dari pada yang simple ini.

    terima kasih sebelumnya :)

    ReplyDelete
  50. terimah kasih ya atas artikelnya

    ReplyDelete
  51. Keren Bos, thanks tutorialnya

    ReplyDelete
  52. Mantep gan, makasih nih tutornya lengkap banget

    Langsung Paraktek dah

    ReplyDelete
  53. saya comot yang pertama aja gan

    ReplyDelete
  54. Terimakasih mas....ijin nyobi

    ReplyDelete
  55. Makasih infonya gan...ijin praktek

    ReplyDelete
  56. Maksih infonya gan...ane coba dulu neh...

    ReplyDelete
  57. Makasih Mas tutorial cara buat sitemapnya

    ReplyDelete
  58. Lebih bagus ni, makasih min sudah ane pasang di blog ane. Mantep tampilannya.

    ReplyDelete
  59. Terima kasih admin contohblog.com, template sitemap ini kami gunakan di blog kami pajakita.net

    ReplyDelete
  60. kalau kita membuat sitemap, dan kita pasang di homepage apa tidak berpengaruh dengan duplikat link pada postingan gan?

    ReplyDelete
  61. Mantap banget bos ...
    Sangat membantu saya artikel ini, khususnya untuk pembuatan daftar isi di blog

    ReplyDelete
  62. hasilnya bagus alhamdulillah,

    ReplyDelete
  63. Ada di tips lainnya, silakan ketik sitemap di kotak pencarian

    ReplyDelete
  64. Makasih gan infonya menarik banget nih. Salam kenal dari newbie

    ReplyDelete
  65. Gan Semua JS yang Sumbernya Dari google code atau host google kok di ane gak tampil ya, ada backup Script JS nya gak ya, Soalnya kalo sumber Js nya dari tempat lain bisa muncul

    ReplyDelete
    Replies
    1. google code sudah OFF, jangan pake kode yang ngelink ke Google Code
      http://www.contohblog.com/2016/08/pengaruh-google-code-dihentikan-pada-blogger.html

      Delete
  66. Sitemap saya yg dulu dari CB sudah tidak berjalan dan kembali kesini cari yg baru dan ada ,terima kasih salam bos

    ReplyDelete
  67. mantap banyak pilihan. dari beberapa ssitemap gak berhasil akhirnya disini ada yg berhasil hehe
    venomku dot com

    ReplyDelete
  68. mas saya sudah coba praktek semua cara membuat sitemap di blog saya yg beralamatkan xxxx.blogspot.co.id baik yang js nya dari google code atau yang lainnya, saya sudah praktekan dengan membuat page baru dan pilih html code dan pastekan kodenya.tapi sitemap saya tetap tidak muncul, page/halamannya kosong blong. kenapa ya mas

    ReplyDelete
    Replies
    1. Google Code sudah ditutup Google

      Delete
    2. Coba gunakan file js ini editan ane sendiri. Demonya ada di blog ane areakost.net

      https://rawgit.com/umraici/sitemap/master/sitemap.js

      Delete
    3. yg nomor 1 masih work sob. ane baru pasang

      Delete
  69. kode no 1 masih work tapi kode no 2 ngga work om. mkasih om. ane pake yg no 1 ajj :)

    ReplyDelete
  70. terimakasih mas buat tutorial yang ini, saya udah bisa buat daftar isinya.
    mohon maaf mw tanya, di bawah setelah daftar isi masih ada link "Cara Membuat daftar Isi", Itu Wajib ada ato boleh menghapusnya.
    klo boleh ngapus gmna caranya...
    Terimakasih

    ReplyDelete
    Replies
    1. Tambahkan kode berikut ini di bagian bawah:

      <style>
      .sitemap-link{display:none}
      </style>

      Delete
    2. makasih banayak gan...

      Delete
  71. Oh ternyata boleh dihapus ya mas, thanks infonya.

    ReplyDelete
  72. makasih gan tutorialnya, blog saya sudah mempunyai daftar isi

    ReplyDelete
  73. gan mau nanya tutorial di atas udah saya praktekin tapi kok gk muncul secara otomatis ya gan ?

    ReplyDelete
  74. maksih gan,langsung saya pakai..dan jreeeeng sudah muncul..

    ReplyDelete
  75. gan, cara supaya artikel bisa berdiri sendiri di template yang sudah ada menubar(bawaan dari sono) gimana ya ?,

    ReplyDelete
  76. Mantab agan boss CB..work di blog saya makasih tips nya keren..

    ReplyDelete
  77. mohon bantuannya.. saya udh pilih alternatif yang no 1, tapi hasilnya error, setelah kode "http" saya gnti menjadi "https" ada perubahan, tapi "blank" tidak ada daftar isi yang muncul. knpa ya?

    ReplyDelete
  78. mas untuk daftar isi berdasarkan tanggal postingan, tolong scriptnya di upload di yourjavascript [dot] com, soalnya kalo selain di script yg di upload di yourjavascript hasilnya jadinya 'blank' mas gak muncul apa2. makasih sebelumnya

    ReplyDelete
  79. trims gan izin parkatekkan di blog ana, sangat bermanfaat sekali

    ReplyDelete
  80. kok saya gak bisa?
    udah di mode html padahal

    ReplyDelete
  81. Kok dibagian bawah pasti keluar link orang ,biar hilang bagaimana ?

    ReplyDelete
  82. Help gan punya ane, kagak bisa muncul sitemapnya. Kodenya udh ane copas di mode html. pas mau publish muncul tulisan ini

    "Terjadi kesalahan saat mencoba menyimpan atau memublikasikan postingan Anda. Coba lagi. Tutup
    Laman ini berisi sumber daya HTTP yang dapat menyebabkan konten campuran memengaruhi keamanan dan pengahalaman pengguna jika blog
    dilihat melalui HTTPS.

    Perbaiki Tutup Info lengkap

    "

    Fast respon gan.

    ReplyDelete
  83. "Terjadi kesalahan saat mencoba menyimpan atau memublikasikan postingan Anda. Coba lagi. Tutup
    Laman ini berisi sumber daya HTTP yang dapat menyebabkan konten campuran memengaruhi keamanan dan pengahalaman pengguna jika blog
    dilihat melalui HTTPS.

    Perbaiki Tutup Info lengkap

    ReplyDelete
  84. ijin sruput gan..top.work di template blog saya

    ReplyDelete
  85. gan apa sitemap di blog berbeda dengan sitemap di webmaster..?

    ReplyDelete
    Replies
    1. Beda kode. Tips di atas untuk membuat sitemap halana daftar isi (table of content). Isinya sih sama dengan sitemap di Webmaster, cuma beda kode doang

      Delete
  86. terimakasih atas tipsnya sudah saya coba dan ternyata worked, mudah untuk diikuti terutama bagi blogger pemula seperti saya, tapi ada yang mau saya tanyakan mas, kan sitemap nya sudah jadi yah tapi ko saya mau masukkan ke navigasi header saya gak bisa ya? walaupun linknya sudah diinput tetap pas kolom sitemapnya di klik tampilannya kosong, itu harus dibagaimanakan ya?? terimakasih

    ReplyDelete
    Replies
    1. Jika masih menggunakan blogspot, coba ubah alamat blognya dalam kode di atas dari http menjadi https (tambah s)

      Delete
    2. terimakasih mas, worked dan tampilan blog saya jadi keren :D, kemarin ini saya salah buat sitemap nya di postingan bukan dihalaman, ternyata pas dipindah ke halaman langsung worked, semoga sukses terus, kalo sompet mampir2 ya mas ke blog saya, makasih :)

      Delete
  87. Sitemap nya gk muncul di blog ku yang kedua tapi muncul di blog pertama dan itu code scriptnya sdh bnr. Penyebabnya ini karena apa?

    ReplyDelete
  88. kagak bisa kang, saya coba gagal trus

    ReplyDelete
  89. Gan gimana cara nya buat label nya terbalik...
    contoh
    10
    9
    8
    7
    bukan
    1
    2
    3

    ReplyDelete
  90. Cara merubah icon NEW!! Gimana ya Mas?

    ReplyDelete
    Replies
    1. Cari kode NEW! dan ganti dengan kata lain yang dikehendaki

      Delete
  91. punyaku gak bisa keluar terus gan.... blog mediapii.my.id

    ReplyDelete

Contact Form

Name

Email *

Message *