Cara Membuat Daftar isi Otomatis Seperti Blog Ini

Posted by Serba Serbi Bisa Posted on September 05, 2016

Daftar isi dalam sebuah blog biasa juga disebut SITEMAP sangatlah penting buat sebuah blog untuk mempermudah penjelajahan seluruh isi blog itu sendiri, pada artikel sebelumnya saya sudah menulis artikel tentang Cara membuat Daftar isi secara manual 
Baca disini : Cara membuat Daftar isi secara manual

untuk artikel kali ini saya akan membuat Daftar isi Otomatis menggunakan kode javascript..
tenang aja membuat daftar isi otomatis sangat lah mudah dan simple, contoh daftar isi seperti gambar di bawah ini tidaklah sesulit yang dibayangkan,

caranya gampang
pertama login blogger lalu buat halaman dengan mode html
copy paste kode berikut kedalam halaman html anda.

<style type="text/css">
#toc{border-radius:4px;-moz-border-radius:4px;
width:99%;
margin:5px auto;
border:3px solid #282828;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#444;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#c1c1c1 0%,#282828 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#282828),color-stop(1,#c1c1c1));
border:1px solid #c1c1c1;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#2D96DF;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,center 60,right 10,color-stop(0.60,#fff),color-stop);
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<a href="http://kangobboy.blogspot.com" target="_blank">SiteMap By Kang Obboy</a></div>
<div id="toc">
<script src="https://yourjavascript.com/9515631132/your-script-sitemap.js" type="text/javascript"></script>
<script src="https://kangobboy.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Keterangan:

Ganti url yang diberi warna biru dengan url alamat blog anda dan ganti SiteMap By Kang Obboy dengan tulisan yang anda inginkan

Lalu publikasikan Halaman yang sudah anda buat tadi dan lihat hasilnya, gampang dan simpel kan cara membuat daftar isi secara otomatis.
demikian cara membuat daftar isi secara otomatis di blogspot semoga bermanfaat

Jika ada yang masih bingung bisa ditanyakan dengan berkomentar atau kirim email langsung
terimakasih sudah berkunjung. selamat beraktivitas.