Cara Membuat Daftar Isi Otomatis di Blog Berdasarkan Label dengan Dropdown

Cara Membuat Daftar Isi Otomatis di Blog Berdasarkan Label dengan DropdownKetika membuat sebuah blog, yang harus kita perhatikan adalah kemudahan pengunjung dalam mengakses blog kita. Mengapa hal tersebut begitu penting, itu karena ketika pengunjung kebingungan atau susah dalam mengakses blog kita, itu akan membuat pengunjung kapok untuk mengunjungi blog kita. Akan tetapi apabila pengunjung mudah dalam mengakses blog kita, tentu pengunjung akan senang dengan blog kita dan rajin mengunjunginya.

Salah satu cara untuk mempermudah pengunjung dalam mengakses blog kita adalah dengan membuatkan daftar isi blog. Dengan adanya daftar isi pengunjung akan bisa melihat apa saja artikel-artikel yang ada dalam blog kita dengan mudah. Apalagi bila daftar isi tersebut sudah dikelompokkan berdasarkan label. Oleh karena itu pada kesempatan kali ini saya akan memberikan sebuah cara untuk membuat daftar isi otomatis di blog berdasarkan label dengan dropdown.
Cara Membuat Daftar Isi Otomatis di Blog Berdasarkan Label dengan Dropdown
Cara Membuat Daftar Isi Otomatis di Blog Berdasarkan Label dengan Dropdown

Cara Membuat Daftar Isi Otomatis di Blog Berdasarkan Label dengan Dropdown

Daftar isi dalam sebuah blog adalah hal yang cukup vital. Ketika mendaftar google adsense pun daftar isi juga menjadi pertimbangan. Oleh karena itu, kita akan memperoleh banyak sekali keuntungan apabila memasang daftar isi diblog kita. Model daftar isi blog pun bermacam-macam, salah satunya adalah daftar isi berdasarkan label dengan dropdown. Pada kesempatan kali ini saya akan membahas cara untuk membuatnya. Oke langsung saja.

1. Pertama, masuk terlebih dahulu ke dashboard blog anda.
2. Setelah itu masuk ke menu Tema, kemudian Edit HTML.
3. Cari kode </style>, Kemudian letakkan kode ini tepat diatasnya.

/* 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;}

4. Setelah itu klik simpan template.
5. Kemudian buat halaman. Caranya masuk ke menu Halaman, kemudian klik Halaman Baru.
6. Masuk ke menu HTML, kemudian letakkan kode berikut di kotak yang sudah disediakan.

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

7. Kemudian klik publikasikan. Setelah jadi, kira kira hasilnya akan menjadi seperti ini.
Cara Membuat Daftar Isi Otomatis di Blog Berdasarkan Label dengan Dropdown
Hasilnya seperti ini
Yak, kurasa itulah cara untuk membuat daftar isi otomatis di blog berdasarkan label dengan dropdown. Dengan membuat daftar isi ini, akan membuat blog anda menjadi lebih menarik dan mudah untuk dijelajahi. Terimakasih telah berkunjung di www.bloggerkoplo.com. Salam koplo.

Berlangganan update artikel terbaru via email:

2 Responses to "Cara Membuat Daftar Isi Otomatis di Blog Berdasarkan Label dengan Dropdown"

Iklan Tengah Artikel 2

Iklan Bawah Artikel