Cara Membuat Sitemap Open Source Responsive diBlogger

Sitemap atau peta situs merupakan hal penting yang harus ada diweb, dengan memiliki Sitemap para pengunjung web akan lebih mudah nelihat isi artikel dari Web tersebut, memang ada juga beberapa web yang tidak memasang menu sitemap dengan alasan itu tidak berguna, pengunjung tidak mau repot repot mencari, dan berbagai alasan lainnya. Padahal memiliki Sitemap itu sangat penting, bukan hanya dapat mempermudah pengunjung untuk melihat Daftar Isi website, namun dapat juga mempercepat index web, visibilitas web, memiliki nilai tinggi terhadap mesin pencari google dan berbagai manfaat lainnya yang tidak bisa sebutkan

Bagi kamu yang sedang mencari bagaimana membuat halaman sitemap, kamu dapat melihat caranya disini, Sitemap yang akan saya sajikan disini adalah Sitemap Open Source, untuk Demonya kalian dapat melihat diakhir artikel ini, nah langsung saja ke tutorialnya.

Cara Membuat Sitemap Open Source

1. Login dulu ke Blogger,
2. Pada dashboard Blogger, pilih Page/Halaman,
3. Saat masuk ke Halaman, ganti mode penulisan "Compose" menjadi "HTML", Setelah itu copy kode dibawah ini dan letakkan dihalaman tersebut, Ingat!! Mode Penulisan HTML bukan Compose,

   <style type="text/css">#toc{width:99%;margin:5px auto;border:1px solid #ff69b4;-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:#ffcce6;border:1px solid #ff69b4;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>
   <div id="toc">
   <script type="text/javascript">
   //<![CDATA[
   var postTitle=new Array,postUrl=new Array,postMp3=new Array,postDate=new Array,postLabels=new Array,postBaru=new Array,sortBy="titleasc",tocLoaded=!1,numChars=intert3chmedia,postFilter="",numberfeed=0;function loadtoc(t){!function(){if("entry"in t.feed){var e=t.feed.entry.length;numberfeed=e,ii=0;for(var s=0;s<e;s++){for(var o,l=t.feed.entry[s],a=l.title.$t,r=l.published.$t.substring(0,10),i=0;i<l.link.length;i++)if("alternate"==l.link[i].rel){o=l.link[i].href;break}var n="";for(i=0;i<l.link.length;i++)if("enclosure"==l.link[i].rel){n=l.link[i].href;break}var p="";if("category"in l)for(i=0;i<l.category.length;i++){var c=(p=l.category[i].term).lastIndexOf(";");-1!=c&&(p=p.substring(0,c)),postLabels[ii]=p,postTitle[ii]=a,postDate[ii]=r,postUrl[ii]=o,postMp3[ii]=n,postBaru[ii]=s<10,ii+=1}}}}(),sortPosts(sortBy="titleasc"),sortlabel(),tocLoaded=!0,displayToc2(),document.write()}function filterPosts(t){scroll(0,0),displayToc(postFilter=t)}function allPosts(){sortlabel(),displayToc(postFilter="")}function sortPosts(t){function e(t,e){var s=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=s;s=postDate[t];postDate[t]=postDate[e],postDate[e]=s;s=postUrl[t];postUrl[t]=postUrl[e],postUrl[e]=s;s=postLabels[t];postLabels[t]=postLabels[e],postLabels[e]=s;s=postMp3[t];postMp3[t]=postMp3[e],postMp3[e]=s;s=postBaru[t];postBaru[t]=postBaru[e],postBaru[e]=s}for(var s=0;s<postTitle.length-1;s++)for(var o=s+1;o<postTitle.length;o++)"titleasc"==t&&postTitle[s]>postTitle[o]&&e(s,o),"titledesc"==t&&postTitle[s]<postTitle[o]&&e(s,o),"dateoldest"==t&&postDate[s]>postDate[o]&&e(s,o),"datenewest"==t&&postDate[s]<postDate[o]&&e(s,o),"orderlabel"==t&&postLabels[s]>postLabels[o]&&e(s,o)}function sortlabel(){sortPosts(sortBy="orderlabel");for(var t=0,e=0;e<postTitle.length;){temp1=postLabels[e],firsti=t;do{t+=1}while(postLabels[t]==temp1);if(e=t,sortPosts2(firsti,t),e>postTitle.length)break}}function sortPosts2(t,e){function s(t,e){var s=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=s;s=postDate[t];postDate[t]=postDate[e],postDate[e]=s;s=postUrl[t];postUrl[t]=postUrl[e],postUrl[e]=s;s=postLabels[t];postLabels[t]=postLabels[e],postLabels[e]=s;s=postMp3[t];postMp3[t]=postMp3[e],postMp3[e]=s;s=postBaru[t];postBaru[t]=postBaru[e],postBaru[e]=s}for(var o=t;o<e-1;o++)for(var l=o+1;l<e;l++)postTitle[o]>postTitle[l]&&s(o,l)}function displayToc(t){var e=0,s="",o="Klik untuk sortir berdasarkan judul",l="Klik untuk Sortir bedasarkan tanggal",a="";"titleasc"==sortBy&&(o+=" (descending)",l+=" (newest first)"),"titledesc"==sortBy&&(o+=" (ascending)",l+=" (newest first)"),"dateoldest"==sortBy&&(o+=" (ascending)",l+=" (newest first)"),"datenewest"==sortBy&&(o+=" (ascending)",l+=" (oldest first)"),""!=postFilter&&(a="Klik untuk menampilkan 31"),s+="<table>",s+="<tr>",s+='<td class="toc-header-col1">',s+='<a href="javascript:toggleTitleSort();" title="'+o+'">Judul Artikel</a>',s+="</td>",s+='<td class="toc-header-col2">',s+='<a href="javascript:toggleDateSort();" title="'+l+'">Tanggal</a>',s+="</td>",s+='<td class="toc-header-col3">',s+='<a href="javascript:allPosts();" title="'+a+'">Kategori</a>',s+="</td>",s+='<td class="toc-header-col4">',s+="Download MP3",s+="</td>",s+="</tr>";for(var r=0;r<postTitle.length;r++)""==t?(s+='<tr><td class="toc-entry-col1"><a href="'+postUrl[r]+'">'+postTitle[r]+'</a></td><td class="toc-entry-col2">'+postDate[r]+'</td><td class="toc-entry-col3">'+postLabels[r]+'</td><td class="toc-entry-col4"><a href="'+postMp3[r]+'">Download</a></td></tr>',e++):(z=postLabels[r].lastIndexOf(t),-1!=z&&(s+='<tr><td class="toc-entry-col1"><a href="'+postUrl[r]+'">'+postTitle[r]+'</a></td><td class="toc-entry-col2">'+postDate[r]+'</td><td class="toc-entry-col3">'+postLabels[r]+'</td><td class="toc-entry-col4"><a href="'+postMp3[r]+'">Download</a></td></tr>',e++));if(s+="</table>",e==postTitle.length)var i='<span class="toc-note">Menampilkan Semua '+postTitle.length+" Artikel<br/></span>";else{i='<span class="toc-note">Menampilkan '+e+" artikel dengan kategori '";i+=postFilter+"' dari "+postTitle.length+" Total Artikel<br/></span>"}document.getElementById("toc").innerHTML=i+s}function displayToc2(){for(var t=0,e=0;e<postTitle.length;){temp1=postLabels[e],document.write("<p/>"),document.write('<span class="labl"><a href="/search/label/'+temp1+'">'+temp1+"</a></span><ol class='postname'>"),firsti=t;do{document.write("<li>"),document.write('<a href="'+postUrl[t]+'">'+postTitle[t]+"</a>"),1==postBaru[t]&&document.write(' - <span class="new">New!</span>'),document.write("</li>"),t+=1}while(postLabels[t]==temp1);if(e=t,document.write("</ol>"),sortPosts2(firsti,t),e>postTitle.length)break}}function toggleTitleSort(){sortPosts(sortBy="titleasc"==sortBy?"titledesc":"titleasc"),displayToc(postFilter)}function toggleDateSort(){sortPosts(sortBy="datenewest"==sortBy?"dateoldest":"datenewest"),displayToc(postFilter)}function showNewArtikel(){if(tocLoaded){displayToc(postFilter);document.getElementById("toclink")}else alert("Just wait... TOC is loading")}function hideToc(){document.getElementById("toc").innerHTML="",document.getElementById("toclink").innerHTML='<a href="#" onclick="scroll(0,0); showNewArtikel(); Effect.toggle(\'toc-result\',\'blind\');">?? Menampilkan Daftar Isi</a> <img src="https://sites.google.com/site/radiorodja2/new_1.gif"/>'}
   //]]>
   </script>
   <script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
   </div>

4. Terakhir Simpan/Publish.

Sekian bagaimana cara membuat halaman sitemap open source yang dapat saya bagikan, jika ada kesalahan dalam kode tersebut silahkan berkomentar agar saya dapat memperbaikinya, 

DEMO