Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogger

6 Cara Menciptakan Halaman Sitemap Otomatis Yang Seo Friendly Dan Keren Di Blogger



Cara Membuat Halaman Sitemap Blogger SEO Friendly di Blogger


Halaman Sitemap yaitu laman statis yang berisi daftar isi artikel di blog kita dan diurutkan menurut label,halaman ini bisa menambah kualitas SEO dari blog yang kita punya sebab memudahkan bot-crawl ketika melaksanakan perayapan melalui sitemap.xml.

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

Cara Membuat Halaman Sitemap Otomatis yang SEO Friendly


Baiklah berikut ini cara membuat halaman sitemap di blogger :

a. Cara Membuat Halaman Daftar Isi untuk VioMagz


Bila anda pengguna template VioMagz bergotong-royong 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 instruksi 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 ibarat 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 dipakai merupakan hasil modifikasi Mas Sugeng dari JavaScript buatan dte.web.id,yang sudah di sesuaikan dan dioptimalkan semoga cocok untuk Template VioMagz. Selain itu script ini tidak akan mengganggu skor SEO ataupun memperlambat loading blog.

Baca Juga : 6 Penyebab dan Cara Mengatasi Submit Sitemap Error di Google Webmaster atau Search Console

Untuk instruksi 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 menurut Label ala Arlina Design


Berikut ini yaitu cara membuat halaman sitemap ala Arlina Design,kalau instruksi yang satu ini cocok untuk dipakai di aneka macam jenis template sebab instruksi CSSnya akan kita pasang sendiri,bukan memakai 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 instruksi 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 menurut 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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdBb21mbMtq62Fli6EM75Q32HCz4fNn5d_bZYHM9ljOBnG8dGVUqDuuehtapA8bNgjsjw-MwsVTXOm83PyzP3tM3afoNDYek7nY9FOyqd2UsDaEmA5oDEAuD47mXl7HvnTk5wgGxBcb0c/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=" Cara Membuat Halaman Sitemap Otomatis yang SEO Friendly dan Keren di Blogger 6 Cara Membuat Halaman Sitemap Otomatis yang SEO Friendly dan Keren di Blogger"><a class="toc-title" href="'+ c+'" target="_blank" title="6 Cara Membuat Halaman Sitemap Otomatis yang SEO Friendly dan Keren di Blogger">'+ 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 hidangan Tema > Pilih Edit HTML
  • Lalu cari instruksi </head>
  • Setelah itu anda masukkan instruksi berikut sempurna 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgifMgZ7LeExGff6WgKKBkPxWW4XH3VGvsoinMixyFczfYg3sAVGljKTQWwOTV9Vky4Eh2Nk7-d674IqjGUn50YYdRL7kRmPVpnkot-UEX1YmKueVMvQ2dob0mLObggtbYStq_7Wk4logo/w220-h19-no/ajax-loader+%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 pola demonya di sini => Halaman Sitemap Ala Arlina Design

Baca Juga : Cara Membuat Warna Address Bar Berubah Mengikuti Warna Blog di Browser Mobile

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


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

Tentunya kita sudah tidak perlu mewaspadai script buatan Kode Jarwo,karena dengan memakai instruksi buatannya kita bisa dengan gampang membuat widget sitemap di halaman statis kita. Yang sudah teroptimasi semoga lebih SEO Friendly,Fast Loading dan sanggup 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 sempurna setelah instruksi 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 instruksi 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 dipakai 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 semoga 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 berjulukan Igniel ? ,dia populer dengan tutorial bloggingnya yang menarik dan kemampuan coding yang hebat,dan salah satu hal yang paling membuat para blogger terkesan yaitu 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 gampang diterima adses. Bahkan ada satu orang blogger yang iseng membuat blog gres tanpa artikel dan isi apapun hanya di pasangi template Igniplex kemudian di daftarkan ke Google Adsense. Dalam 1 x 24jam sudah di approved.

Tentu menakjubkan bukan?

Baiklah eksklusif 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 instruksi berikut sempurna 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 hidangan 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 yaitu tampilannya keren dan ada fitur dropdown,sehingga memudahkan pengunjung untuk menentukan daftar isi yang nanti muncul di halaman tersebut.

Baca Juga : Cara Mendaftarkan Blog / Situs Web ke Google News semoga Praktis Diterima dan Meningkatkan Visitor

Bila anda tertarik untuk memakai 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 ibarat IDNTHEME ala CodePelajar


Code Pelajar yaitu sebuah situs yang memperlihatkan tutorial seputar coding,blogger dan web. Anda bisa menemukan banyak tutorial menarik untuk memperindah tampilan blog yang anda miliki. Selain itu Code Pelajar juga mendapatkan 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 yaitu Tutorial membuat Halaman Sitemap ibarat IDNTHEME.

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


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


</style> atau </b:skin>


  • Lalu tempelkan instruksi berikut sempurna 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 instruksi berikut :


</head>


  • Lalu tempelkan instruksi pastekan instruksi berikut sempurna 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 hidangan 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 ibarat IDNTHEME ala Code Pelajar. Bila ingin melihat demonya bisa klik di sini => Sitemap SEO dan Keren ibarat IDNTHEME ala Code Pelajar

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


Nah yang terakhir yaitu tutorial untuk membuat halaman peta situs ibarat yang ada di blog Mas Tamvan,tahukah kalian? blog Mas Tamvan yaitu salah satu situs yang pertanda bahwa dengan memakai layanan gratos blogger saja ia sudah bisa membuatr blog yang terkenal.

Baca Juga : Algortima Google yang Baru di tahun 2019, Broadcore atau Floridina?

Bukan hanya hostingnya saja yang masih di blogger,untuk domain yang dipakai juga masih memakai blogspot yang merupakan sub-domain gratis dari blogger. Tentu saja itu berkat meningkatkan secara optimal SEO yang ia lakukan pada template yang di gunakan,artikel dan beberapa aspek lainnya.

Lalu bisakah kita membuat semoga blog kita lebih SEO ibarat Blog Mas Tamvan? tentu saja bisa ! ,bagaimana caranya? ada banyak cara yang harus kau lakukan. Salah satu perjuangan yang bisa kau mulai yaitu membuat halaman daftar isi yang seo di blog.

Berikut ini cara membuat 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 instruksi 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 menurut 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgifMgZ7LeExGff6WgKKBkPxWW4XH3VGvsoinMixyFczfYg3sAVGljKTQWwOTV9Vky4Eh2Nk7-d674IqjGUn50YYdRL7kRmPVpnkot-UEX1YmKueVMvQ2dob0mLObggtbYStq_7Wk4logo/w220-h19-no/ajax-loader+%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: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdBb21mbMtq62Fli6EM75Q32HCz4fNn5d_bZYHM9ljOBnG8dGVUqDuuehtapA8bNgjsjw-MwsVTXOm83PyzP3tM3afoNDYek7nY9FOyqd2UsDaEmA5oDEAuD47mXl7HvnTk5wgGxBcb0c/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=" Cara Membuat Halaman Sitemap Otomatis yang SEO Friendly dan Keren di Blogger 6 Cara Membuat Halaman Sitemap Otomatis yang SEO Friendly dan Keren di Blogger" title="6 Cara Membuat Halaman Sitemap Otomatis yang SEO Friendly dan Keren di Blogger"><a class="toc-title" href="' + c + '" target="_blank" title="6 Cara Membuat Halaman Sitemap Otomatis yang SEO Friendly dan Keren di Blogger">' + 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


Praktis bukan? anda tidak perlu melaksanakan edit HTML melalui hidangan tema di blog kalian,hanya cukup memasang instruksi diatas eksklusif di hidangan editor HTML halaman kalian dan publish,anda sudah selesai membuat halaman sitemap seo friendly ala mas tamvan.

Untuk Demo bisa cek di sini => Halaman Sitemap Blogger SEO dan Keren ala Mas Tamvan


Penutup


Itulah cara membuat halaman sitemap seo friendly dan keren di blogger,anda bisa menentukan 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.


Baca Juga : Cara Daftar Baru dan Registrasi Ulang Kartu Prabayar Melalui Online atau SMS Semua Operator 2019

Pastikan anda sudah mengikuti dengan benar setiap langkah yang ada dalam pemasang kode-kode tersebut,karena setiap tutorial mempunyai cara pemasangan yang berbeda,jadi semoga widget peta situs sanggup muncul dan bekerja dengan baik anda dilarang salah dalam memasangnya.

Selamat Mencoba.
Sumber https://www.dirga.id/