Membuat Menu Dengan Fungsi Scroll

menu scroll Bagi blogger pemula seperti saya, membuat menu dengan fungsi scroll ini awalnya saya pikir susah, padahal jika kita mengerti bahasa pemrograman, membuat menu seperti ini sangatlah mudah. Untuk penghematan tempat jika sobat mempunyai daftar menu yang sangat panjang, menu dengan fungsi scroll ini bisa menjadi solusi yang tepat selain menggunakan marquee atau text berjalan.

 

Dan pembuatan menu ini tidak menggunakan kode HTML yang banyak dan ribet, yup hanya sedikit kode HTML, sobat sudah bisa membuat menunya. Menu ini bisa juga sobat menfaatkan dalam menempatkan blogroll yang panjang atau daftar menu postingan yang sobat miliki.

 

Untuk membuat menunya sobat 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 sobat kreasikan sendiri sesuai dengan blog sobat.

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://miscah.blogspot.com/2009/04/panduan-membuat-blog.html"> Panduan Membuat Blog</a> 

2.<a href="http://miscah.blogspot.com/2009/04/mengganti-template-blogspot.html"> Mengganti Template Blogspot</a> 

3.<a href="http://miscah.blogspot.com/2009/04/cara-membuat-label-kategori.html"> Cara Membuat Label</a>

4.<a href="http://miscah.blogspot.com/2009/04/untuk-membuat-tampilan-tulisan-atau.html"> Upload Gambar ke Dalam Postingan</a>

5.<a href="http://miscah.blogspot.com/2009/04/cara-pasang-banner-di-blog.html"> Cara Pasang Banner</a>

6.<a href="http://miscah.blogspot.com/2009/04/tutorial-membuat-text-area.html"> Tutorial Membuat Text Area</a>

7.<a href="http://miscah.blogspot.com/2009/04/membuat-favicon.html"> Tips Membuat Favicon</a> 

8.<a href="http://miscah.blogspot.com/2009/04/trik-membuat-read-more.html"> Trik Membuat Read More</a>

9.<a href="http://miscah.blogspot.com/2009/04/cara-pasang-search-engine-di-blog.html"> Cara Pasang Search Engine</a>

10.<a href="http://miscah.blogspot.com/2009/04/menyimpan-file-di-geocitiesyahoocom.html"> Menyimpan File di Yahoo! Geocities</a>

11.<a href="http://miscah.blogspot.com/2009/04/kode-html-tampil-di-postingan.html"> Kode HTML Tampil di Postingan</a>

12.<a href="http://miscah.blogspot.com/2009/04/cara-pasang-meta-tag.html"> Cara Pasang Meta Tag</a>

13.<a href="http://miscah.blogspot.com/2009/04/daftarkan-blog-ke-search-engine.html"> Daftarkan Blog ke Search Engine</a>

14.<a href="http://miscah.blogspot.com/2009/04/alexa-rank.html"> Alexa Rank</a>

15.<a href="http://miscah.blogspot.com/2009/04/tips-membuat-efek-marquee.html"> Tips Membuat Efek Marquee</a>

16.<a href="http://miscah.blogspot.com/2009/05/pasang-kode-tukaran-link.html"> Pasang Kode Tukaran Link</a>

17.<a href="http://miscah.blogspot.com/2009/05/backlink.html"> Backlink</a>

18.<a href="http://miscah.blogspot.com/2009/05/yahoo-messenger-emoticons.html"> Yahoo Emoticons</a>

19.<a href="http://miscah.blogspot.com/2009/04/link-berkelip-warna-warni.html"> Link Berkelip Warna-Warni</a>

20.<a href="http://miscah.blogspot.com/2009/05/tips-membuat-menu-dropdown.html"> Membuat Menu Dropdown</a>

</div>


Hasilnya :

 

 

 

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.

Selamat Mencoba !!

Berlangganan artikel terbaru via Email
Artikel Lainnya :

22 comments

22 Oktober 2009 23.11

bro, kalo itu kan kkotaknya polos..
kalo pengen kayak punya situ gimana bikinnya bro..?
biar ada variasinya gitu..?

18 November 2009 16.01

Mantabs...

24 Februari 2010 18.07

wah, terima kasih nih info-nya. .. info yang sangat berharga buat aku. ok, trims..

13 Maret 2010 00.28

bos saya copy trus tak terapkan kok angkanya gak urut dibawahnya tapi ndlujur tok gimana?mohon petunjuknya,makasih

13 Maret 2010 03.51

@ sedotaja : mungkin ada bagian yg tertinggal, coba sobat copy sekali lg kodenya

21 Maret 2010 18.53

wah makasih ya bro keren blognya,kebenaran sy jg lg mo belajar buat blog,sy mohon izin copy link artikelnya ya bro.terima kasih skali lagi success.

1 Agustus 2010 13.43

thanks ya infonya mau coba tuh diblog aku

21 Agustus 2010 12.36

mantap, perlu di coba nih

29 Agustus 2010 14.17

wuih, keren keren. dari dulu ane cari nie tutorial angel banget e..thx gan

24 Oktober 2010 14.10

Yang auto scroll ada senior??

31 Oktober 2010 11.40

Saya coba koq susunannya ngga rapi ya? nomor urutnya ngga tersusun ke bawah melainkan ke samping.

18 November 2010 15.53

makasih tutorialnya gan gw coba dulu yah..

12 Januari 2011 00.18

thanks atas kursus kilatnya mas...

13 Januari 2011 01.26

gan ngapa kok urutannya gx ke bawah ya gan, malah urutanya nyambung terus gan..., gmn ni???

22 Februari 2011 18.20

sip bos... tapi supaya kotaknya warna-warni ada gak???

1 April 2011 01.42

kurang komplit bro kodenya, hasilnya cuma muncul kotak saja...
scroll penggulungnya ndak bisa muncul...

1 April 2011 12.43

@vigor : coba perhatikan kode "height:200px" itu di kecilkan saja angkanya, misal jd 100px, pasti muncul scroll-nya, karena jika "height" besar otomatis isinya juga harus panjang ke bwh biar scroll-nya muncul

5 Juni 2011 12.49

urutannya nyambung terus, gimana gan ?

3 Agustus 2011 19.19

wah,, jadi tambah ilmu lagi neh

6 Oktober 2011 08.43

Gagal gan..

22 Oktober 2011 23.22

bagus banget blognya.

5 Februari 2012 01.51

Mau coba "scroll blog " yg berbeda,copas aja link di bawah ini.
http://anakedoya.blogspot.com/2011/06/kali-ini-kita-akan-membahas-cara.html

Poskan Komentar

Reader Community

Recent Comments