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.

Baca Juga
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.igniel.com. Terima kasih.

Artikel Terkait

12 Komentar

  1. Sangat bermanfaat, Izin ganti warna sesuai tema blog saya :D

    ReplyDelete
  2. cara ganti warna nya gimana mba

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

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

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

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

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

      Delete
  4. tetep nggak berfungsi setelah di ganti bagian url

    ReplyDelete
  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?

    ReplyDelete
    Replies
    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

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

    ReplyDelete
    Replies
    1. Salah nyimpen kode CSS. Simpen di dalam tag kondisional halaman post.

      Delete

Gunakan tag HTML <em> untuk menuliskan URL, potongan kode, atau hal penting lainnya.
Contoh: <em>isi pesan</em>