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
21 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

Posting Komentar