Membuat Menu Dengan Fungsi Scroll

Bagi blogger pemula seperti saya pastinya ingin blognya menjadi keren kan?
Ya... tentu saja, tapi kadang kita di pusingkan dengan daftar menu yang panjang di side bar.
Tapi kita tidak usah khawatir, kita dapat menyiasatinya dengan membuat menu dengan fungsi scroll.
Awalnya saya pikir susah, padahal jika kita sdh mengerti bahasa pemrograman membuat menu seperti ini sangatlah mudah.
OK langsung saja, dibawah ini langkah langkah membuat menu scroll :

1. Seperti biasa login ke Blogger sobat.
2. Pilih Layout/Rancangan.
3. Klik Tambah Gadget dimana sobat ingin membuat menu scrollnya.
4. Pilih HTML/Javascript
5. Untuk membuat menunya sobat hanya membutuhkan kode HTML seperti berikut :

<div style="overflow:auto;width:320px;height:250px;padding:10px;border:1px solid #eee">  

ISI MENU  

</div> 

      Ini Contoh code HTML yang saya punya :

<div style="overflow:auto;width:300;height:75px;padding:5px;border:2px solid #FF8000"> 

<li>1.<a href="http://jogoyitnan-free.blogspot.com/2011/03/cara-mendaftarkan-blogsitus-ke-beberapa.html"> Cara Daftar Blog ke Search Engine</a> </li> 

<li>2.<a href="http://jogoyitnan-free.blogspot.com/2011/03/cara-menonaktifkan-fungsi-block-pada.html"> Cara Menonaktifkan Fungsi Block Pada Blog</a></li>

<li>3.<a href="http://jogoyitnan-free.blogspot.com/2011/03/memberi-peringatan-saat-klik-kanan.html">  Cara Memberi Peringatan Saat Klik Kanan</a></li>

<li>4.<a href="http://jogoyitnan-free.blogspot.com/2011/04/cara-membuat-cheat-instant-mission.html"> Cara Membuat Cheat Instant Mission Ninja Saga</a></li>

<li>5.<a href="http://jogoyitnan-free.blogspot.com/2011/03/ninja-saga-pet-mode-hack.html"> Ninja Saga Pet Mode Hack</a></li>

<li>6.<a href="http://jogoyitnan-free.blogspot.com/2011/03/ingin-banter-dan-irit.html"> Ingin Motor Anda Menjadi Banter dan Irit?!</a></li>

<li>7.<a href="http://jogoyitnan-free.blogspot.com/2011/01/bengkel-u-power.html"> Bengkel U-Power</a></li>

<li>8.<a href="http://jogoyitnan-free.blogspot.com/2011/02/download-free-little-software.html"> Download Software</a></li>

</div>

Dan Hasilnya

1. Cara Daftar Blog ke Search Engine

2. Cara Menonaktifkan Fungsi Block Pada Blog

3. Cara Memberi Peringatan Saat Klik Kanan

4. Cara Membuat Cheat Instant Mission Ninja Saga

5. Ninja Saga Pet Mode Hack

6. Ingin Motor Anda Menjadi Banter dan Irit?!

7. Bengkel U-Power

8. Download Software

Sedikit keterangan tentang elemen diatas : 

• overflow:auto adalah kode untuk penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
• width:400px adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 400 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).
• height:75px adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 300px.
• padding:5px adalah jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px.
• border:2px solid #eee adalah garis pada pembatas setiap sisinya, #eee untuk kode warna abu-abu anda bisa mencari kode kode warna pada corel draw, potoshop, macromedia flash player dan sejenisnya. Atau bisa dilihat disini Kode Warna

Selamat Mencoba !! Dan Semoga Sukses...!