Cara Membuat Daftar Isi Bentuk Scroll Box

Setelah lama saya tidak memposting tentang tutorial blogger, kali ini saya akan berbagi bagaimana cara membuat daftar isi atau komentar berbentuk scroll dengan menggunakan javascript, keuntungan menggunakan cara ini yaitu kita tidak perlu memasukkan satu persatu link posting agar bisa tampil di sidebar, tetapi akan otomatis tampil jika menggunakan script ini.

Script ini menampilkan postingan atau komentar terbaru terlebih dahulu kemudian diikuti yang lama. Penggunaan script ini dapat menyebabkan loading blog agak melambat, tetapi Anda tidak perlu khawatir karena tidak terlalu memberatkan load blog anda.

Untuk membuat daftar isi atau komentar dalam bentuk scroll silakan ikuti langkah-langkahnya di bawah ini.

1. Login di Blogger , klik Rancangan > Elemen Laman > Tambah Gadget. Kemudian pilih HTML/JavaScript.
2. Berikan judul widget , lalu copy kode di bawah ini dan paste di kolom Konten yang berada dibawah kolom Judul.

 <div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid #e6e4e3;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ol>
<script src="http://www.mas-adhie.web.id/feeds/posts/default/-/Tutorial%20Blog?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

Keterangan:

• width:auto; berarti lebar scroll box akan mengikuti lebar sidebar.
• height:100px; menunjukkan tinggi scroll box setinggi 100 piksel (bisa dirubah sesuai kebutuhan)
• border:1px solid #e6e4e3; menunjukkan garis keliling (border) scroll box bergaya solid setebal 1 piksel berwarna #e6e4e3 (bisa dirubah sesuai kebutuhan)
• <ol> menunjukkan numbered list, kalau ingin menjadi bullet list silakan diganti dengan <ul>.
• Ganti www.mas-adhie.web.id dengan alamat blog Anda
• Ganti Tutorial%20Blog dengan label yang kalian inginkan. Penulisan label harus sesuai dengan yang tertera di blog. Perhatikan huruf besar-kecilnya dan spasi diganti dengan %20.
• Untuk mengganti menjadi komentar terbaru, silahkan dirubah  http://www.mas-adhie.web.id/feeds/posts/default/-/Tutorial%20Blog menjadi  http://www.mas-adhie.web.id/feeds/comments/default/

3. Klik tombol simpan
4. Pindahkan elemen tadi ke tempat yang kalian inginkan dengan cara di drag.
5. Klik tombol simpan dan lihat hasilnya