membuat dan memasang menu scrool di blog

Untuk membuat menunya anda hanya membutuhkan kode HTML seperti ini :

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

ISI MENU 

</div>

Keterangan :

• width --> lebar menu
  
• height --> tinggi menu
  
• padding --> jarak antar tulisan dengan garis pinggir
  
• border --> ketebalan garis pinggir

Tinggal temen-temen kreasikan sendiri sesuai dengan blog anda.

Contoh kode HTML untuk menu yang saya punya :

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

1. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-multi-level-drop-down-dengan.html">Membuat Multi Level Drop Down dengan jQuery</a>

2. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-menu-dtree-di-blogger.html">Membuat Menu dTree di Blogger</a>

3. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-menu-horizontal-animasi-di-blog.html">Membuat Menu Horizontal Animasi di Blog</a>

4. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-menu-navigasi-horizontal-glossy.html">Membuat Menu Navigasi Horizontal Glossy di Blog</a>

5. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-effect-jquery-link-nudging-di.html">Membuat Effect JQuery Link Nudging di Blog</a>

6. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-info-panel-slide-vertikal.html">Membuat Info Panel Slide Vertikal dengan jQuery</a>

7. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-chatbox-slide-vertikal-dengan.html">Membuat Chatbox Slide Vertikal Dengan jQuery di Blog</a>

8. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-daftar-isi-dengan-jquery.html">Membuat Daftar Isi Dengan jQuery Accordion</a>

9. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-slider-gambar-ala-drakon.html">Memasang Slider Gambar ala Drakon Template</a>

10.<a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-gambar-slide-ala-zinmag-primus.html">Memasang Gambar Slide Ala Zinmag Primus</a>

11.<a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-translate-gambar-bendera-di.html">Memasang Translate Gambar Bendera di Blog</a>

12.<a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/membuat-menu-navigasi-horisontal-dan.html">Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog</a>

13.<a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-artikel-berlangganan-di-blog.html">Memasang Artikel Berlangganan di Blog</a>

</div> 

Hasilnya :

1. Membuat Multi Level Drop Down dengan jQuery

2. Membuat Menu dTree di Blogger

3. Membuat Menu Horizontal Animasi di Blog

4. Membuat Menu Navigasi Horizontal Glossy di Blog

5. Membuat Effect JQuery Link Nudging di Blog

6. Membuat Info Panel Slide Vertikal dengan jQuery

7. Membuat Chatbox Slide Vertikal Dengan jQuery di Blog

8. Membuat Daftar Isi Dengan jQuery Accordion

9. Memasang Slider Gambar ala Drakon Template

10.Memasang Gambar Slide Ala Zinmag Primus

11.Memasang Translate Gambar Bendera di Blog

12.Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog

13.Memasang Artikel Berlangganan di Blog

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:310px adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 310 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:200px adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 300px.
• padding:10px 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:1px solid #eee adalah garis pada pembatas setiap sisinya, #eee untuk kode warna abu-abu.

Yah.... diatas tadi adalah langkah-langkah membuat menu scroll di blog kita. Jika anda ada masalah atau kesulitan dalam menerapkan kode-kode diatas anda bisa isi kotak komentar yang ada di bawah.

Selamat Mencoba !!

About Me