Cara Buat Sitemap Blog (Blogspot)

Cara Buat Sitemap Blogger

Halo sobat duniablogger.com membuat halaman daftar postingan artikel di dalam blog merupakan cara yang baik untuk memudahkan pengunjung dalam mencari postingan yang diminati. Maka dari itu sangat penting untuk mengetahui cara buat sitemap blog di blogspot.

Apa Itu Sitemap

Sitemap atau peta situs adalah halaman khusus yang dibuat berisi daftar URL Artikel untuk memberikan informasi kepada Search Engine agar dapat di di indeks (Crawl) baik oleh Google ataupun mesin pencari lainnya.

Sitemap terdiri dari 2 (dua) macam yaitu XML Sitemap dan HTML Sitemap.

XML Sitemap adalah daftar isi postingan dan laman yang dibuat dalam format XML, Sitemap ini berfungsi agar mesin pencari mudah saat merayapi (Crawl) dan mengindeks isi artikel blog dan HTML Sitemap. Sitemap jenis ini yang biasa di daftarkan ke Google Console, Bing Webmaster, ataupun mesin pencari lainnya.

Contoh XML Sitemap blogspot yang umum dijumpai adalah sebagai berikut:

https://www.duniablogger.com/sitemap.xml

https://www.duniablogger.com/feeds/posts/default?orderby=updated

Note: Silahkan ganti tulisan berwarna MERAH dengan URL Blog kamu

Sedangkan HTML Sitemap adalah halaman yang dibuat di dalam sebuah blog yang berisi seluruh isi postingan agar mudah dilihat oleh pengunjung blog. Berbeda dengan XML Sitemap yang dibuat secara otomatis, HTML Sitemap harus dibuat secara manual menggunakan coding HTML.

Cara Buat Sitemap Blog di Blogspot

Sebelumnya saya sudah pernah menjelaskan cara buat sitemap blog di wordpress. Jika pada wordpress kita bisa menggunakan plugin untuk membuat sitemap blog secara otomatis, sayangnya untuk blogspot kita harus membuatnya secara manual.

Baca Juga: Cara Optimasi SEO Blog

Tapi kamu tidak perlu bingung, karena disini akan dijelaskan sedetail mungkin tentang cara membuat sitemap blog, baik itu XML Sitemap maupun HTML Sitemap.

Cara Submit Sitemap Blog di Blogspot (XML Sitemap)

Submit XML Sitemap di Google Console

1. Buka situs googleconsole.com

2. Buat akun jika belum pernah mendaftar

3. Buat Properti Domain, masukan url blog kamu kemudian klik Lanjutkan

4. Lakukan verifikasi kepemilikan domain, kamu bisa lihat cara verifikasi google console disini atau pilih verifikasi nanti

5. Pilih menu Peta Situs, lalu masukan XML Sitemap seperti pada contoh di atas

6. Kemudian klik KIRIM, tunggu beberapa saat sampai terdapat keterangan “Sukses”

Submit XML Sitemap di Bing Webmaster Tools

1. Buka situs Bing Webmaster Tools lalu login menggunakan akun bing

2. Jika belum memiliki akun silahkan daftar terlebih dahulu

3. Selanjutnya klik menu Sitemap

4. Masukan kode XML Sitemap diatas, lalu klik Submit

Itulah cara membuat atau mendaftarkan sitemap blog ke Google Console dan Bing Webmaster Tools, pastikan ikuti cara diatas dengan teliti agar tidak terjadi error.

Cara Buat Sitemap Blog di Blogspot (HTML Sitemap)

Berbeda dengan sitemap yang di submit ke Google Console, sitemap html berupa halaman statis yang ditampikan di dalam situs blog yang dapat diakses oleh pengunjung blog. Adapun cara membuat halaman sitemap adalah sebagai berikut:

Pertama pastikan kamu sudah mengaktifkan Allow Blog Feed. Jika belum pada dashboard blogger silahkan klik Setting -> Other.

1. Pilih buat Halaman Baru, beri nama “Sitemap” atau sesuai keinginan

2. Rubah mode penulisan dari Compose menjadi HTML

3. Masukan kode html dibawah ini

Baca Juga: Tips Blogger Pemula Wajib Diketahui

<div id="sitemap">Loading...</div>
<script> //<![CDATA[
var start=1;var max=150;var sitemapArr=new Array();function runsitemap(){var scpt=document.createElement('script');scpt.src='/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 Post: '+sitemapArr.length+'</div><ol>'+print+'</ol>'}}} runsitemap();
//]]> </script>

4. Kemudian klik Publikasikan

5. Buka menu Tema -> Edit HTML, Letakkan kode CSS berikut di atas Tag </style> atau ]]><b/:skin>

/* Sitemap Blogger Sederhana */
#sitemap .title {background-color:#448ccb; color:#fff; font-size:150%; font-weight:400; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap a {color:#212121; text-decoration:none; transition:all .3s ease;}
#sitemap a:hover {color:#000;}
#sitemap ol {margin:0px; padding:0px;}
#sitemap ol li {color:#212121; font-weight:400; list-style-type:decimal; margin:0px; padding:10px; line-height:1.5em; -webkit-margin-start:40px !important;}

Nah cukup mudah bukan? kode sitemap diatas menampilkan daftar postingan dengan tampilan yang sederhana. Jika kamu ingin tampilan halaman sitemap yang keren silahkan pilih dari beberapa rekomendasi yang sudah saya rangkum berikut ini.

Daftar Sitemap Blog Keren dan Responsive

Sitemap Blogger Keren Responsive V1

<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #3498DB;
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
<script src="https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Cara pasang buat Halaman Baru -> Tempel kode di atas -> Publikasikan -> Selesai

Sitemap Blogger Keren Responsive V2

<style type="text/css">
.tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
position:relative;color:#333;border: 1px solid #9C9C9C;}
.tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,FreeSans,Sans-Serif;
color:white;}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
.tabbed-toc .toc-tabs {width:20%;float:left;}
.tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Freesans,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
.tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
.tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,FreeSans,Sans-Serif;}
.tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;
text-decoration:none;outline:none;overflow:hidden;}
.tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
.tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
border-bottom:4px solid #275827;overflow:hidden;}
.tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
.tabbed-toc .panel li:nth-child(even) {background-color:#66A9FF}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {
background-color:#333;color:white;outline:none;}
.tabbed-toc .panel li.bold a:hover,
.tabbed-toc .panel li.bold a:hover time {background-color:#222}
.post ol li::before {content: none;}
.post ol li {margin:0;}
@media (max-width:700px) {
.tabbed-toc {border:2px solid #333}
.tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
.tabbed-toc .toc-tabs li {display:inline;float:left;}
.tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#2f77bd;box-shadow:2px 0 7px rgba(0,0,0,.4);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
.tabbed-toc .toc-content {border:none}
.tabbed-toc .toc-line,
.tabbed-toc .panel li time {display:none}
.tabbed-toc .panel li a{height: auto;}
</style>
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
blogUrl: "/", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
monthNames: [ // Array of month names
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>
<script src="https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>

Sitemap Blogger Keren Responsive V3

<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-s3kuUoVBLD4/Xx1if5ogHbI/AAAAAAAAAUU/EshioquzFfYPf2n49rUhm0_kjdeSMUnFACLcBGAsYHQ/s1600/Sitemap%2BArlina%2BCode.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Sitemap Arlina Code" class="lazyload" style="border: none;" data-original-height="444" data-original-width="1200" src="https://3.bp.blogspot.com/-s3kuUoVBLD4/Xx1if5ogHbI/AAAAAAAAAUU/EshioquzFfYPf2n49rUhm0_kjdeSMUnFACLcBGAsYHQ/s1600/Sitemap%2BArlina%2BCode.png" title="Sitemap Code" /></a></div>

<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=99999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1{display:none}#bp_toc{color:#000;margin:0 auto;max-height:686px;overflow:hidden;overflow-y:auto}span.toc-note{margin:0 auto 25px auto;text-align:center;line-height:normal;display:table;position:relative;overflow:hidden;font-size:14px;padding:10px 20px;background:#007bff;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:100%;color:#fff;border-radius:99em;font-weight:500;transition:all .3s}span.toc-note:hover{background-size:200%}.toc-header-col1{padding:10px;background-color:#f5f5f5;width:250px}.toc-header-col2{padding:10px;background-color:#f5f5f5;width:75px}.toc-header-col3{padding:10px;background-color:#fff;width:125px}#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:1px solid rgba(0,0,0,0.05);background:#fff}#bp_toc td.toc-header-col1{}#bp_toc td.toc-header-col2{}#bp_toc td.toc-header-col3{}.post td{background:transparent}#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:1px solid rgba(0,0,0,0.05)}#bp_toc td a{background:transparent;color:#222;float:none;border-radius:0;padding:0;font-size:100%;display:initial;box-shadow:none}#bp_toc td a:hover{color:#0984e3}.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:13px;text-decoration:none;color:#aaa;font-weight:500;letter-spacing:0.5px}.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px 5px;font-size:90%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#3498db}#bp_toc table{width:100%;margin:0 auto;counter-reset:rowNumber}.toc-entry-col1{counter-increment:rowNumber}#bp_toc table tr td.toc-entry-col1:first-child::before{content:counter(rowNumber);display:inline-block;min-width:38px;margin-right:.7em;background:#fc5c65;color:#fff;border-radius:99em;font-weight:500;text-align:center;font-size:12px;padding:0;line-height:1.7}
#bp_toc td.toc-entry-col1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
#bp_toc::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#bp_toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#bp_toc::-webkit-scrollbar-track{background-color:transparent}#bp_toc::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)}
@media screen and (max-width:768px) {
#bp_toc td.toc-entry-col1{white-space:normal;overflow:visible;text-overflow:initial;max-width:100%}#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3,#bp_toc table tr td.toc-entry-col1:first-child::before{display:none}}
</style>

Sitemap Blogger Keren Ala ArlinaDesign

<div id="table-outer">
<table> <tbody> <tr> <td>
<label for="feed-order">Urutkan artikel berdasarkan:</label> </td> <td>
<select id="feed-order">
<option selected="" value="published">Artikel terbaru</option>
<option value="updated">Artikel yang terakhir di update</option>
</select> </td> </tr> <tr> <td>
<label for="label-sorter">Filter artikel berdasarkan kategori:</label> </td> <td>
<select disabled="" id="label-sorter"> <option selected="">Loading....</option>
</select> </td> </tr> <tr> <td>
<label for="feed-q">Cari artikel dengan kata kunci:</label> </td>
<td> <form id="post-searcher">
<input id="feed-q" placeholder="Ketik dan tekan ENTER" type="text" />
</form> </td> </tr> </tbody> </table> </div>
<br /> <header id="result-desc"></header> <br />
<ul id="feed-container"></ul> <div id="feed-nav"> </div>
<script type='text/javaScript'>
document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={homePage:window.location.origin,maxResults:10
,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",
noImage:"//2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1100/no-thumbnail.png
",loading:"<span>Memuat...</span>",counting:"
<div>Memuat artikel...</div>",searching:"<span>Mencari...</span>"},w=window,d=document,el=function(id)
{return d.getElementById(id);},o={a:el('feed-order'),b:el('label-sorter')
.parentNode,c:el('post-searcher'),d:el('feed-q'),e:el('result-desc')
,f:el('feed-container'),g:el('feed-nav'),h:d.getElementsByTagName('head')[0],i:0,j:null,k:'published',l:0,m:""},fn={a:function(){old=el
('temporer-script');old.parentNode.removeChild(old);}
,b:function(param){var script=d.createElement('script');script.
type="text/javascript";script.id="temporer-script";script.src=param;
if(el('temporer-script'))fn.a();o.h.appendChild(script);},
c:function(mode,tag,order){o.i++;o.e.innerHTML=cfg.counting;o.g.innerHTML
=cfg[mode==1?
"searching":"loading"];if(mode===0){fn.b(tag!==null?cfg.
homePage+'/feeds/posts/summary/-/'+ tag+'?alt=json-in-script&start-index
='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.
maxResults+'&orderby='+ order+'&callback=loadToc':cfg.
homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+
((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby
='+ order+'&callback=loadToc');}else if(mode==1)
{fn.b(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+
((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&q='+ tag+'
&orderby='+ order+'&callback=loadToc');}
o.j=(tag!==null)?tag:null;o.l=mode;o.a.disabled=true;o.b.children[0]
.disabled=true;},d:function(json){var _h;o.g.innerHTML="";o.e.innerHTML=o.l==1?
'<span>Hasil penelusuran untuk kata kunci <b>&#8220;'+ o.m+'&#8221;
</b> ('+ json.feed.openSearch$totalResults.$t+' Hasil)</span>':'<div>
Total: '+ json.feed.openSearch$totalResults.$t+' Artikel</div>'
;if("entry"in json.feed){var a=json.feed.entry,b,c,_d,e="0 Komentar"
,f="",g;for(var i=0;i<cfg.maxResults;i++){if(i==a.length)break;b=a[i]
.title.$t;_d=("summary"in a[i])?a[i].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,cfg.numChars):"";
g=("media$thumbnail"in a[i])?a[i].media$thumbnail.url.replace(/.*?:\/\//g , "//")
.replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+""):cfg
.noImage.replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+"")
;for(var j=0,jen=a[i].link.length;j<jen;j++){c=(a[i].link[j].rel=="alternate")
?a[i].link[j].href:"#";}
for(var k=0,ken=a[i].link.length;k<ken;k++){if(a[i].link[k].rel=="replies"&&a[i].link[k].type=="text/html")
{e=a[i].link[k].title;break;}}
_h=d.createElement('li');_h.innerHTML='<div class="inner">
<img style="width:'+ cfg.thumbWidth+'px;height:'+ cfg.thumbHeight+'px;" 
src="'+ g+'" alt="'+ b+'"><a class="toc-title" href="'+ c+'" target="_blank" 
title="'+ b+'">'+ b+'</a><div class="news-text">'+ _d+'&hellip;
<br style="clear:both;"></div></div>';o.f.appendChild(_h);}
_h=d.createElement('a');_h.href='#load-more';_h.innerHTML=cfg.
navText;_h.onclick=function(){fn.c(o.l,o.j,o.k);return false;};}else{_h=d.createElement('a');_h.href='#reset-content';_h.innerHTML=cfg.resetToc;_h.onclick=function(){o.i=-1;o.e.innerHTML=cfg.counting;o.f.innerHTML="";
fn.c(0,null,'published');o.a.innerHTML=o.a.innerHTML;o.b.
children[0].innerHTML=o.b.children[0].innerHTML;return false;};}
o.g.appendChild(_h);o.a.disabled=false;o.b.children[0].disabled=false;},
e:function(json){var a=json.feed.category,b='<select id="label-sorter">
<option value="" selected disabled>Pilih Kategori...</option>'
;for(var i=0,len=a.length;i<len;i++){b+='<option value="'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'">'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'</option>';}
b+='</select>';o.b.innerHTML=b;o.b.children[0].onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.loading;
fn.c(0,this.value,o.k);};}};loadToc=fn.d;loadCategories=fn.e;
fn.b(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&start-index
='+(o.i+ 1)+'&max-results='+ cfg.maxResults+'&orderby=published&callback
=loadToc');fn.b
(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories')
;o.a.onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.counting;
o.b.children[0]
.innerHTML=o.b.children[0].innerHTML;fn.c(0,null,this.value);o.k=this.value;}
;o.c.onsubmit=function(){o.i=-1;o.f.innerHTML="";o.m=o.d.value;fn.c
(1,o.d.value,o.k);return false;};}};_toc.init();
</script>

Edit Tema -> Letakkan kode dibawah di atas tag </head>

<b:if cond='data:blog.url == &quot;Ganti Dengan URL Halaman&quot;'>
<style type='text/css'>
#table-outer{padding:7px 10px;margin:0 auto}
#table-outer table{width:auto;margin:0 auto;border:none!important;}
#table-outer table td{border:none!important;padding:0!important}
#table-outer form{font:inherit}
#table-outer label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}
#table-outer select[disabled]{opacity:.4}
#post-searcher{display:block;margin:0;padding:0}
#table-outer input,#table-outer select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family: Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#table-outer select option{min-height:1.4em!important;}
#table-outer input#feed-q{padding:5px 10px!important;}
#feed-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}
#feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}
#feed-container li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}
#feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:500}
#feed-container li a:hover{text-decoration:none;color:#E94141}
#feed-container li .news-text{margin-top:5px;line-height:1.3em!important}
#feed-container li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;width:140px!important;}
#result-desc{margin:0;padding:0;}
#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}
#result-desc div{color:inherit}
#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}
#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}
#feed-nav a,#feed-nav span:hover{color:#1B1B1B}
#feed-nav a:active,#feed-nav a:hover{color:#555}
#feed-nav span{cursor:wait}
@media (max-width:600px){#table-outer table{margin:0 auto;width:100%}
#feed-container,#table-outer{margin:0 auto}
#feed-container li .inner{margin:5px auto;height:auto}
#feedContainer li{float:none;display:block;width:auto;height:auto}
#feed-container li .news-text, #feedContainer:after,#feed-container li img{display:none!important}}
.post-body{min-height:300px;background:url(https://lh6.googleusercontent.com/-UKClHRpzskg/VfOm1eLfT7I/AAAAAAAAiQw/1pwwhEsT49I/w220-h19-no/ajax-loader%2B%25281%2529.gif)50% 50% no-repeat!important;}
</style>
</b:if>

Sitemap Blogger Keren Ala Igniel

<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>

Edit Tema -> Letakkan kode dibawah tepat diatas tag </style>

/* 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;}

Sitemap Blogger Keren Ala Mas Tamvan

<div id="sitemap-blog"> <table> <tbody> <tr> <td>
<label for="feed-order">Urutkan artikel berdasarkan:</label>
</td> <td> <select id="feed-order">
<option selected="" value="published">Artikel terbaru</option>
<option value="updated">Artikel yang terakhir di update</option>
</select> </td> </tr> <tr> <td>
<label for="label-sorter">Filter artikel berdasarkan kategori:</label>
</td> <td> <select disabled="" id="label-sorter">
<option selected="">Loading....</option>
</select> </td> </tr> <tr> <td>
<label for="feed-q">Cari artikel dengan kata kunci:</label>
</td> <td> <form id="post-searcher">
<input id="feed-q" placeholder="Ketik dan tekan ENTER" type="text" />
</form> </td> </tr> </tbody> </table> </div>
<br /> <header id="result-desc"></header> <br />
<ul id="daftar-isi-blog"></ul> <div id="feed-nav">
</div> <script type="text/javascript">
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
var css = '#sitemap-blog{padding:7px 10px;margin:0 auto}#sitemap-blog table{width:auto;margin:0 auto;border:none!important}#sitemap-blog table td{border:none!important;padding:0!important}#sitemap-blog form{font:inherit}#sitemap-blog label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}#sitemap-blog select[disabled]{opacity:.4}#post-searcher{display:block;margin:0;padding:0}#sitemap-blog input,#sitemap-blog select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#sitemap-blog select option{min-height:1.4em!important}#sitemap-blog input#feed-q{padding:5px 10px!important}#daftar-isi-blog{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}#daftar-isi-blog li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}#daftar-isi-blog li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}#daftar-isi-blog li a{text-decoration:none;color:#2C2C2C;font-weight:500}#daftar-isi-blog li a:hover{text-decoration:none;color:#E94141}#daftar-isi-blog li .news-text{margin-top:5px;line-height:1.3em!important}#daftar-isi-blog li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;width:140px!important}#result-desc{margin:0;padding:0}#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}#result-desc div{color:inherit}#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}#feed-nav a,#feed-nav span:hover{color:#1B1B1B}#feed-nav a:active,#feed-nav a:hover{color:#555}#feed-nav span{cursor:wait}@media (max-width:600px){#sitemap-blog table{margin:0 auto;width:100%}#daftar-isi-blog,#sitemap-blog{margin:0 auto}#daftar-isi-blog li .inner{margin:5px auto;height:auto}#feedContainer li{float:none;display:block;width:auto;height:auto}#daftar-isi-blog li .news-text,#feedContainer:after,#daftar-isi-blog li img{display:none!important}}.post-body{min-height:300px;background:url(https://lh6.googleusercontent.com/-UKClHRpzskg/VfOm1eLfT7I/AAAAAAAAiQw/1pwwhEsT49I/w220-h19-no/ajax-loader%2B%25281%2529.gif)50% 50% no-repeat!important}';
style.appendChild(document.createTextNode(css));
head.appendChild(style); </script> <script type='text/javaScript'> document.write; var loadToc, loadCategories, _toc = { init: function() { var cfg = {
homePage: window.location.origin, maxResults: 10, numChars: 270, thumbWidth: 140, thumbHeight: 95, navText: "Tampilkan artikel selanjutnya &#9660;",
resetToc: "Kembali ke Awal", noImage: "//2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1100/no-thumbnail.png", loading: "<span>Memuat...</span>", counting: "<div>Memuat artikel...</div>", searching: "<span>Mencari...</span>" },
w = window, d = document, el = function(id) { return d.getElementById(id); }, o = { a: el('feed-order'), b: el('label-sorter').parentNode, c: el('post-searcher'), d: el('feed-q'), e: el('result-desc'), f: el('daftar-isi-blog'), g: el('feed-nav'), h: d.getElementsByTagName('head')[0], i: 0, j: null, k: 'published', l: 0, m: "" }, fn = { a: function() { old = el('temporer-script'); old.parentNode.removeChild(old); },
b: function(param) { var script = d.createElement('script');
script.type = "text/javascript";
script.id = "temporer-script";
script.src = param;
if (el('temporer-script')) fn.a(); o.h.appendChild(script); },
c: function(mode, tag, order) { o.i++; o.e.innerHTML = cfg.counting; o.g.innerHTML = cfg[mode == 1 ? "searching" : "loading"]; if (mode === 0) {
fn.b(tag !== null ? cfg.homePage + '/feeds/posts/summary/-/' + tag + '?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc' : cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc');
} else if (mode == 1) {
fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&q=' + tag + '&orderby=' + order + '&callback=loadToc'); } o.j = (tag !== null) ? tag : null; o.l = mode; o.a.disabled = true; o.b.children[0].disabled = true; }, d: function(json) { var _h; o.g.innerHTML = "";
o.e.innerHTML = o.l == 1 ? '<span>Hasil penelusuran untuk kata kunci <b>&#8220;' + o.m + '&#8221;</b> (' + json.feed.openSearch$totalResults.$t + ' Hasil)</span>' : '<div>Total: ' + json.feed.openSearch$totalResults.$t + ' Artikel</div>';
if ("entry" in json.feed) { var a = json.feed.entry, b, c, _d, e = "0 Komentar", f = "", g;
for (var i = 0; i < cfg.maxResults; i++) {
if (i == a.length) break; b = a[i].title.$t; _d = ("summary" in a[i]) ? a[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<(.*?)>/g, "").replace(/<iframe/ig, "").substring(0, cfg.numChars) : ""; g = ("media$thumbnail" in a[i]) ? a[i].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0 9]+\-c/, "\/s" + cfg.thumbWidth + "") : cfg.noImage.replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + ""); for (var j = 0, jen = a[i].link.length; j < jen; j++) { c = (a[i].link[j].rel == "alternate") ? a[i].link[j].href : "#"; } for (var k = 0, ken = a[i].link.length; k < ken; k++) { if (a[i].link[k].rel == "replies" && a[i].link[k].type == "text/html") { e = a[i].link[k].title; break; } } _h = d.createElement('li');
_h.innerHTML = '<div class="inner"><img style="width:' + cfg.thumbWidth + 'px;height:' + cfg.thumbHeight + 'px;" data-src="' + g + '" src="' + g + '" alt="' + b + '" title="' + b + '"><a class="toc-title" href="' + c + '" target="_blank" title="' + b + '">' + b + '</a><div class="news text">' + _d + '&hellip;<br style="clear:both;"></div></div>'; o.f.appendChild(_h); } _h = d.createElement('a'); _h.href = '#load-more'; _h.innerHTML = cfg.navText; _h.onclick = function() { fn.c(o.l, o.j, o.k); return false; }; } else { _h = d.createElement('a'); _h.href = '#reset-content'; _h.innerHTML = cfg.resetToc; _h.onclick = function() { o.i = -1; o.e.innerHTML = cfg.counting; o.f.innerHTML = ""; fn.c(0, null, 'published'); o.a.innerHTML = o.a.innerHTML; o.b.children[0].innerHTML = o.b.children[0].innerHTML; return false; }; } o.g.appendChild(_h); o.a.disabled = false; o.b.children[0].disabled = false; }, e: function(json) { var a = json.feed.category, b = '<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>'; for (var i = 0, len = a.length; i < len; i++) { b += '<option value="' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '">' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '</option>'; } b += '</select>'; o.b.innerHTML = b; o.b.children[0].onchange = function() { o.i = -1; o.f.innerHTML = ""; o.g.innerHTML = cfg.loading; fn.c(0, this.value, o.k); }; } }; loadToc = fn.d; loadCategories = fn.e; fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + (o.i + 1) + '&max results=' + cfg.maxResults + '&orderby=published&callback=loadToc'); fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&max results=0&orderby=published&callback=loadCategories'); o.a.onchange = function() { o.i = -1; o.f.innerHTML = ""; o.g.innerHTML = cfg.counting; o.b.children[0].innerHTML = o.b.children[0].innerHTML; fn.c(0, null, this.value); o.k = this.value; }; o.c.onsubmit = function() { o.i = -1; o.f.innerHTML = ""; o.m = o.d.value; fn.c(1, o.d.value, o.k); return false; }; } }; _toc.init();
</script>

Penutup

Dengan adanya Sitemap ini, maka mesin pencari seperti Google, Bing, dan Yandex akan dapat menemukan setiap URL yang ada di blog atau situs dengan mudah, yang nantinya akan berdampak pada kecepatan index artikel di halaman pencari. Karena itu Sitemap sangatlah vital untuk optimasi SEO (Search Engine Optimization).

Semoga artikel ini bermanfaat, senang sekali jika kita bisa berdiskusi melalui kolom komentar di bawah.

error: Content is protected !!