Cara Membuat Daftar Isi Simple Berdasarkan Label Pada Blog

Billy Ramadhan 3/31/2016

Cara Membuat Daftar Isi (Sitemap) Responsive Berdasarkan Label Pada Blog, Sebelumnya Blog Bangbil jauh dulunya sudah membahas tentang Cara Membuat Daftar Isi Tabulasi Keren Untuk Blog nah kalo yang sekarang bukan daftar isi berbentuk tabulasi lagi sobat, tetapi melainkan hanya simple sitemap.

Cara Membuat Daftar Isi Simple Berdasarkan Label Pada Blog

Demo Gambar

Ternyata ada yang tertarik untuk menggunakan sitemaps yang sedang saya gunakan. Banyak blogger pula yang bertanya bagaimana membuat daftar isi secara otomatis dan dikelompokan berdasarkan label Simple Sitemaps ini dibuat oleh blog Kompi Ajaib namun diedit lagi supaya lebih mantap pada tampilannya, daftar isi ini lebih simple dan responsive dan jika dilihat akan lebih sedap dipandang dan tak mencolok mata, dan tidak memerlukan tempat yang besar pada postingan nantinya,

Dengan Sitemaps ini kita tidak akan menampilkan semua link postingan blog kita pada satu halaman. Seperti sitemap kebanyakan, akan tetapi Link hanya ditampilkan ketika ada klik pada label-nya sahaja. Sitemap ini akan di letakkan di halaman statis blog atau terserah sobat mau diletakkan dimana saja. yang penting bakalan cakep deh hasilnya.

Seperti yang dikatakan oleh Mas Adhy Kompi Ajaib :

Sitemaps ini buatan Duy Pham dan saya mendapatkannya atas petunjuk kang Beben. Di sini saya hanya menambahkan title tag untuk link-nya agar lebih SEO friendly dan penambahan "Scope" agar valid HTML5. Bagi yang tertarik untuk mencobanya silahkan gunakan script di bawah ini.

Untuk Demo Livenya Sitemap atau Daftar Isinya, sobat blogger bisa klik tombol demo dibawah.

DEMO

Ingat sebuah sitemap fungsinya adalah untuk mempermudah para pembaca blog kita untuk mengetahui postingan lama kita. Dan sitemap yang satu ini tentunya akan sangat mempermudah para pengunjung blog kita dikarenakan ada kategori dan mereka bisa pilih kategori apa yang sedang mereka inginkan. Jadi wajib dipasang ya untuk sobat blogger semuanya!

(Baca Juga : Cara Mudah Kompres atau Memperkecil Ukuran Gambar)

Tutorial Cara Membuat Daftar Isi Simple Berdasarkan Label Pada Blog :

1. Silahkan masuk ke bagian Laman pada Blogger > buat Laman Baru

2. Pilih bagian HTML, lalu masukkan script dibawah ini kedalamnya. (klik 2x pada script dibawah)

<style type='text/css' scoped='scoped'>
#sidebar-wrapper{display:none!important}#main-wrapper{width:100%!important}#show-cat{float:left;margin:20px 5% 20px 0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1px solid #ccc}#show-cat ul{margin:0;border-top:0 solid #ccc;padding:0}#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:0 solid #ccc;border-left:0 solid #ccc;padding:0}#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #ccc}#navi-cat a:hover{color:#fff!important}#show-cat ul li:last-child a{border-bottom:none}#show-cat ul li a,#navi-cat a{background:#fff;color:#555;font-weight:bold;text-decoration:none}#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}#show-cat ul li a:hover,#navi-cat a:hover{background:#666;color:#fff}#show-post{float:left;width:69%;line-height:1.6em}#show-post ul li{list-style-type:none;margin:10px 0 0 -40px;padding:10px;border:1px solid #ddd}#show-post a:hover{color:#07ACEC}#show-post a{color:#333;font-weight:bold}#navi-cat{padding:20px 0}#navi-cat a{margin-right:10px;border:1px solid #ccc}#navi-cat a,#navi-cat span{padding:10px 15px}#navi-cat span{float:right}#show-cat::-webkit-scrollbar{width:8px;height:8px}#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:2px}#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}#show-cat::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out}@media screen and (max-width:768px){#show-cat{width:35%}#show-post{width:59%}}@media screen and (max-width:480px){#show-cat{width:100%;margin:20px 0}#show-post{width:100%}}
</style>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://www.bangbil.com';cat_numb=11;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(''+cat_name+'',''+(cat_start-cat_numb)+'',''+cat_class+'');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(''+cat_name+'',''+(cat_start+cat_numb)+'',''+cat_class+'');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}</style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(''+cat[i].term+'','1',''+i+'');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"></script>');
</script>
</div>
<div style='clear:both'></div>

Silahkan temen temen ganti :

bangbil.com dengan link blog sobat
angka 11 dengan jumlah postingan per label yang sobat inginkan.

3. Jika sudah silahkan sobat klik Publikasikan dan dilihat hasilnya! :)