Saturday, October 1, 2011

cara 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>

0 comments:

Post a Comment