Baru! Cara Membuat Sitemap Open Source Di Blogspot

Kareel Blog - Sitemap blog sangat penting untuk memberikan ruang informasi kepada pengunjung agar mengetahui seluruh daftar isi artikel pada blog. Bukan hanya memudahkan pengunjung bahkan dapat memberikan nilai positif ke SEO supaya isi artikel di blog cepat tampil atau terindex mesin pencarian. Sobat blogger, kali ini Kareel Blog akan membagikan tutorial Cara Baru Membuat Sitemap Open Source di Blogspot yang keren responsive dan juga cepat dalam Page Speed. Dengan adanya sitemap ini akan menjadi perhatian tersendiri di benak para pengunjung dan dapat membuat betah berlama-lama di blog.

Pada dasarnya dalam membuat sitemap ini tidak perlu menguasai bahasa pemrograman, tinggal salin kode lalu terapkan pada halaman sitemap blog sobat. Tapi jika sobat yang sudah mengetahui bahasa pemrograman HTML, CSS dan JS tepat sekali sobat menerapkan kode sitemap dibawah ini karena sudah Open Source jadi dapat diatur sesuka hati. Dilengkapi dengan Table Of Conent yang membuatnya semakin apik. Ok baik, langsung saja ke tutorial dibawah ini.

Baru! Cara Membuat Sitemap Open Source Di Blogspot

Berikut ini cara membuat sitemap open source di blogspot yang keren. Ikuti langkah demi langkah dibawah ini;

1. Masuk Dashboard Blogger
2. Pilih Halaman >> Halaman Baru maka sobat akan diarahkan ke form
3. Pada form Judul beri nama Sitemap
4. Pada form isi, Pilih mode HTML lalu SALIN kode HTML dibawah ini

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

   Salin kode HTML diatas, lalu TEMPELKAN ke form isi dalam mode HTML
5. Publish / Simpan Sitemap dan lihat hasilnya

Jika berhasil! maka akan tampil gambar seperti dibawah ini

Demikinlah turotial Cara Baru Membuat Sitemap Open Source di Blogspot Kareel Blog bagikan, semoga dapat bermanfaat untuk sobat blogger. Jika dirasa sangat bermanfaat silahkan bagikan ke teman sobat ya. Sekian dan Terimakasih see you next time.