Membuat Daftar Isi (Sitemap) di Blog Berdasarkan Label dengan Menu Dropdown

Sitemap adalah daftar isi blog yang dapat memudahkan pengunjung untuk memilih artikel berdasarkan label atau kategori. Seperti halnya buku, dalam blog pun diperlukan sebuah navigasi layaknya daftar pustaka agar pengunjung bisa menjelajah semua konten yang ada. Sitemap berguna seperti peta yang membantu pengunjung agar tidak tersesat. Langsung saja ya ke tutorial cara membuat daftar isi otomatis di Blogger berdasarkan label / kategori.

Cara Membuat Sitemap SEO Friendly di Halaman Statis Blogger

Tambahkan kode ini "SEBELUM / DI ATAS" </style>.

/* Sitemap */
.table-of-content{background-color:#fff;color:#1d2129;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:14px;font-weight:400;overflow:hidden;border:1px solid #008c5f;}
.table-of-content .toc-header {color:#1d2129;font-family:inherit; font-weight:bold; font-size:14px; background-color:#fff; margin:0; padding:15px; overflow:hidden; cursor:pointer; border-bottom:1px solid #cccfe2; transition:initial;}
.table-of-content .toc-header:hover{background-color:#008c5f; color:#fff}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:relative;float:right;top:10px;right:10px;border:5px solid transparent;border-color:#1d2129 transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{background-color:#008c5f;color:#fff;font-weight:bold}
.table-of-content .toc-header.active:before{border-color:#fff transparent transparent;top:5px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .toc-content li  a {color:#fff; text-decoration:none;}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content ol li {-webkit-margin-start:0px !important; background:#1d2129; line-height:normal!important; margin:0!important; padding:8px 8px 8px 15px!important; text-align:left; overflow:hidden; transition:initial; border-bottom:1px solid #eee}
.table-of-content ol li:first-child{border-top:0}
.table-of-content ol li:last-child{border-bottom:1px solid #cccfe2}

Buat sebuah page atau halaman statis baru dengan mengakses menu Pages » New page.


Berikan judul, pilih mode HTML, copy semua kode dibawah ke dalam text editor dan klik tombol Publish.

<div class="table-of-content" id="table-of-content"><span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
  url: '/',
  containerId: 'table-of-content',
  showNew: 15,
  sortAlphabetically: {
      thePanel: true,
      theList: true
  },
  maxResults: 9999,
  activePanel: 1,
  slideSpeed: {
      down: 400,
      up: 400
  },
  slideEasing: {
      down: null,
      up: null
  },
  slideCallback: {
      down: function() {},
      up: function() {}
  },
  clickCallback: function() {},
  jsonCallback: '_toc',
  delayLoading: 0
};
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<h3 class="toc-header">'+n[g]+"</h3>",l+='<div class="toc-content"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href="'+c+'">'+o.replace(/ \%new\%$/,"")+"</a>"+(o.match(/\%new\%/)?" "+toc_config.newText:"")+"</li>")}l+="</ol></div>"}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .toc-content").hide(),$("#"+toc_config.containerId+" .toc-header").click(function(){$(this).hasClass("active")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .toc-header").removeClass("active").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src=toc_config.url.replace(/\/$/,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+toc_config.maxResults+"&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);
</script>

Hasil akhirnya bisa dilihat disini.

Sekian script dan tutorial mengenai cara membuat sitemap otomatis dan SEO friendly di Blogspot. Langsung praktek ya biar blog kamu makin keren.

Baca Juga