
Sitemap adalah daftar isi blog yang dapat memudahkan pengunjung untuk memilih artikel berdasarkan label atau kategori. Seperti halnya buku, dalam blog pun diperlukan sebuah navigasi layaknya daftar isi agar pengunjung bisa menjelajah semua konten yang ada. Sitemap berguna seperti peta yang membantu pengunjung agar tidak tersesat. Langsung saja ya ke tutorial cara membuat daftar isi otomatis di Blogger berdasarkan label / kategori.
Cara Membuat Sitemap SEO Friendly di Halaman Statis Blogger
Tambahkan kode ini "SEBELUM / DI ATAS" </style>
.
/* 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;}
Pastikan kamu sudah memasang library jQuery terlebih dulu. Lalu buat sebuah page atau halaman statis baru dengan mengakses menu Pages
(Halaman) » New page
(Halaman baru).

Berikan judul, pilih mode HTML
, copy semua kode dibawah ke dalam text editor dan klik tombol Publish.
<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>

Hasil akhirnya bisa dilihat disini.
Sekian script dan tutorial mengenai cara membuat sitemap otomatis dan SEO friendly di Blogspot. Langsung praktek ya biar blog kamu makin keren.
Sangat bermanfaat, Izin ganti warna sesuai tema blog saya :D
BalasHapuscara ganti warna nya gimana mba
BalasHapusCari property yang bernama 'background', 'background-color', atau 'color' dan ganti value-nya sesuai keinginan.
Hapustidak berfungsi waktu saya publish malah buka ke sitemap igniel
BalasHapusLihat di bagian sini
Hapusi.src="https://www.igniel.com/feeds/posts/summary
Ganti 'www.igniel.com' dengan alamat blog sendiri.
masih gak bisa
Hapusmbak di blog saya sudah ada sitemap lain, penyebab nya itu bkn mbak sehingga sitemap punya mbak rain gak bisa di blog saya
HapusSama ga work
Hapustetep nggak berfungsi setelah di ganti bagian url
BalasHapuskalau labelnya ditentukan bisa gak Kak? contoh saya ingin buat label Kota trs bawah e aku buat label jenis kelamin, trs label pekerjaan dst gitu bisa gak?
BalasHapusNggak bisa. Tampilan akan disusun alfabetis.
HapusKalau mau 1 label pakai ini.
https://www.igniel.com/2019/02/sitemap-daftar-isi-satu-label.html
Tidak ada warnanya. cek : https://www.riau.work/p/sitemap.html
BalasHapusSalah nyimpen kode CSS. Simpen di dalam tag kondisional halaman post.
HapusBoleh tau ini fungsinya buat apa?
BalasHapusmasih noob hehe ;)
Buat menampilkan semua artikel blog (daftar isi).
HapusHmm,kira2 pengaruh gak sama ondex google?
HapusGak ada hubungannya sama index Google.
HapusMbak Ignil, bisa gak minta tolong bikinin Sitemap model kayak ini:
BalasHapushttps://awsubs.tv/anime/?list
Sitemap dengan navigasi per huruf udah ada.
Hapushttps://www.igniel.com/2019/02/sitemap-daftar-isi-navigasi-per-huruf.html
ada yang sudah berhasil??
BalasHapussdh, langsung bisa....
Hapusmaaf gan, ini kok cuma loading ya? https://pmrsmansapmk.blogspot.com/p/sitemap.html
BalasHapusGak bisa...
BalasHapusmbak igniel, request dong, buatin sitemap dropdown tapi hanya kategori yang pilih dipilih saja...
BalasHapusbagi yang tidak bisa menjalankan scriptnya, saya kasih saran : setelah di copas langsung publish jangan di klik compose karena akan merusak script. Bagi admin tolong buat penjelasannya.
BalasHapusscript nya jalan...cuma ketika ganti URL ngak bisa...
HapusGanti URL atau proses edit lainnya dilakukan di notepad. Abis itu langsung copas ke editor Blogger dan jangan edit apa-apa lagi, langsung publish.
HapusKo Loading terus ya mba ??
BalasHapusKalai loading terus berarti ada yang salah dalam prosesnya.
HapusEdit dulu URL www.igniel.com yang ada di dalam script di notepad. Abis itu copas ke editor Blogger dan jangan edit apa-apa di sana. Langsung publish aja.
Mantap
BalasHapusIni cuma yang pake tamplate igniel aja yg bisa ya?
BalasHapusSemua template dan blog bisa.
HapusPerhatikan, dalam script ada alamat blog www.igniel.com. Ganti dengan alamat blog masing-masing.
mba ignie kenapa sitemap saya mengarah ke punya anda yah
BalasHapusPerhatikan, dalam script ada alamat blog www.igniel.com. Ganti dengan alamat blog masing-masing.
HapusSaya tidak berhasil mbak. Cek ke URL https://codepen.io/igniel/full/eLmNzR itu juga tulisannya "Loading..." aja, gak muncul sitemap dari blog mbak Ignieal
BalasHapussaya mau nanya mba, mungkin agak OOT tapi kok setelah saya bikin page baru dengan judul sitemap dan saya cek url-nya kok jadi /p/sitemap_20.html (ada angka 20-nya) setelah mencoba beberapa kali tetep masih ada angka-nya (angkanya ganti-ganti), sebelum-nya juga seperti itu. saya juga sudah beberapa kali ganti sitemap.
BalasHapusPS.
- tutorial dari website ini works fine dan tidak ada masalah karna sudah saya coba.
- masalah diatas hanya masalah pribadi dan tidak ada hubungan-nya dengan tutorial blog ini.
Working perfectly .Thank You
BalasHapusMin tolog dong buat daftar isi/sitemap seperti meownime contohnya ini https://meownime.ltd/anime-list-baru/ tapi untuk blogger.
BalasHapusAku udah buat https://afterscarlet.blogspot.com/p/list.html tapi loadingnya lama gak kaya meownime, emang beberapa udah aku modif karena keterbatasan platfrom blogger dibanding wordpress.
atau ada saran gak biar loadingnya cepet gitu.
Terima kasih min.
mau tanya mbak di html saya tidak ada "style", jadi CSS nya saya taroh di atas ]]>. permasalahannya sitemapnya tidak muncul (tulisan Loading saja), mohon sarannya mbak. bisa cek di https://chordsofsong.blogspot.com/p/sitemap.html
BalasHapus