√5 Cara Membuat Halaman Sitemap Otomatis yang SEO Friendly dan Keren di Blogger - dirga.id

5 Cara Membuat Halaman Sitemap Otomatis yang SEO Friendly dan Keren di Blogger

Pembuka Tutorial Membuat Halaman Sitemap

cara-membuat-halaman-sitemap-blogger
Cara Membuat Halaman Sitemap Blogger SEO Friendly


Halaman Sitemap adalah laman statis yang berisi daftar isi artikel di blog kita dan diurutkan berdasarkan label,halaman ini bisa menambah kualitas SEO dari blog yang kita punya karena memudahkan bot-crawl saat melakukan perayapan melalui sitemap.xml.

Selain itu,dengan adanya halaman peta situs pengunjung juga lebih mudah memilih dan menemukan daftar artikel yang ada di blog kita,sehingga mereka lebih senang untuk berlama-lama di blog kita.

Baiklah berikut ini cara membuat halaman sitemap di blogger :

Cara Membuat Halaman Sitemap Otomatis yang SEO Friendly


a. Cara Membuat Halaman Daftar Isi untuk VioMagz


Bila anda pengguna template VioMagz sebenarnya Mas Sugeng sudah menyediakan tutorial untuk membuat halaman sitemap,namun mungkin anda belum " -ngeh " ,karena di dalam tutorialnya Mas Sugeng menyebut ini sebagai widget daftar isi. Bila anda ingin melihat tutorial aslinya bisa cek di sini => Cara Memasang Widget Daftar Isi di Halaman Statis Template VioMagz

Namun anda juga bisa melihat tutorialnya di bawah ini :

  • Pertama anda masuk ke akun blogger anda
  • Pilih Menu Halaman
  • Buat Halaman Baru
  • Lalu anda beri judul " Sitemap " , " Daftar Isi " atau " Peta Situs " terserah anda lebih menyukai mana
  • Lalu ubah editor postingan dari " Compose " menjadi " HTML
  • Lalu anda masukkan kode berikut ini :

<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
    blogUrl: "https://www.viomagz.com/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: true, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: true, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 60, // 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="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>


  • Bila sudah klik Publikasikan
  • Sebenarnya untuk settingan seperti ini sudah cukup dan halaman sitemap sudah bisa diakses,namun bila anda ingin mengaturnya dengan lengkap bisa cek artikel saya berikut => Cara membuat halaman sitemap blogger di VioMagz
Script yang digunakan merupakan hasil modifikasi Mas Sugeng dari JavaScript buatan dte.web.id,yang sudah di sesuaikan dan dioptimalkan agar cocok untuk Template VioMagz. Selain itu script ini tidak akan mengganggu skor SEO ataupun memperlambat loading blog.

Untuk kode ini saya belum pernah mencoba menggunakannya di template blogger selain VioMagz,jadi bila anda buka pengguna template ini silahkan ikuti tutorial dibawah ini.

Anda bisa melihat Demo dari Halaman Sitemap VioMagz ini di sini => Daftar Isi Dirga.id

b. Cara Membuat Halaman Sitemap berdasarkan Label ala Arlina Design


Berikut ini adalah cara membuat halaman sitemap ala Arlina Design,kalau kode yang satu ini cocok untuk digunakan di berbagai jenis template karena kode CSSnya akan kita pasang sendiri,bukan menggunakan script yang sudah include di dalam template. Baiklah berikut ini caranya :


  • Masuk ke Akun Blogger
  • Pilih Menu Halaman
  • Buat Halaman Baru
  • Lalu beri Judul Sesuai Keinginan Anda
  • Lalu ganti mode editor dari Compose menjadi HTML
  • Lalu masukkan kode berikut ini :


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


  • Bila Sudah klik Publikasikan / Publish
  • Sekarang anda buka menu Tema > Pilih Edit HTML
  • Lalu cari kode </head> 
  • Setelah itu anda masukkan kode berikut tepat diatasnya

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


  • Bila sudah silahkan anda klik Simpan Tema
Itulah cara membuat halaman sitemap di blogger ala Arlina Design,anda bisa melihat contoh demonya di sini => Halaman Sitemap Ala Arlina Design

c. Cara Membuat Sitemap Otomatis di Halaman Statis ala Kode Jarwo


Sudah kenal dengan Blog Kode Jarwo dan si empunya Ozik Jarwo yang sudah terkenal sebagai mastahnya membuat blog menjadi fast loading dan mendapat skor hijau di Google PageSpeed Insight dan GT Metrix.

Tentunya kita sudah tidak perlu meragukan script buatan Kode Jarwo,karena dengan menggunakan kode buatannya kita bisa dengan mudah menciptakan widget sitemap di halaman statis kita. Yang sudah teroptimasi agar lebih SEO Friendly,Fast Loading dan dapat Update Secara Otomatis.


  • Masuk ke Akun Blogger Anda
  • Buka Blog Anda
  • Pilih Menu Tema
  • Klik Edit HTML
  • Lalu Cari Kode Berikut


<head>


  • Lalu Copy Kode berikut dan Tempelkan tepat sesudah kode yang pertama tadi


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


  • Bila Sudah klik Simpan Tema
  • Buka Menu Halaman
  • Klik Halaman Baru
  • Silahkan Beri Judul " Sitemap " " Peta Situs " " Daftar Isi " atau yang lainnya
  • Ubah mode editor dari Compose menjadi HTML
  • Lalu Tempelkan kode berikut :


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


  • Bila sudah,Klik Publikasikan / Publish


Itulah cara membuat sitemap blogger yang SEO ala Kode Jarwo,script yang digunakan sudah di compress sehingga tidak akan memberatkan loading blog anda. Selain itu tampilannya juga modern dan kekinian. Tentu cocok untuk kalian yang menyukai tampilan keren agar blog disukai oleh pengunjung.

Untuk kalian yang ingin melihat demo dari tampilan widget sitemap Kode Jarwo bisa cek di sini => Halaman Sitemap ala Kode Jarwo


d. Cara Membuat Halaman Sitemap SEO dengan Dropdown ala Igniel


Sudah tahu dengan Blogger Perempuan yang jago coding bernama Igniel ? ,dia terkenal dengan tutorial bloggingnya yang menarik dan kemampuan coding yang hebat,dan salah satu hal yang paling membuat para blogger terkesan adalah template blogger buatanya yaitu Igniplex,selain mempunyai tampilan keren,tema blogger ini juga sudah SEO Friendly dan Fast Loading.

Beberapa penggunanya juga mengungkapkan bahwa setelah memasang Igniplex di blog,situs mereka mudah diterima adses. Bahkan ada satu orang blogger yang iseng membuat blog baru tanpa artikel dan isi apapun hanya di pasangi template Igniplex lalu di daftarkan ke Google Adsense. Dalam 1 x 24jam sudah di approved.

Tentu menakjubkan bukan?

Baiklah langsung saja,menuju tutorial cara membuat halaman sitemap dropdown ala Igniel yang SEO Friendly,berikut caranya :


  • Buka Blogger
  • Lalu Masuk ke Akun Anda
  • Pilih Menu Tema di Dashhboard Blogger Anda
  • Klik Edit HTML
  • Cari Kode Berikut :

</style>


  • Tempelkan kode berikut tepat di Atasnya


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


  • Bila sudah klik Simpan Tema
  • Lalu Buka menu Halaman
  • Pilih Halaman Baru
  • Beri Judul " Sitemap " " Peta Situs " " Daftar Isi " atau apapun yang anda mau
  • Ubah mode editor dari Compose menjadi HTML
  • Lalu Masukkan Kode 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>


  • Bila Sudah klik Publish / Publikasikan


Itulah cara membuat halaman sitemap blogger ala Igniel, yang membuat sitemap ala Igniel unggul adalah tampilannya keren dan ada fitur dropdown,sehingga memudahkan pengunjung untuk memilih daftar isi yang nanti muncul di halaman tersebut.

Bila anda tertarik untuk menggunakan template ini maka pastikan bahwa blog anda sudah terpasang jQuery,bila belum silahkan anda memasangnya terlebih dahulu.

Untuk demonya anda bisa cek di sini => Sitemap SEO Friendly dengan Dropdown ala Igniel

e. Cara Membuat Halaman Sitemap Blogger seperti IDNTHEME ala CodePelajar

Code Pelajar adalah sebuah situs yang memberikan tutorial seputar coding,blogger dan web. Anda bisa menemukan banyak tutorial menarik untuk memperindah tampilan blog yang anda miliki. Selain itu Code Pelajar juga menerima jasa custo, template yang cocok untuk kalian bila ingin mempunyai tampilan blog yang berbeda dari orang lain.

Selain itu admin dari Code Pelajar juga menerimka request tutorial seputar coding dan blogging,dan salah satu request dari pengunjung yang sudah mereka wujudkan adalah Tutorial membuat Halaman Sitemap mirip IDNTHEME.

Bila anda belum mengetahuinya,maka disini saya akan menerangkan cara membuat halaman sitemap blogger yang seoo dan keren ala Code Pelajar.


  • Buka akun Blogger Anda
  • Pilih Menu Tema di Dashboard Blogger
  • Klik Edit HTML
  • Lalu cari kode berikut :

</style> atau </b:skin>


  • Lalu tempelkan kode berikut tepat di atasnya :


/* Sitemap - Codepelajar.com */
.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:bold;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:normal;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}}
  


  • Setelah itu anda cari kode berikut :


</head>


  • Lalu tempelkan kode pastekan kode berikut tepat di atasnya :


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


  • Bila sudah klik Simpan Tema
  • Buka Menu Halaman
  • Klik Halaman Baru
  • Beri Judul " Sitemap "
  • Lalu ubah menu editor dari Compose jadi HTML
  • Dan Pastekan Kode Berikut :


[sitemap]


  • Bila sudah anda klik Publish / Publikasikan


Itulah tutorial cara membuat halaman sitemap blogger yang keren dan seo friendly mirip IDNTHEME ala Code Pelajar. Bila ingin melihat demonya bisa klik di sini => Sitemap SEO dan Keren seperti IDNTHEME ala Code Pelajar

d. Cara Membuat Halaman Sitemap SEO Friendly dan Keren ala Blog Mas Tamvan

Nah yang terakhir adalah tutorial untuk membuat halaman peta situs seperti yang ada di blog Mas Tamvan,tahukah kalian? blog Mas Tamvan adalah salah satu situs yang membuktikan bahwa dengan menggunakan layanan gratos blogger saja dia sudah bisa membuatr blog yang terkenal.

Bukan hanya hostingnya saja yang masih di blogger,untuk domain yang digunakan juga masih menggunakan blogspot yang merupakan sub-domain gratis dari blogger. Tentu saja itu berkat optimasi SEO yang dia lakukan pada template yang di gunakan,artikel dan beberapa aspek lainnya.

Lalu bisakah kita membuat agar blog kita lebih SEO seperti Blog Mas Tamvan? tentu saja bisa ! ,bagaimana caranya? ada banyak cara yang harus kamu lakukan. Salah satu usaha yang bisa kamu mulai adalah membuat halaman daftar isi yang seo di blog.

Berikut ini car amembuat halaman sitemap blogger seo friendly ala Mas Tamvan :


  • Buka Blogger
  • Masuk ke Menu Halaman
  • Klik Halaman Baru
  • Beri nama " Sitemap " atau " Daftar Isi "
  • Lalu ubah mode editor dari Compose menjadi Edit HTML
  • Masukkan kode berikut ini :


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


  • Bila sudah klik Publish / Publikasikan
Mudah bukan? anda tidak perlu melakukan edit HTML melalui menu tema di blog kalian,hanya cukup memasang kode diatas langsung di menu editor HTML halaman kalian dan publish,anda sudah selesai membuat halaman sitemap seo friendly ala mas tamvan.


Penutup


Itulah cara membuat halaman sitemap seo friendly dan keren di blogger,anda bisa memilih mana yang paling cocok dan anda sukai,tentunya halaman peta situs ini akan sangat berperang penting untuk kebutuhan SEO blog anda,selain itu ini akan memudahkan pengunjung untuk meliha dafta isi artikel yang ada di blog anda.

Pastikan anda sudah mengikuti dengan benar setiap langkah yang ada dalam pemasang kode-kode tersebut,karena setiap tutorial memiliki cara pemasangan yang berbeda,jadi agar widget peta situs dapat muncul dan bekerja dengan baik anda tidak boleh salah dalam memasangnya.

Selamat Mencoba.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel