Kode HTML Membuat Daftar Isi Blogspot

3 mins read

Ini ulasan tentang bagaimana cara membuat daftar isi bukan tahu isi. Mungkin di lain kesempatan saya akan membuat tutorial tentang tahu isi. šŸ™‚

Daftar isi pada blog berfungsi untuk memudahkan pengunjung mencari artikel yang diperlukannya. Hikmah lainnya adalah pengunjung betah berburu artikel dengan dipisahkan masing-masing kategori.

Saya awalnya pengguna Blogspot Fanatik Garis Keras. Sehingga cukup banyak mengumpulkan kode-kode html yang mudah untuk diterapkan. Dan kode-kode yang saya gunakan biasanya sudah saya coba di bloggerkalteng.id (Blog TLD blogspot).

Dulu sekali, saat saya tidak paham tentang cara otak-atik blogspot, jadi dengan cara instan mencari kata kunci di google “kode html… (dilanjutkan dengan kata kunci yang ingin dicari). Ini jurus jitu saat itu. Setelah 10 tahun bergulat dengan blogspot dan kode html, akhirnya cukup bisa otak-atik.

Kode HTML membuat daftar isi blog ini, 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.bloggerkalteng.id';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>

Keterangan :

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

Kode #076BB8 merupakan kode warna pada background pada panel navigasi.

GantiĀ https://www.bloggerkalteng.idĀ dengan alamat blog anda.

Pada tahun 2010 saya memulai membangun sebuah blog. Belajar menulis, mengedit, dan belajar hal-hal baru seperti desain grafis dengan corel draw, membangun web hingga menerima jasa pembuatan web, video editing, dan content creator. Saya juga pekerja freelance pada bidang komunikasi dan mobilisasi sosial. Mari Berteman!

Tinggalkan Balasan

Your email address will not be published.

Previous Story

Jujur seperti Rasulullah

Next Story

Tukang Parkir Pesawat

Latest from Blog