Cara Membuat Daftar Isi dengan Scroll Bar

Pengen tahu cara membuatnya ikuti langkah-langkahnya di bawah ini :

1. Login ke akun Blogger
2. Buka menu Layout > Page Elements
3. Klik Add a Gadget > HTML/Javascript.
4. Masukkan kode dibawah ini kedalam kotak.

 ⪧ Daftar isi menggunakan icon kecil di sampingnya:

<style>
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsdq1Cxn-PpNl5N4zzFcW36-WUWkoQPhp9O0wMNsH6i0kv8GFDVb8YQYCr7ysKe9ioLlOTbTl6MFAAUGwp_6-X1ONdzT_LIR6xl-gdNnSmYDoO43qjczOBCJ1fhv0c48OMJ8q15ayPgKln/") no-repeat left center;border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px;
}

</style>


<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:380px; height:180px; background-color: #000000; border:1px solid #ffffff;">


<div class="list">
<a href="http://Alamat Url yang ingin di Tampilkan">Judul Postingan Anda</a></div>


<div class="list">
<a href="http://Alamat Url yang ingin di Tampilkan">Judul Postingan Anda</a></div>


<div class="list">
<a href="http://Alamat Url yang ingin di Tampilkan">Judul Postingan Anda</a></div>

</div>

 ⪧ Daftar isi menggunakan angka disampingnya:

<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>


<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:380px; height:180px; background-color: #000000; border:1px solid #ffffff;">


<div class="list">
1. <a href="http://Alamat Url yang ingin di Tampilkan">Judul Postingan Anda</a></div>


<div class="list">
2. <a href="http://Alamat Url yang ingin di Tampilkan">Judul Postingan Anda</a></div>

</div>

Keterangan:
380px merupakan lebar kotak, 180px merupakan tinggi kotak, #000000 pada background-color merupakan warna background, dan #ffffff pada border merupakan warna garis pinggir. Silahkan diganti sesuai dengan keinginan anda.

Ingat:
Ganti tulisan yang berwarna Merah dengan URL postingan anda dan ganti tulisan berwarna Biru dengan judul postingan anda.

5. Kalau sudah klik Save Template.

"Selamat Mencoba"