Sitemap merupakan daftar isi blog yg dapat memudahkan pengunjung buat memilih artikel berdasarkan label atau kategori. Seperti halnya kitab , dalam blog pun diperlukan sebuah navigasi layaknya daftar isi supaya pengunjung mampu menjelajah semua konten yg terdapat. Sitemap bermanfaat misalnya peta yang membantu pengunjung supaya nir tersesat. Langsung saja ya ke tutorial cara membuat daftar isi otomatis di Blogger dari label / kategori.
Cara Membuat Sitemap SEO Friendly di Halaman Statis Blogger
/* Blogger Sitemap Dropdown */ #sitemap1 background-color:#fff; color:#1d2129; font-weight:400; border:1px solid #ccc; #sitemap1 .Loading padding:10px 15px; color:#666; #sitemap1 .Judul background-color:#008c5f; color:#fff; font-size:125%; font-weight:600; padding:15px; cursor:pointer; border-bottom:1px solid #fff; letter-spacing:1px; transition:all .3s ease; #sitemap1 .Judul:last-child border-bottom:0px; #sitemap1 .Judul:hover background-color:#1d2129; #sitemap1 .Judul:after content:''; width:0px; height:0px; position:relative; float:right; top:10px; right:10px; border:5px solid transparent; border-color:#fff transparent transparent; transition:all .3s ease #sitemap1 .Judul.Aktif background-color:#1d2129; #sitemap1 .Judul.Aktif:after 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) #sitemap1 .Konten ol, #sitemap1 .Konten ol li list-style:none; list-style-type:none; margin:0px; padding:0px; font-weight:400; #sitemap1 .Konten ol li:nth-of-type(even) background-color:#e9e9e9; #sitemap1 .Konten ol li:nth-of-type(odd) background-color:#fff #sitemap1 .Konten ol li a text-decoration:none; padding:10px 15px; display:block; color:#666; line-height:1.5em; transition:all .3s ease; #sitemap1 .Konten ol li a:hover color:#000;
<div id="sitemap1"><div class="loading">Loading....</div></div> <script> //<![CDATA[ /* Blogger Sitemap Dropdown */ var toc_config = {containerId:'sitemap1', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemap1',delayLoading: 0}; window.onload = function(){ !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+='<div class=\"judul\">'+n[g]+'</div>',l+='<div class=\"konten\"><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+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div>'}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .konten").hide(),$("#"+toc_config.containerId+" .judul").click(function(){$(this).hasClass("aktif")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .judul").removeClass("aktif").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src="https://www.igniel.com/feeds/posts/summary?alt=json-in-script&max-results=9999&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>
Sekian script dan tutorial mengenai cara membuat sitemap otomatis dan SEO friendly di Blogspot. Langsung praktek ya biar blog kamu makin keren.
Hasil akhirnya bisa dilihat disini.
Berikan judul, pilih mode HTML, copy semua kode dibawah ke dalam text editor dan klik tombol Publish.
Pastikan kamu sudah memasang library jQuery terlebih dulu. Lalu buat sebuah page atau halaman statis baru dengan mengakses menu Pages (Halaman) » New page (Halaman baru).
Tambahkan kode ini "SEBELUM / DI ATAS" </style>.