Cara Memasang Daftar Isi di Blog - Sitemap adalah salah satu jenis halaman yang paling banyak digunakan dalam dunia blogging saat ini. Halaman tersebut berguna untuk menampilkan daftar artikel yang telah dibagikan.
Sitemap biasa juga disebut dengan Daftar Isi atau Peta Situs. Selain memudahkan pembaca, juga dapat membantu robot mesin pencari dalam memahami struktur web berdasarkan jenis konten, waktu publikasi, hingga jenis label.
Sampai saat ini, ada dua jenis peta situs yang berlaku, yaitu versi XML dan HTML. Perbedaannya hanya pada format penulisan serta hasil yang disediakan.
Rekomendasi: Cara Memasang News Ticker di Blog
XML
Sitemap versi XML biasanya digunakan sebagai metode penginputan postingan ke Google Search Console atau Bing Webmaster Tools. Cara kerjanya sendiri dengan menyediakan data postingan ke robot mesin pencari untuk dirayapi.
Setelah perayapan, mesin pencari akan menilai artikel apakah layak ditampilkan di hasil penelusuran atau tidak.
 |
| Sumber: Google Search Console |
HTML
Jika sebelumnya bekerja dengan robot mesin pencari, sitemap versi HTML lebih kepada tampilan visual. Daftar isi tersebutlah yang nantinya akan dilihat langsung oleh pengunjung sebagai referensi bacaan.
Cara Memasang Sitemap / Daftar Isi di Blog
- Masuk ke BLOGGER
- Pilih menu HALAMAN
- Pilih HALAMAN BARU
- Pilih TAMPILAN HTML
- Tempel salah satu skrip yang ada di bawah
- Pilih PUBLIKASIKAN
- Selesai.
Di artikel kali ini, saya menyediakan 5 jenis tampilan yang bisa digunakan. Semua telah dioptimasi dengan struktur kode yang telah di-minify agar tidak terlalu memberatkan kecepatan akses. Nah untuk memudahkan Anda dalam memilih, silahkan melihat demo terlebih dahulu.
Rekomendasi: Cara Memasang Order Notification di Blog
Tampilan 1
<!-- HTML --> <div class="siteMap" id="siteMap"> <span class="loading">Tunggu...</span> </div> <!-- End HTML --> <!-- CSS --> <style> .siteMap{position:relative;font-family:"Noto Sans",sans-serif;margin:0 auto;border:1px solid #eee} .siteMap .loading{display:block;background:#fff;color:#333;padding:15px} .siteMap ul,.siteMap ol,.siteMap li{margin:0;padding:0;list-style:none} .siteMap .siteTabs{float:left;background:#fff;width:20%;font-size:14px} .siteMap .siteTabs li a{display:block;color:#333;font-style:uppercase;text-decoration:none;padding:12px;border-bottom:1px solid #eee;overflow:hidden} .siteMap .siteTabs li a:hover{background:#fafafa;color:#333} .siteMap .siteTabs li a.siteActive-tabs{position:relative;background:#eee;color:#333;z-index:5} .siteMap .siteContent,.siteMap .siteLine{float:right;width:80%;border-left:3px solid #ddd;-webkit-box-sizing:border-box;box-sizing:border-box} .siteMap .siteLine{float:none;position:absolute;display:block;top:0;right:0;bottom:0} .siteMap .sitePanel{position:relative;z-index:5} .siteMap .sitePanel li a{display:block;position:relative;font-size:15px;padding:8px 12px;overflow:hidden} .siteMap .sitePanel li time{display:block;color:#333;font-size:12px} .siteMap .sitePanel li .summary{display:block;font-size:15px;padding:10px 12px 10px} .siteMap .sitePanel li .summary img.thumbnail{float:left;display:block;width:72px;height:72px;background:#fafafa;margin:5px 8px 0 0} .siteMap .sitePanel li{background:#fafafa} .siteMap .sitePanel li:nth-child(even){background:#fff} .siteMap .sitePanel li a:hover,.siteMap .sitePanel li a:focus,.siteMap .sitePanel li.bold a{background:#eee;outline:0} @media screen and (max-width:700px){.siteMap .siteTabs,.siteMap .siteContent{float:none;display:block;width:auto;border-bottom:5px solid rgba(0,0,0,0.07);overflow:hidden}.siteMap .siteTabs li{float:left}.siteMap .siteContent{border-left:0}.siteMap .siteLine,.siteMap .sitePanel li time{display:none} </style> <!-- End CSS --> <!-- JavaScript --> <script> var tabbedTOC={blogUrl:"https://www.ferisp.com/",containerId:"siteMap",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' – <span style="color:red;font-size:12px">New!</span>'};!function(a,b){var c=(new Date).getTime(),d={blogUrl:"http://dte-feed.blogspot.com",containerId:"siteMap",activeTab:1,showDates:!1,showSummaries:!1,numChars:200,showThumbnails:!1,thumbSize:40,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:!1,newText:' – <span style="color:red;font-size:12px">Baru!</span>'};if("undefined"==typeof tabbedTOC)tabbedTOC=d;else for(var e in d)d[e]="undefined"!=typeof tabbedTOC[e]?tabbedTOC[e]:d[e];a["clickTabs_"+c]=function(a){for(var b=document.getElementById(d.containerId),c=b.getElementsByTagName("ol"),e=b.getElementsByTagName("ul")[0],f=e.getElementsByTagName("a"),g=0,h=c.length;h>g;++g)c[g].style.display="none",c[parseInt(a,10)].style.display="block";for(var i=0,j=f.length;j>i;++i)f[i].className="",f[parseInt(a,10)].className="siteActive-tabs"},a["showTabs_"+c]=function(e){for(var f=parseInt(e.feed.openSearch$totalResults.$t,10),g=d,h=e.feed.entry,i=e.feed.category,j="",l=0;l<(g.showNew===!0?5:g.showNew)&&l!==h.length;++l)h[l].title.$t=h[l].title.$t+(g.showNew!==!1?g.newText:"");h=g.sortAlphabetically?h.sort(function(a,b){return a.title.$t.localeCompare(b.title.$t)}):h,i=g.sortAlphabetically?i.sort(function(a,b){return a.term.localeCompare(b.term)}):i,j='<span class="siteLine"></span><ul class="siteTabs">';for(var m=0,n=i.length;n>m;++m)j+='<li class="toc-tab-item-'+m+'"><a onclick="clickTabs_'+c+"("+m+');return false;" onmousedown="return false;" href="javascript:;">'+i[m].term+"</a></li>";j+="</ul>",j+='<div class="siteContent">';for(var o=0,n=i.length;n>o;++o){j+='<ol class="sitePanel" data-category="'+i[o].term+'"',j+=o!=g.activeTab-1?' style="display:none;"':"",j+=">";for(var p=0;f>p&&p!==h.length;++p){for(var q,r=h[p],s=r.published.$t,t=g.monthNames,u=r.title.$t,v=("summary"in r&&g.showSummaries===!0?r.summary.$t.replace(/<br *\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,g.numChars)+"…":""),w=("media$thumbnail"in r&&g.showThumbnails===!0?'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+r.media$thumbnail.url.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>':'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+g.noThumb.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>'),x=r.category||[],y=g.showDates?'<time datetime="'+s+'" title="'+s+'">'+s.substring(8,10)+" "+t[parseInt(s.substring(5,7),10)-1]+" "+s.substring(0,4)+"</time>":"",z=0,A=r.link.length;A>z;++z)if("alternate"===r.link[z].rel){q=r.link[z].href;break}for(var B=0,C=x.length;C>B;++B){var D=g.newTabLink?' target="_blank"':"";x[B].term===i[o].term&&(j+='<li title="'+x[B].term+'"',j+=g.showSummaries?' class="bold"':"",j+='><a href="'+q+'"'+D+">"+u+y+"</a>",j+=g.showSummaries?'<span class="summary">'+w+v+'<span style="display:block;clear:both;"></span></span>':"",j+="</li>")}}j+="</ol>"}j+="</div>",j+='<div style="clear:both;"></div>',b.getElementById(g.containerId).innerHTML=j,a["clickTabs_"+c](g.activeTab-1)};var f=b.getElementsByTagName("head")[0],g=b.createElement("script");g.src=d.blogUrl.replace(/\/+$|[\?&#].*$/g,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+d.maxResults+"&orderby=published&callback=showTabs_"+c,"onload"!==d.preload?a.setTimeout(function(){f.appendChild(g)},d.preload):a.onload=function(){f.appendChild(g)}}(window,document) </script> <!-- End JavaScript -->
Ganti https://www.ferisp.com dengan URL blog Anda.
Tampilan 2
<!-- HTML --> <div class="siteMap" id="siteMap"> <div class="loading">Tunggu...</div> </div> <!-- End HTML --> <!-- CSS --> <style> .siteMap{font-size:15px} .siteMap .loading{background:#fff;color:#333;padding:15px;border:1px solid #eee} .siteMapBox{background:#fff;padding:15px;border:1px solid #eee} .siteMapBox:not(:last-child){margin-bottom:20px} .siteMapTitle{font-size:14px;font-family:"Noto Sans",sans-serif;font-weight:400} .siteMapTitle:before{content:"Label: ";font-size:90%;opacity:.6} .siteMap ol{list-style:none;margin:0;padding:0;counter-reset:sitemap-count} .siteMap li{display:flex;align-items:baseline} .siteMap li:not(:last-child){margin-bottom:0} .siteMap li:before{content:counter(sitemap-count) ".";counter-increment:sitemap-count;flex-shrink:0;width:25px;font-size:15px;font-family:"Noto Sans",sans-serif;line-height:normal} </style> <!-- End CSS --> <!-- JavaScript --> <script> var toc_config={containerId:"siteMap",showNew:0,sortAlphabetically:{thePanel:!0,theList:!0},activePanel:1,slideSpeed:{down:400,up:400},slideEasing:{down:null,up:null},slideCallback:{down:function(){},up:function(){}},clickCallback:function(){},jsonCallback:"siteMap",delayLoading:0};window.onload=function(){!function(e,t){var n=t.getElementById(toc_config.containerId),o=t.getElementsByTagName("head")[0],l=[];e[toc_config.jsonCallback]=function(e){for(var t,o,a=e.feed.entry,i=e.feed.category,c="",r=0,s=i.length;s>r;++r)l.push(i[r].term);for(var d=0,f=a.length;f>d;++d)(toc_config.showNew||toc_config.showNew>0)&&d<toc_config.showNew+1&&(a[d].title.$t+=" %new%");a=toc_config.sortAlphabetically.theList?a.sort(function(e,t){return e.title.$t.localeCompare(t.title.$t)}):a,toc_config.sortAlphabetically.thePanel&&l.sort();for(var g=0,h=l.length;h>g;++g){c+='<div class="siteMapBox"><h4 class="siteMapTitle">'+l[g]+"</h4>",c+='<div class="sitemapContent"><ol>';for(var p=0,w=a.length;w>p;++p){t=a[p].title.$t;for(var u=0,m=a[p].link.length;m>u;++u)if("alternate"==a[p].link[u].rel){o=a[p].link[u].href;break}for(var v=0,y=a[p].category.length;y>v;++v)l[g]==a[p].category[v].term&&(c+='<li><a href="'+o+'" title="'+t.replace(/ \%new\%$/,"")+'">'+t.replace(/ \%new\%$/,"")+"</a></li>")}c+="</ol></div></div>"}n.innerHTML=c};var a=t.createElement("script");a.src="https://www.ferisp.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){o.appendChild(a)}:e.setTimeout(function(){o.appendChild(a)},toc_config.delayLoading)}(window,document)} </script> <!-- End JavaScript -->
Ganti https://www.ferisp.com dengan URL blog Anda.
Tampilan 3
<!-- HTML -->
<div id="siteMap">
<script src="https://cdn.jsdelivr.net/gh/Ferisp/Widget@main/sitemap-3.js"></script>
<script src="https://www.ferisp.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
</div>
<!-- End HTML -->
<!-- CSS -->
<style>
#siteMap{width:100%;background:#fff;color:#333;font-family:"Noto Sans",sans-serif;font-size:15px;margin:5px auto;border:1px solid #eee}
.siteLabel{display:block;background:#eee;margin:0 -5px;padding:1px 0 2px 10px;border-radius:3px}
.siteLabel a{color:#333}
.siteList{background:#fff;margin-left:20px}
.siteList li{margin-right:5px;border-bottom:1px solid #eee}
.new{color:red;font-size:12px}
</style>
<!-- End CSS -->Ganti https://www.ferisp.com dengan URL blog Anda.
Rekomendasi: Cara Memasang Partner Page di Blog
Tampilan 4
<!-- HTML --> <div id="siteMap"> <div class="loading">Tunggu...</div> </div> <!-- End HTML --> <!-- CSS --> <style> #siteMap{background:#fff;color:#333;border:1px solid #eee} #siteMap .loading{background:#fff;color:#333;padding:15px} #siteMap .siteTitle{background:#fafafa;color:#333;font-size:100%;padding:15px;cursor:pointer;letter-spacing:1px;transition:all .3s ease;} #siteMap .siteTitle:last-child{border-bottom:0px} #siteMap .siteTitle:hover{background:#ddd} #siteMap .siteTitle:after{content:"";width:0px;height:0px;position:relative;float:right;top:10px;right:10px;border:5px solid transparent;border-color:#333 transparent transparent;transition:all .3s ease} #siteMap .siteTitle.siteActive{background:#eee} #siteMap .siteTitle.siteActive:after{border-color:#333 transparent transparent;top:5px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)} #siteMap .siteContent ol,#siteMap .siteContent ol li{list-style:none;list-style-type:none;margin:0px;padding:0px;font-weight:400} #siteMap .siteContent ol li{background:#fefefe;text-decoration:none;padding:10px 15px;display:block;color:#666;line-height:1.5em;transition:all .3s ease} #siteMap .siteContent ol li a:hover{color:red} </style> <!-- End CSS --> <!-- JavaScript --> <script> var toc_config={containerId:"siteMap",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:"siteMap",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=\"siteTitle\">'+n[g]+'</div>',l+='<div class=\"siteContent\"><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+" .siteContent").hide(),$("#"+toc_config.containerId+" .siteTitle").click(function(){$(this).hasClass("siteActive")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .siteTitle").removeClass("siteActive").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("siteActive").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("siteActive").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src="https://www.ferisp.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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- End JavaScript -->
Ganti https://www.ferisp.com dengan URL blog Anda.
Tampilan 5
<!-- HTML --> <div id="siteMap"> <div id="loading">Tunggu...</div> </div> <!-- End HTML --> <!-- CSS --> <style> #siteMap{background:#fff;font-size:15px;padding:15px;border:1px solid #eee} #siteMap .loading{background:#fff;color:#333} #siteMap .title{background:#eee;color:#333;margin-bottom:20px;padding:15px;font-size:115%;text-align:center} #siteMap a{font-size:inherit} #siteMap a:after{content:"";width:15px;height:15px;display:inline-block;margin:auto 5px -1.5px 5px;background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' x2='21' y1='14' y2='3'/></svg>")center/15px no-repeat} #siteMap ol li{color:#333;font-size:inherit;padding:10px;line-height:1em} </style> <!-- End CSS --> <!-- JavaScript --> <script> var start=1;var max=150;var siteMapArr=new Array();function runsiteMap(){var scpt=document.createElement("script");scpt.src="https://www.ferisp.com/feeds/posts/summary?alt=json&callback=siteMap&start-index='+start+'&max-results="+max;document.body.appendChild(scpt)} function siteMap(root){var elem=document.getElementById("siteMap");if(!elem)return;elem.innerHTML="";var feed=root.feed;if(feed.entry.length>0){for(var i=0;i<feed.entry.length;i++){var entry=feed.entry[i];var title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=="alternate"){var url=entry.link[j].href;if(url&&url.length>0&&title&&title.length>0){siteMapArr.push({"url":url,"judul":title})} break}}} if(feed.entry.length>=max){start+=max;runsiteMap()} else{var print="";for(var x=0;x<siteMapArr.length;x++){print+='<li><a href=\"'+siteMapArr[x].url+'\" title=\"'+siteMapArr[x].judul+'\">'+siteMapArr[x].judul+'</a></li>'} elem.innerHTML='<div class=\"title\">Total Artikel: '+siteMapArr.length+'</div><ol>'+print+'</ol>'}}}runsiteMap() </script> <!-- End JavaScript -->
Ganti https://www.ferisp.com dengan URL blog Anda.
Kelebihan Menggunakan Sitemap / Daftar Isi
- Memudahkan pembaca
- Meningkatkan pageview
- Meningkatkan nilai otoritas
- Meningkatkan penghasilan dari iklan
- Menurunkan bounce rate
- Lebih mudah diterima Google AdSense.
Rekomendasi: Cara Memasang Scroll Indicator di Blog
Penutup
Dengan banyaknya keuntungan yang bisa didapatkan serta pemasangannya yang mudah, halaman daftar isi jelas menjadi kewajiban bagi setiap blogger. Silahkan pilih salah satu skrip di atas dan lihat hasilnya.
Cukup sekian artikel tentang Cara Memasang Sitemap / Daftar Isi di Blog ini, Terima kasih.