Daftar isi ini berguna untuk memiliki dua jenis. Jenis yang pertama akan menampilkan semua judul postingan kamu dari awal mulai ngeblog sampai sekarang dalam satu halaman, dan yang kedua akan menampilkan seluruh postingan kalian sesuai dengan labelnya masing-masing. Jadi kalian dan orang lain yang membaca akan bisa melihat semua artikel yang sudah diterbitkan selama ini.
Ada banyak sekali tutorial di internet tentang cara membuat daftar isi blog yang keren. Mulai dari yang memiliki tampilan sangat menarik dan canggih dengan efek-efek javascript, hingga yang sangat sederhana dan responsive.
Beberapa waktu lalu saya sempat mencari-cari cara membuat daftar isi blog yang ringan dan sederhana untuk blog. Namun banyak sekali yang tidak work, dan akhirnya saya berhasil menemukan daftar isi yang cocok dan bagus untuk diterapkan.
Cara Membuat Daftar Isi Keren di Blogger
- Masuk ke dashboard blog, kemudian pergi ke menu Halaman
- Pilih Halaman Baru
- Pilih Tampilan HTML, bukan tampilan Menulis/Compose
- Letakkan kode berikut ini:
- Jika selesai klik Publikasikan
Anda bebas memilih salah satu dari kode berikut ini, sesuai selera masing-masing
Tampilan 1
<!-- HTML -->
<div class="siteMap" id="siteMap">
<div class="loading">Tunggu...</div>
</div>
<!-- End HTML -->
<!-- CSS -->
<style>
.siteMap{font-size:15px}
.siteMap .loading{background:#fff;color:#333;padding:15px;border:1px solid #eee}
.siteMapBox{background:#fff;padding:15px;border:1px solid #eee}
.siteMapBox:not(:last-child){margin-bottom:20px}
.siteMapTitle{font-size:14px;font-family:"Noto Sans",sans-serif;font-weight:400}
.siteMapTitle:before{content:"Label: ";font-size:90%;opacity:.6}
.siteMap ol{list-style:none;margin:0;padding:0;counter-reset:sitemap-count}
.siteMap li{display:flex;align-items:baseline}
.siteMap li:not(:last-child){margin-bottom:0}
.siteMap li:before{content:counter(sitemap-count) ".";counter-increment:sitemap-count;flex-shrink:0;width:25px;font-size:15px;font-family:"Noto Sans",sans-serif;line-height:normal}
</style>
<!-- End CSS -->
<!-- JavaScript -->
<script>
var toc_config={containerId:"siteMap",showNew:0,sortAlphabetically:{thePanel:!0,theList:!0},activePanel:1,slideSpeed:{down:400,up:400},slideEasing:{down:null,up:null},slideCallback:{down:function(){},up:function(){}},clickCallback:function(){},jsonCallback:"siteMap",delayLoading:0};window.onload=function(){!function(e,t){var n=t.getElementById(toc_config.containerId),o=t.getElementsByTagName("head")[0],l=[];e[toc_config.jsonCallback]=function(e){for(var t,o,a=e.feed.entry,i=e.feed.category,c="",r=0,s=i.length;s>r;++r)l.push(i[r].term);for(var d=0,f=a.length;f>d;++d)(toc_config.showNew||toc_config.showNew>0)&&d<toc_config.showNew+1&&(a[d].title.$t+=" %new%");a=toc_config.sortAlphabetically.theList?a.sort(function(e,t){return e.title.$t.localeCompare(t.title.$t)}):a,toc_config.sortAlphabetically.thePanel&&l.sort();for(var g=0,h=l.length;h>g;++g){c+='<div class="siteMapBox"><h4 class="siteMapTitle">'+l[g]+"</h4>",c+='<div class="sitemapContent"><ol>';for(var p=0,w=a.length;w>p;++p){t=a[p].title.$t;for(var u=0,m=a[p].link.length;m>u;++u)if("alternate"==a[p].link[u].rel){o=a[p].link[u].href;break}for(var v=0,y=a[p].category.length;y>v;++v)l[g]==a[p].category[v].term&&(c+='<li><a href="'+o+'" title="'+t.replace(/ \%new\%$/,"")+'">'+t.replace(/ \%new\%$/,"")+"</a></li>")}c+="</ol></div></div>"}n.innerHTML=c};var a=t.createElement("script");a.src="https://www.rizsky.my.id/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){o.appendChild(a)}:e.setTimeout(function(){o.appendChild(a)},toc_config.delayLoading)}(window,document)}
</script>
<!-- End JavaScript -->
Tampilan 2
<!-- HTML -->
<div id="siteMap">
<script src="https://cdn.jsdelivr.net/gh/Ferisp/Widget@main/sitemap-3.js"></script>
<script src="https://www.rizsky.my.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
</div>
<!-- End HTML -->
<!-- CSS -->
<style>
#siteMap{width:100%;background:#fff;color:#333;font-family:"Noto Sans",sans-serif;font-size:15px;margin:5px auto;border:1px solid #eee}
.siteLabel{display:block;background:#eee;margin:0 -5px;padding:1px 0 2px 10px;border-radius:3px}
.siteLabel a{color:#333}
.siteList{background:#fff;margin-left:20px}
.siteList li{margin-right:5px;border-bottom:1px solid #eee}
.new{color:red;font-size:12px}
</style>
<!-- End CSS -->
Tampilan 3
<!-- HTML -->
<div id="siteMap">
<div class="loading">Tunggu...</div>
</div>
<!-- End HTML -->
<!-- CSS -->
<style>
#siteMap{background:#fff;color:#333;border:1px solid #eee}
#siteMap .loading{background:#fff;color:#333;padding:15px}
#siteMap .siteTitle{background:#fafafa;color:#333;font-size:100%;padding:15px;cursor:pointer;letter-spacing:1px;transition:all .3s ease;}
#siteMap .siteTitle:last-child{border-bottom:0px}
#siteMap .siteTitle:hover{background:#ddd}
#siteMap .siteTitle:after{content:"";width:0px;height:0px;position:relative;float:right;top:10px;right:10px;border:5px solid transparent;border-color:#333 transparent transparent;transition:all .3s ease}
#siteMap .siteTitle.siteActive{background:#eee}
#siteMap .siteTitle.siteActive:after{border-color:#333 transparent transparent;top:5px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
#siteMap .siteContent ol,#siteMap .siteContent ol li{list-style:none;list-style-type:none;margin:0px;padding:0px;font-weight:400}
#siteMap .siteContent ol li{background:#fefefe;text-decoration:none;padding:10px 15px;display:block;color:#666;line-height:1.5em;transition:all .3s ease}
#siteMap .siteContent ol li a:hover{color:red}
</style>
<!-- End CSS -->
<!-- JavaScript -->
<script>
var toc_config={containerId:"siteMap",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:"siteMap",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=\"siteTitle\">'+n[g]+'</div>',l+='<div class=\"siteContent\"><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+" .siteContent").hide(),$("#"+toc_config.containerId+" .siteTitle").click(function(){$(this).hasClass("siteActive")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .siteTitle").removeClass("siteActive").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("siteActive").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("siteActive").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src="https://www.rizsky.my.id/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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- End JavaScript -->
Silahkan ubah link yang ditandai dengan link blog anda
Penutup
Demikianlah artikel singkat tentang Membuat Halaman Daftar Isi / Sitemap Keren di Blogger, semoga dengan adanya artikel ini dapat memudahkan kalian semua yang membaca, akhir kata saya ucapkan terima kasih.
Source:
www.ferisp.com
Tags
Blogger