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

Cara membuat sitemap atau daftar isi otomatis di halaman statis Blogger dengan menu dropdown yang tampilannya keren dan SEO friendly.
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.

48
Sitemap (Daftar Isi) Blogger di Halaman Statis Berdasarkan Label dengan Menu Dropdown
Sitemap (Daftar Isi) Blogger di Halaman Statis Berdasarkan Label dengan Menu Dropdown
Cara membuat sitemap atau daftar isi otomatis di halaman statis Blogger dengan menu dropdown yang tampilannya keren dan SEO friendly.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • X (Twitter)
  • Pinterest
  • LinkedIn

Artikel Terkait

48 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Intelligentiams
    28 Mei, 2024
    Profil: https://www.blogger.com/profile/02662690142882292882
    Ga nemu </style> di template derelogy yang freemium
    • Igniel
      28 Mei, 2024
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ada. DI ATAS ]]></b:skin>
  • Admin
    15 Agustus, 2023
    Profil: https://www.blogger.com/profile/08865390363529297324
    bagus tapi tidak work di bogger saya ketika ganti url "https://www.igniel.com/" dengan web blog saya. "https://kingmikalvariobaidagi.blogspot.com/", kalau urlnya "https://www.igniel.com/" itu work konten dari link ini.
    • Admin
      15 Agustus, 2023
      Profil: https://www.blogger.com/profile/08865390363529297324
      https://kingmikalvariobaidagi.blogspot.com/p/sitemap.html
  • Beerong
    03 Juni, 2023
    Profil: https://www.blogger.com/profile/00613691712610588478
    Kak bisa buat sitemap tapi ngilangin beberapa kategori spesifik ga ya?
    Tutor berbayar juga ga masalah, terima kasih.
  • Jiじ
    30 Oktober, 2022
    Profil: https://www.blogger.com/profile/09886452788688705534
    Komentar ini telah dihapus oleh Jiじ selaku penulis.
  • Zakir Ayoub
    19 Januari, 2022
    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
    03 April, 2021
    Profil: https://www.blogger.com/profile/18036310932579058107
    keren kak sitemapnya, ijin pakai diblog pribadi ya
  • Heri Widodo
    27 November, 2020
    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 September, 2020
    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
    02 Agustus, 2020
    Profil: https://www.blogger.com/profile/17035725839034666640
    Working perfectly .Thank You
  • w h i t e
    06 Juli, 2020
    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 Juni, 2020
    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 Mei, 2020
    Profil: https://www.blogger.com/profile/13506737370216205058
    mba ignie kenapa sitemap saya mengarah ke punya anda yah
    • Igniel
      12 Mei, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Perhatikan, dalam script ada alamat blog www.igniel.com. Ganti dengan alamat blog masing-masing.
    • KR
      27 Maret, 2023
      Profil: https://www.blogger.com/profile/17760918070914179234
      sudah ganti ke alamat blog masing-masing tapi stuck di "Loading..." ini masalahnya dimana ya?
  • Ridhal
    12 April, 2020
    Profil: https://www.blogger.com/profile/12283061923496054504
    Ini cuma yang pake tamplate igniel aja yg bisa ya?
    • Igniel
      12 Mei, 2020
      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
    29 Februari, 2020
    Profil: https://www.blogger.com/profile/04924137136364466463
    Mantap
  • Zatnika
    08 Februari, 2020
    Profil: https://www.blogger.com/profile/16685156825123852124
    Ko Loading terus ya mba ??
    • Igniel
      12 Mei, 2020
      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 Desember, 2019
    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 Desember, 2019
      Profil: https://www.blogger.com/profile/11987960097394341096
      script nya jalan...cuma ketika ganti URL ngak bisa...
    • Igniel
      12 Mei, 2020
      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 November, 2019
    Profil: https://www.blogger.com/profile/16737817068415954951
    mbak igniel, request dong, buatin sitemap dropdown tapi hanya kategori yang pilih dipilih saja...
  • Admin
    13 November, 2019
    Profil: https://www.blogger.com/profile/13572341428882876996
    Gak bisa...
  • Rizal.amrr(ZLiAN)
    01 November, 2019
    Profil: https://www.blogger.com/profile/04707934397452869179
    maaf gan, ini kok cuma loading ya? https://pmrsmansapmk.blogspot.com/p/sitemap.html
  • Wahyuddin Rosi
    27 September, 2019
    Profil: https://www.blogger.com/profile/11987960097394341096
    ada yang sudah berhasil??
  • Anonim
    Anonim14 September, 2019
    Mbak Ignil, bisa gak minta tolong bikinin Sitemap model kayak ini:
    https://awsubs.tv/anime/?list
    • Igniel
      14 September, 2019
      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 Juli, 2019
    Profil: https://www.blogger.com/profile/15424191361649530799
    Boleh tau ini fungsinya buat apa?
    masih noob hehe ;)
    • Igniel
      19 Juli, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Buat menampilkan semua artikel blog (daftar isi).
    • InYourDream
      19 Juli, 2019
      Profil: https://www.blogger.com/profile/15424191361649530799
      Hmm,kira2 pengaruh gak sama ondex google?
    • Igniel
      21 Juli, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Gak ada hubungannya sama index Google.
  • Merman Gian
    06 Mei, 2019
    Profil: https://www.blogger.com/profile/08060966122032459248
    Tidak ada warnanya. cek : https://www.riau.work/p/sitemap.html
    • Igniel
      06 Mei, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Salah nyimpen kode CSS. Simpen di dalam tag kondisional halaman post.
  • Sahabatinet
    06 Maret, 2019
    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
      06 Maret, 2019
      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
    03 Maret, 2019
    Profil: https://www.blogger.com/profile/01970055190385721164
    tetep nggak berfungsi setelah di ganti bagian url
  • Liputan Berita 21
    02 Maret, 2019
    Profil: https://www.blogger.com/profile/15875843550709818017
    tidak berfungsi waktu saya publish malah buka ke sitemap igniel
    • Igniel
      02 Maret, 2019
      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 Maret, 2019
      Profil: https://www.blogger.com/profile/15875843550709818017
      masih gak bisa
    • Liputan Berita 21
      20 Maret, 2019
      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
      09 Januari, 2020
      Profil: https://www.blogger.com/profile/06305612150213528802
      Sama ga work
  • Unknown
    19 Januari, 2019
    Profil: https://www.blogger.com/profile/05841916643334556511
    cara ganti warna nya gimana mba
    • Igniel
      19 Januari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Cari property yang bernama 'background', 'background-color', atau 'color' dan ganti value-nya sesuai keinginan.
  • Agrey Tosira
    02 Januari, 2019
    Profil: https://www.blogger.com/profile/14514416159394957177
    Sangat bermanfaat, Izin ganti warna sesuai tema blog saya :D