Sitemap (Daftar Isi) Blogger di Halaman Statis Berdasarkan Label dengan Menu Dropdown

Membuat Daftar Isi (Sitemap) di Blog Berdasarkan Label dengan Menu Dropdown

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

Cara Membuat Daftar Isi Blogger Berdasarkan Label Kategori



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>
Cara Membuat Sitemap Model Dropdown di Halaman Statis Blogspot

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.

SHARE Pin Share
Artikel Terkait
36 komentar
  1. Sangat bermanfaat, Izin ganti warna sesuai tema blog saya :D

    BalasHapus
  2. cara ganti warna nya gimana mba

    BalasHapus
    Balasan
    1. Cari property yang bernama 'background', 'background-color', atau 'color' dan ganti value-nya sesuai keinginan.

      Hapus
  3. tidak berfungsi waktu saya publish malah buka ke sitemap igniel

    BalasHapus
    Balasan
    1. Lihat di bagian sini
      i.src="https://www.igniel.com/feeds/posts/summary

      Ganti 'www.igniel.com' dengan alamat blog sendiri.

      Hapus
    2. mbak di blog saya sudah ada sitemap lain, penyebab nya itu bkn mbak sehingga sitemap punya mbak rain gak bisa di blog saya

      Hapus
  4. tetep nggak berfungsi setelah di ganti bagian url

    BalasHapus
  5. kalau 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?

    BalasHapus
    Balasan
    1. Nggak bisa. Tampilan akan disusun alfabetis.

      Kalau mau 1 label pakai ini.
      https://www.igniel.com/2019/02/sitemap-daftar-isi-satu-label.html

      Hapus
  6. Tidak ada warnanya. cek : https://www.riau.work/p/sitemap.html

    BalasHapus
    Balasan
    1. Salah nyimpen kode CSS. Simpen di dalam tag kondisional halaman post.

      Hapus
  7. Boleh tau ini fungsinya buat apa?
    masih noob hehe ;)

    BalasHapus
    Balasan
    1. Buat menampilkan semua artikel blog (daftar isi).

      Hapus
    2. Hmm,kira2 pengaruh gak sama ondex google?

      Hapus
    3. Gak ada hubungannya sama index Google.

      Hapus
  8. Mbak Ignil, bisa gak minta tolong bikinin Sitemap model kayak ini:
    https://awsubs.tv/anime/?list

    BalasHapus
    Balasan
    1. Sitemap dengan navigasi per huruf udah ada.
      https://www.igniel.com/2019/02/sitemap-daftar-isi-navigasi-per-huruf.html

      Hapus
  9. maaf gan, ini kok cuma loading ya? https://pmrsmansapmk.blogspot.com/p/sitemap.html

    BalasHapus
  10. mbak igniel, request dong, buatin sitemap dropdown tapi hanya kategori yang pilih dipilih saja...

    BalasHapus
  11. bagi 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.

    BalasHapus
    Balasan
    1. script nya jalan...cuma ketika ganti URL ngak bisa...

      Hapus
    2. Ganti URL atau proses edit lainnya dilakukan di notepad. Abis itu langsung copas ke editor Blogger dan jangan edit apa-apa lagi, langsung publish.

      Hapus
  12. Ko Loading terus ya mba ??

    BalasHapus
    Balasan
    1. Kalai loading terus berarti ada yang salah dalam prosesnya.

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

      Hapus
  13. Ini cuma yang pake tamplate igniel aja yg bisa ya?

    BalasHapus
    Balasan
    1. Semua template dan blog bisa.

      Perhatikan, dalam script ada alamat blog www.igniel.com. Ganti dengan alamat blog masing-masing.

      Hapus
  14. mba ignie kenapa sitemap saya mengarah ke punya anda yah

    BalasHapus
    Balasan
    1. Perhatikan, dalam script ada alamat blog www.igniel.com. Ganti dengan alamat blog masing-masing.

      Hapus
  15. Saya tidak berhasil mbak. Cek ke URL https://codepen.io/igniel/full/eLmNzR itu juga tulisannya "Loading..." aja, gak muncul sitemap dari blog mbak Ignieal

    BalasHapus
  16. saya 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.

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

    BalasHapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!