Cara Membuat Halaman "Peta Situs" di Blogger

 

Cara Membuat Halaman "Peta Situs" di Blogger

Halaman Peta Situs adalah halaman yang berisi seputar daftar isi artikel yang ada di blog kamu. Halaman statis yang wajib kamu pasang dengan tujuan mempermudah pengunjung untuk menemukan artikel yang di butuhkan. Sama halnya seperti Halaman About, Contact, Privacy, dan Disclaimer, selain meningkatkan SEO dalam blog kamu, halaman statis ini juga bertujuan untuk mempermudah dalam hal pengajuan monetisasi di Google Adsense. 

Dalam artikel ini, saya sudah menyiapkan cara membuat halaman statis peta situs dari beberapa situs tentang tutorial blog.


Sebelumnya, kamu harus memasang kode jquery dahulu pada template blog milik kamu. Abaikan bagian ini, jika kamu sudah memiliki kode jquery versi 3.5.1 atau versi terbaru nya.


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

Kode ini berguna untuk meng-aktifkan fungsi one click pada situs / blog kamu.




1. Arlinacode ( Awalnya Arlina Design )

DEMO
Berikut adalah cara membuat halaman peta situs dari Arlina Design

1. Login ke akun Blogger kamu
2. Di dasbor blogger, pilih tab Template / Tema
3. Kemudian Edit Tema melalui Edit HTML.
    Sebelumnya, ada baiknya kamu melakukan pencadangan template untuk tujuan mencegah jika ada kesalahan dalam pengeditan tema.
4. Tempelkan kode CSS berikut tepat di atas tag penutup head.

<b:if cond='data:view.isPage'>
<style scoped="" 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,#feed-container li img,#feedContainer:after{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>

5. Simpan Template.

Kemudian beralih menuju tab 'Halaman', lalu buat Halaman Baru dengan Judul Peta Situs ataupun SiteMap

6. Beralih ke mode penulisan HTML ( Perhatikan! Kamu harus menggunakan metode ini pada mode penulisan HTML, bukan Mode Menulis/COMPOSE )
7 . Salin dan Tempelkan kode HTML berikut

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

8. Kemudian Publikasikan Halaman kamu.
9. Selesai.

2. Kode Jarwo

DEMO
Berikut adalah cara membuat halaman peta situs dari Kode Jarwo

1. Login ke akun Blogger kamu
2. Di dasbor blogger, pilih tab Template / Tema
3. Kemudian Edit Tema melalui Edit HTML.
    Sebelumnya, ada baiknya kamu melakukan pencadangan template untuk tujuan mencegah jika ada kesalahan dalam pengeditan tema.
4. Tempelkan kode CSS berikut tepat di atas tag penutup head.

<style>
.kodejarwo-sitemap-list {}
.kodejarwo-sitemap-list ul {padding:0;margin:0;box-shadow:0 0 10px rgba(0,0,0,.2);}
.kodejarwo-sitemap-list ul li.judul {padding:10px 20px;list-style:none;margin:0;font-family:arial;font-size:17px;font-weight:700;text-transform:uppercase}
.kodejarwo-sitemap-list ul ul li.menu {list-style:none;margin:0;}
.kodejarwo-sitemap-list ul ul li a {padding:10px 30px;background:#454359;border-bottom:2px solid #3f3e4e;width:100%;color:white !important;display:inline-block}
.kodejarwo-sitemap-list ul ul li a:link {color:white !important;font-family:arial;font-size:15px}
.kodejarwo-sitemap-list ul ul li a:hover {opacity:0.8}
.kodejarwo-sitemap-list ul ul li a strong {float:right}
</style>
<script async='async' src='https://cdn.rawgit.com/BangJarwo/Kode-Jarwo/ba6b6cf5/Sitemap.js'></script>

5. Simpan Template.

Kemudian beralih menuju tab 'Halaman', lalu buat Halaman Baru dengan Judul Peta Situs ataupun SiteMap

6. Beralih ke mode penulisan HTML ( Perhatikan! Kamu harus menggunakan metode ini pada mode penulisan HTML, bukan Mode Menulis/COMPOSE )
7 . Salin dan Tempelkan kode HTML berikut

<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=kodejarwoSitemap"></script>

8. Kemudian Publikasikan Halaman kamu.
9. Selesai.

3. Igniel.com

DEMO
Berikut adalah cara membuat halaman peta situs dari Igniel

1. Login ke akun Blogger kamu
2. Di dasbor blogger, pilih tab Template / Tema
3. Kemudian Edit Tema melalui Edit HTML.
    Sebelumnya, ada baiknya kamu melakukan pencadangan template untuk tujuan mencegah jika ada kesalahan dalam pengeditan tema.
4. Tempelkan kode CSS berikut tepat di atas tag penutup head.

<style>
#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:0}#sitemap1 .judul:hover{background-color:#1d2129}#sitemap1 .judul:after{content:'';width:0;height:0;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:0;padding:0;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}
</style>

5. Simpan Template.

Kemudian beralih menuju tab 'Halaman', lalu buat Halaman Baru dengan Judul Peta Situs ataupun SiteMap

6. Beralih ke mode penulisan HTML ( Perhatikan! Kamu harus menggunakan metode ini pada mode penulisan HTML, bukan Mode Menulis/COMPOSE )
7 . Salin dan Tempelkan kode HTML berikut

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

8. Kemudian Publikasikan Halaman kamu.
9. Selesai.

4. CodePelajar

DEMO
Berikut adalah cara membuat halaman peta situs dari CodePelajar

1. Login ke akun Blogger kamu
2. Di dasbor blogger, pilih tab Template / Tema
3. Kemudian Edit Tema melalui Edit HTML.
    Sebelumnya, ada baiknya kamu melakukan pencadangan template untuk tujuan mencegah jika ada kesalahan dalam pengeditan tema.
4. Tempelkan kode CSS berikut tepat di atas tag penutup head.

<style>
.pelajar-sitemap{position:relative;margin:30px auto}.pelajar-toc-wrap{display:inline-block;width:100%}.pelajar-toc-wrap .pelajar-cat{background:#333;border-radius:2px;color:#fff;font-size:16px;font-weight:700;padding:10px 20px;border-radius:3px;text-transform:capitalize}.pelajar-toc::before{background:#333;bottom:0;content:"";left:20%;margin-left:-10px;position:absolute;top:0;width:4px}.pelajar-toc{margin:0;padding:30px 20px;position:relative}.pelajar-sitemap ul.pelajar-toc{margin:0;padding:30px 0;list-style-type:none}.pelajar-toc li{list-style:none;margin:0;padding:0;position:relative}.pelajar-toc>li .toc-date{color:#999;display:block;font-size:14px;font-weight:700;position:absolute;text-transform:uppercase;top:25px;width:15%}.pelajar-toc>li .pelajar-icon{background:#fff;border-radius:50%;box-shadow:0 0 0 4px #333;color:#fff;font-size:1.4em;font-style:normal;font-variant:normal;font-weight:400;height:10px;left:21.2%;line-height:10px;margin:0 0 0 -25px;position:absolute;text-align:center;text-transform:none;top:30px;width:10px}.pelajar-toc>li .pelajar-post::after{border-color:transparent #f5f5f5 transparent transparent;border-style:solid;border-width:10px;content:"";height:0;pointer-events:none;position:absolute;right:100%;top:auto;width:0}.pelajar-toc>li .pelajar-post{background:#f5f5f5;border-radius:5px;display:block;font-size:15px;margin:0 0 15px 23%;padding:25px 30px;position:relative}.pelajar-toc>li .pelajar-post a{color:#333;font-weight:700}.pelajar-toc>li:last-child .pelajar-post{margin:0 0 0 23%}.pelajar-toc>li .pelajar-post a:hover{color:#999}@media (max-width:768px){.pelajar-toc>li .pelajar-icon{display:none}}
</style>
<script type='text/javascript'>/*<![CDATA[*/
$(document).ready(function(){var static_page_text=$.trim($(".post-body").text());var text_month=[,"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];if(static_page_text==="[sitemap]"){var postbody=$(".post-body");$.ajax({url:"/feeds/posts/default?alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var t=[];for(var n=0;n<e.feed.category.length;n++){t.push(e.feed.category[n].term)}var t=t.join("/");postbody.html('<div class="pelajar-sitemap"></div>');$(".post-body .pelajar-sitemap").text(t);var r=$(".pelajar-sitemap").text().split("/");var i="";for(get=0;get<r.length;++get){i+="<span>"+r[get]+"</span>"}$(".pelajar-sitemap").html(i);$(".pelajar-sitemap span").each(function(){var e=$(this);var t=$(this).text();$.ajax({url:"/feeds/posts/default/-/"+t+"?alt=json-in-script",type:"get",dataType:"jsonp",success:function(n){var r="";var i='<ul class="pelajar-toc">';for(var s=0;s<n.feed.entry.length;s++){for(var o=0;o<n.feed.entry[s].link.length;o++){if(n.feed.entry[s].link[o].rel=="alternate"){r=n.feed.entry[s].link[o].href;break}}var u=n.feed.entry[s].title.$t;var a=n.feed.entry[s].published.$t,f=a.substring(0,4),l=a.substring(5,7),c=a.substring(8,10),h='<span class="day">'+c.replace(/^0+/,"")+'</span><span class="month">'+text_month[parseInt(l,10)]+' </span><span class="year">'+f+"</span>";i+='<li><div class="toc-date">'+h+'</div><div class="pelajar-icon"></div><span class="pelajar-post"><a href="'+r+'">'+u+"</a></span></li>"}i+="</ul>";e.replaceWith('<div class="pelajar-toc-wrap"><div class="pelajar-cat">'+t+'</div>'+i+"</div>")}})})}})}});
/*]]>*/</script>

5. Simpan Template.

Kemudian beralih menuju tab 'Halaman', lalu buat Halaman Baru dengan Judul Peta Situs ataupun SiteMap

6. Beralih ke mode penulisan HTML ( Perhatikan! Kamu harus menggunakan metode ini pada mode penulisan HTML, bukan Mode Menulis/COMPOSE )
7 . Salin dan Tempelkan kode HTML berikut

[sitemap]

8. Kemudian Publikasikan Halaman kamu.
9. Selesai.

5. Mas Tamvan Blog

DEMO
Berikut adalah cara membuat halaman peta situs dari Mas Tamvan Blog

1. Login ke akun Blogger kamu
2. Di dasbor blogger, pilih tab Halaman
Kemudian beralih menuju tab 'Halaman', lalu buat Halaman Baru dengan Judul Peta Situs ataupun SiteMap

3. Beralih ke mode penulisan HTML ( Perhatikan! Kamu harus menggunakan metode ini pada mode penulisan HTML, bukan Mode Menulis/COMPOSE )
4 . Salin dan Tempelkan kode HTML berikut

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

5. Kemudian Publikasikan Halaman kamu.
9. Selesai.

6. Pena Indigo

Versi I
DEMO

Berikut adalah cara membuat halaman peta situs dari Pena Indigo

1. Login ke akun Blogger kamu
2. Di dasbor blogger, pilih tab Template / Tema
3. Kemudian Edit Tema melalui Edit HTML.
    Sebelumnya, ada baiknya kamu melakukan pencadangan template untuk tujuan mencegah jika ada kesalahan dalam pengeditan tema.
4. Tempelkan kode CSS berikut tepat di atas tag penutup head.

<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,.2);-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0,.2);box-shadow:4px 4px 8px 2px rgba(0,0,0,.2)}.labl{color:#ff5f00;font-weight:700;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:700;font-style:italic}.postname{font-weight:400;background:#fff;margin-left:35px}.postname li{border-bottom:#ddd 1px dotted;margin-right:5px}
</style>

5. Simpan Template.

Kemudian beralih menuju tab 'Halaman', lalu buat Halaman Baru dengan Judul Peta Situs ataupun SiteMap

6. Beralih ke mode penulisan HTML ( Perhatikan! Kamu harus menggunakan metode ini pada mode penulisan HTML, bukan Mode Menulis/COMPOSE )
7 . Salin dan Tempelkan kode HTML berikut

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

8. Kemudian Publikasikan Halaman kamu.
9. Selesai.

Versi II
DEMO

1. Tempelkan kode CSS berikut tepat di atas tag penutup head.

<style type="text/css">
.tabbed-toc{margin:0 auto;background-color:#2f77bd;box-shadow:0 0 7px rgba(5,5,5,.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:#fff}.tabbed-toc li,.tabbed-toc ol,.tabbed-toc ul{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:0 1px 1px #fff}.tabbed-toc .toc-tabs li a:hover{background-color:#4086e0;color:#fff;box-shadow:0 0 7px rgba(0,0,0,.7)}.tabbed-toc .toc-tabs li a.active-tab{background-color:#fff;color:#000;box-shadow:0 0 7px rgba(0,0,0,.7);z-index:5;margin:0 -1px 0 0}.tabbed-toc .toc-content,.tabbed-toc .toc-line{width:80%;float:right;background-color:#fff;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:700;font-size:12px;color:#000;line-height:20px;padding:10px 12px;text-decoration:none;outline:0;overflow:hidden}.tabbed-toc .panel li time{display:block;font-style:italic;font-weight:400;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:focus,.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a{background-color:#333;color:#fff;outline:0}.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-content,.tabbed-toc .toc-tabs{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:#fff;color:#333}.tabbed-toc .toc-content{border:none}.tabbed-toc .panel li time,.tabbed-toc .toc-line{display:none}.tabbed-toc .panel li a{height:auto}}
</style>

2. Simpan Template.

Kemudian beralih menuju tab 'Halaman', lalu buat Halaman Baru dengan Judul Peta Situs ataupun SiteMap

3. Beralih ke mode penulisan HTML ( Perhatikan! Kamu harus menggunakan metode ini pada mode penulisan HTML, bukan Mode Menulis/COMPOSE )
4 . Salin dan Tempelkan kode HTML berikut

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

5. Kemudian Publikasikan Halaman kamu.
6. Selesai.

7. Abu Farhan

DEMO

Berikut adalah cara membuat halaman peta situs dari Abu Farhan

1. Login ke akun Blogger kamu
2. Di dasbor blogger, pilih tab Halaman
Kemudian beralih menuju tab 'Halaman', lalu buat Halaman Baru dengan Judul Peta Situs ataupun SiteMap

3. Beralih ke mode penulisan HTML ( Perhatikan! Kamu harus menggunakan metode ini pada mode penulisan HTML, bukan Mode Menulis/COMPOSE )
4 . Salin dan Tempelkan kode HTML berikut

<script style="text/javascript" src="https://cdn.rawgit.com/teknomia/sitemap/eded6943/sitemap-sederhana.js"></script>

<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

5. Kemudian Publikasikan Halaman kamu.
9. Selesai.

Kesimpulan & Penutup

Itulah cara membuat halaman statis peta situs atau pun sitemap keren oleh banyak versi yang sudah saya rangkum menjadi satu. Dengan itupula, saya akhiri artikel tentang cara membuat halaman peta situs keren ini. Semoga bermanfaat.

Referensi :

Related Posts

Ikuti Update Terbaru