9 Langkah untuk membuat sitemap di blogger


Selamat malam semuanya, update kali ini saya akan share mengenai cara membuat sitemap pada blog kalian masing-masing. Adanya sitemap ini sangatlah penting dalam blog kalian, selain menambah estetika sitemap juga memudahkan visitor untuk mengetahui konten apa saja yang telah kalian posting di blog tersebut.

Berikut langkah-langkah yang saya lakukan untuk menambahkan sitemap di blog saya, menggunakan blogger/blogspot milik google:

1. Buka dashboard blogger kalian masing-masing, tampilannya seperti di bawah ini
dashboard blogger


2. Buka laman atau dalam bahasa inggris page.
dashboard page

3. Buatlah Laman baru/new page kalian akan diarahkan ke tampilan seperti membuat postingan.
page make post

4. Isilah bagian judul dengan "Sitemap" dan pilih mode penulisan ke HTML dan tambahkan code berikut.
<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
//<![CDATA[
ol li{list-style-type:decimal;line-height:25px;} </style> <script>
var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link">
<a href="http://helplogger.blogspot.com/2013/12/add-sitemap-table-of-contents-to-blogger.html" style="font-size: 10px; text-decoration:none; color: #5146CD;">Get This Widget</a></div>
')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="
<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr> ";for(var g=0;g<postTitle.length;g++){if(a==""){h+=' <tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr> ';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+=' <tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr> ';l++}}}h+="</table> ";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"> <a href="/search/label/'+temp1+'">'+temp1+"</a></p> <ol>");firsti=a;do{document.write(" <li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></strong>')}document.write("</li> ");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>
");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Display Table of Contents</a> <img src="http://1.bp.blogspot.com/-_VZwBpHw_SI/UrXvLbFxacI/AAAAAAAAFiQ/ZGqWZUZesCI/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}}; //]]> </script>
<script src="http://balideveloper.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>
5. Ganti code bagian terakhir yang berisi http://balideveloper.blogspot.com dengan nama blog kalian masing-masing.

6. Sekarang kalian akan memasukkan link dari page tersebut ke blog kalian agar bisa tinggal klik saja di blog kita. Silakan publishkan dan save. Selanjutnya untuk melihat alamat halaman tersebut, silakan klik lihat.
dashboard page blogger
7. Kalian akan di arahkan ke new tab dan akan keliatan sitemap kalian, punya saya tampilannya seperti dibawah ini.
sitemap balidev
8. Silakan kalian tambahkan urlnya ke halaman blog kalian caranya:

  • Masuk ke dashboard blogger
  • Pilih Template kemudian edit html
dashboard template blogger

9.Tinggal kalian tambahkan letak shortcut untuk menuju ke halamat sitemapnya. Dibawah ini contoh yang saya gunakan.
add sitemap to html


Update Sabtu, 4 Februari 2017

Script baru untuk membuat sitemap, saya langsung kasi gambarnya saja penampakannya kayak gimana silahkan liat di bawah ini:
Sitemap update 4 Februari 2017
Sitemap Baru
Langsung saja untuk scriptnya agan copy paste yang di bawah ini:
<div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="" type="text/css">

        .table-of-content{background-color:#222;color:#ddd;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.1)}

        .table-of-content .toc-header{color:#fff;font-family:inherit;font-weight:400;font-size:14px;background-color:#333;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-top:1px solid #444;border-bottom:1px solid #222;transition:initial}

        .table-of-content .toc-header:hover{background-color:#3a3a3a}

        .table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}

        .table-of-content .toc-header.active{background:#3a3a3a;color:#fff}

        .table-of-content .toc-header.active:before{border-color:#fff transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}

        .table-of-content .loading{display:block;padding:15px;text-decoration:blink}

        .table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}

        .table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#222!important;transition:initial}

        .table-of-content a{color:#FFFFFF;text-decoration:none;font-size:86%;transition:initial}

        .table-of-content a:visited{color:#FFFFFF;transition:initial}

        .table-of-content a:hover,.table-of-content a:visited:hover{color:#fff;text-decoration:none;transition:initial}

        .post ol li:before{display:none}

        </style>


        <br />
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>

        var toc_config = {

            url: 'http://www.balideva.com/',

            containerId: 'table-of-content',

            showNew: 15,

            newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#009fef;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',

            sortAlphabetically: {

                thePanel: true,

                theList: true

            },

            maxResults: 9999,

            activePanel: 1,

            slideSpeed: {

                down: 400,

                up: 400

            },

            slideEasing: {

                down: null,

                up: null

            },

            slideCallback: {

                down: function() {},

                up: function() {}

            },

            clickCallback: function() {},

            jsonCallback: '_toc',

            delayLoading: 0

        };

        </script>

        <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>

        </div>


Baik sekian tutorialnya, semoga kalian paham dan saya pun jadi senang. hehehe
Jika ada yang kurang, silakan kalian tambahkan di kolom komentar untuk segera saya update.
Ala Bisa Karena Terbiasa

Artikel Terkait

9 komentar

emang sitemao fungsinya apa ya gan ?

informasinya membantu sekali...

untuk membuat daftar isi postingan kita gan

biasanya sitemap udah otomatis ada di blogspot atau wordpress dg url /sitemap.xml

Kalau ini saya ngerti gan, tapi caranya sitemap di google webmaster saya belum ngerti

nah iya itu, sitemap bisa meningkatkan trafik ga gan ?

bukan meningkatkan trafik sih gan, lebih ke kenyamanan pengunjung dan memudahkan kita untuk mencari postingan


EmoticonEmoticon