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 :
2. Mengganti Template Blogspot
3. Cara Membuat Label
4. Upload Gambar ke Dalam Postingan
5. Cara Pasang Banner
6. Tutorial Membuat Text Area
7. Tips Membuat Favicon
8. Trik Membuat Read More
9. Cara Pasang Search Engine
10. Menyimpan File di Yahoo! Geocities
11. Kode HTML Tampil di Postingan
12. Cara Pasang Meta Tag
13. Daftarkan Blog ke Search Engine
14. Alexa Rank
15. Tips Membuat Efek Marquee
16. Pasang Kode Tukaran Link
17. Backlink
18. Yahoo Emoticons
19. Link Berkelip Warna-Warni
20. Membuat Menu Dropdown
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 !!
Tweet
|
Berlangganan artikel terbaru via Email
|
22 comments
bro, kalo itu kan kkotaknya polos..
kalo pengen kayak punya situ gimana bikinnya bro..?
biar ada variasinya gitu..?
Mantabs...
wah, terima kasih nih info-nya. .. info yang sangat berharga buat aku. ok, trims..
bos saya copy trus tak terapkan kok angkanya gak urut dibawahnya tapi ndlujur tok gimana?mohon petunjuknya,makasih
@ sedotaja : mungkin ada bagian yg tertinggal, coba sobat copy sekali lg kodenya
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.
thanks ya infonya mau coba tuh diblog aku
mantap, perlu di coba nih
wuih, keren keren. dari dulu ane cari nie tutorial angel banget e..thx gan
Yang auto scroll ada senior??
Saya coba koq susunannya ngga rapi ya? nomor urutnya ngga tersusun ke bawah melainkan ke samping.
makasih tutorialnya gan gw coba dulu yah..
thanks atas kursus kilatnya mas...
gan ngapa kok urutannya gx ke bawah ya gan, malah urutanya nyambung terus gan..., gmn ni???
sip bos... tapi supaya kotaknya warna-warni ada gak???
kurang komplit bro kodenya, hasilnya cuma muncul kotak saja...
scroll penggulungnya ndak bisa muncul...
@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
urutannya nyambung terus, gimana gan ?
wah,, jadi tambah ilmu lagi neh
Gagal gan..
bagus banget blognya.
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
Posting Komentar