Kode HTML Membuat Daftar Isi Blog, Tampilannya Keren

Lewis-kull- - Daftar isi pada blog berfungsi untuk memudahkan pengunjung mencari artikel yang diperlukannya. Menurut saya daftar isi pada blog sangat penting, selain alasan tersebut hal lainnya akan memperbanyak viewer blog, karena pengunjung akan tertarik mencari artikel-artikel lainnya pada blog kita.  Kode HTML membuat daftar isi blog, tampilannya keren memang berbeda. Kode ini bekerja dengan mudah, saya telah mencoba di berbagai tema blogger, hasilnya sangat baik.

Kode HTML ini penempatannya sangat sederhana. Simak penjelasan berikut:

1. Login blogger.com

2. Sebaiknya posting di Halaman (bukan di posting), agar daftar isi blog tampil di halaman statis.

3. Pada Pilihan lembar kerja blog, pilih < > Tampilan HTML bukan Tampilan Menulis.

4. Copy-paste kode HTML berikut.

<style scoped="scoped" type="text/css">
#show-cat{float:left;margin:10px 5% 20px 0;width:25%;height:386px;overflow:auto;line-height:18px;border:1px solid #ccc}
#show-cat ul{margin:0;border-top:0px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:0px solid #ccc;border-bottom:0px solid #ccc;border-left:0px solid #ccc;padding:0}
#show-cat ul li a{display:block!important;padding:10px;border-bottom:1px solid #ccc;}
#show-cat ul li:last-child a{border-bottom:none;}
#show-cat ul li a,#navi-cat a{background:#076BB8;color:#fff;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:#222222;color:#fff}
#show-post{float:left;width:59%;border: 0px solid #4C4444;}
#show-post ul li{list-style-type:none;margin-left:-30px}word-wrap:break-word;
#show-post ul li a{word-wrap:break-word;}
#navi-cat{background: #;padding:10px 0}
#navi-cat a{margin-right:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px;margin-left: 5px;}
#navi-cat span{float:right;color:#222222;}

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

<br />
<div id='show-cat'>
</div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='https://www.lewis-kull.com';cat_numb=15;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>

<style type="text/css">#rsidebar-wrapper{display:none !important;}#midsidebar-wrapper{display:none !important;}</style>
<style type="text/css">#main-wrapper{width:100%!important;float:left;margin:0;}
.post{width:100%}
</style>

Catatan :

Kode 386px merupakan kode untuk tinggi panel navigasi, silakan sesuaikan.

Kode merupakan kode warna pada background pada panel navigasi. Cek kode warna disini.

Ganti https://www.lewis-kull.com dengan alamat blog anda.

Tampilannya akan seperti gambar berikut ini. Klik demo Daftar Isi lewis-kull. 

* Note : Sekarang tampilan daftar isi di lewis-kull sudah berubah

Silakan sesuaikan warnanya. Semoga artikel Kode HTML Membuat Daftar Isi Blog, Tampilannya Keren bermanfaat.

Baca juga :