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.

Artikel Terkait

41 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • ShareStudy
    19/1/22
    Profil: https://www.blogger.com/profile/04361708611176575161
    Uncaught TypeError: Cannot read properties of undefined (reading 'length')

    https://www.sharestudy.in/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=

    How to Fix This Issue
  • Yuli Rohani
    3/4/21
    Profil: https://www.blogger.com/profile/18036310932579058107
    keren kak sitemapnya, ijin pakai diblog pribadi ya
  • Heri Widodo
    27/11/20
    Profil: https://www.blogger.com/profile/06279568190471616151
    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
  • Kenny
    12/9/20
    Profil: https://www.blogger.com/profile/10370803106973294603
    Min tolog dong buat daftar isi/sitemap seperti meownime contohnya ini https://meownime.ltd/anime-list-baru/ tapi untuk blogger.

    Aku 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.
  • IKENNA
    2/8/20
    Profil: https://www.blogger.com/profile/17035725839034666640
    Working perfectly .Thank You
  • w h i t e
    6/7/20
    Profil: https://www.blogger.com/profile/09465367043077359980
    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.
  • Dimas Anggoro Saputro
    21/6/20
    Profil: https://www.blogger.com/profile/03298321852583536965
    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
  • HabibSH
    10/5/20
    Profil: https://www.blogger.com/profile/13506737370216205058
    mba ignie kenapa sitemap saya mengarah ke punya anda yah
    • Igniel
      12/5/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Perhatikan, dalam script ada alamat blog www.igniel.com. Ganti dengan alamat blog masing-masing.
  • Ridhal
    12/4/20
    Profil: https://www.blogger.com/profile/12283061923496054504
    Ini cuma yang pake tamplate igniel aja yg bisa ya?
    • Igniel
      12/5/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Semua template dan blog bisa.

      Perhatikan, dalam script ada alamat blog www.igniel.com. Ganti dengan alamat blog masing-masing.
  • Saif Ghofur
    29/2/20
    Profil: https://www.blogger.com/profile/04924137136364466463
    Mantap
  • Zatnika
    8/2/20
    Profil: https://www.blogger.com/profile/16685156825123852124
    Ko Loading terus ya mba ??
    • Igniel
      12/5/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      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.
  • Nonton198
    21/12/19
    Profil: https://www.blogger.com/profile/00178241616923355478
    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.
    • Wahyuddin Rosi
      23/12/19
      Profil: https://www.blogger.com/profile/11987960097394341096
      script nya jalan...cuma ketika ganti URL ngak bisa...
    • Igniel
      12/5/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ganti URL atau proses edit lainnya dilakukan di notepad. Abis itu langsung copas ke editor Blogger dan jangan edit apa-apa lagi, langsung publish.
  • Mas Tris
    25/11/19
    Profil: https://www.blogger.com/profile/16737817068415954951
    mbak igniel, request dong, buatin sitemap dropdown tapi hanya kategori yang pilih dipilih saja...
  • Admin
    13/11/19
    Profil: https://www.blogger.com/profile/13572341428882876996
    Gak bisa...
  • Rizal.amrr(ZLiAN)
    1/11/19
    Profil: https://www.blogger.com/profile/04707934397452869179
    maaf gan, ini kok cuma loading ya? https://pmrsmansapmk.blogspot.com/p/sitemap.html
  • Wahyuddin Rosi
    27/9/19
    Profil: https://www.blogger.com/profile/11987960097394341096
    ada yang sudah berhasil??
    • Mas Tris
      25/11/19
      Profil: https://www.blogger.com/profile/16737817068415954951
      sdh, langsung bisa....
  • Anonim
    Anonim 14/9/19
    Mbak Ignil, bisa gak minta tolong bikinin Sitemap model kayak ini:
    https://awsubs.tv/anime/?list
    • Igniel
      14/9/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sitemap dengan navigasi per huruf udah ada.
      https://www.igniel.com/2019/02/sitemap-daftar-isi-navigasi-per-huruf.html
  • InYourDream
    19/7/19
    Profil: https://www.blogger.com/profile/15424191361649530799
    Boleh tau ini fungsinya buat apa?
    masih noob hehe ;)
    • Igniel
      19/7/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Buat menampilkan semua artikel blog (daftar isi).
    • InYourDream
      19/7/19
      Profil: https://www.blogger.com/profile/15424191361649530799
      Hmm,kira2 pengaruh gak sama ondex google?
    • Igniel
      21/7/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Gak ada hubungannya sama index Google.
  • Merman Gian
    6/5/19
    Profil: https://www.blogger.com/profile/08060966122032459248
    Tidak ada warnanya. cek : https://www.riau.work/p/sitemap.html
    • Igniel
      6/5/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Salah nyimpen kode CSS. Simpen di dalam tag kondisional halaman post.
  • Sahabatinet
    6/3/19
    Profil: https://www.blogger.com/profile/14174592092777608077
    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?
    • Igniel
      6/3/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Nggak bisa. Tampilan akan disusun alfabetis.

      Kalau mau 1 label pakai ini.
      https://www.igniel.com/2019/02/sitemap-daftar-isi-satu-label.html
  • Gusmiar Aplikasi
    3/3/19
    Profil: https://www.blogger.com/profile/01970055190385721164
    tetep nggak berfungsi setelah di ganti bagian url
  • Liputan Berita 21
    2/3/19
    Profil: https://www.blogger.com/profile/15875843550709818017
    tidak berfungsi waktu saya publish malah buka ke sitemap igniel
    • Igniel
      2/3/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Lihat di bagian sini
      i.src="https://www.igniel.com/feeds/posts/summary

      Ganti 'www.igniel.com' dengan alamat blog sendiri.
    • Liputan Berita 21
      20/3/19
      Profil: https://www.blogger.com/profile/15875843550709818017
      masih gak bisa
    • Liputan Berita 21
      20/3/19
      Profil: https://www.blogger.com/profile/15875843550709818017
      mbak di blog saya sudah ada sitemap lain, penyebab nya itu bkn mbak sehingga sitemap punya mbak rain gak bisa di blog saya
    • Dop tutorial
      9/1/20
      Profil: https://www.blogger.com/profile/06305612150213528802
      Sama ga work
  • Unknown
    19/1/19
    Profil: https://www.blogger.com/profile/05841916643334556511
    cara ganti warna nya gimana mba
    • Igniel
      19/1/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Cari property yang bernama 'background', 'background-color', atau 'color' dan ganti value-nya sesuai keinginan.
  • Agrey Tosira
    2/1/19
    Profil: https://www.blogger.com/profile/14514416159394957177
    Sangat bermanfaat, Izin ganti warna sesuai tema blog saya :D