Pada kesempatan kali ini saya akan sedikit berbagi tips bagaimana cara membuat dan memasang menu scrool di blog.
Adapun fungsi dan kegunaan menu ini adalah agar daftar list artikel
yang kita posting tidak memakan tempat karena lebar dan panjang menu
bisa kita sesuaikan dengan lebar space halaman blog. 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 anda
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, hanya sedikit kode HTML, anda sudah bisa
membuat menunya. Menu ini bisa juga anda menfaatkan dalam menempatkan
blogroll yang panjang atau daftar menu postingan yang anda miliki.
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 :
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 !!
SUMBER : http://www.maskolis.com/2011/03/membuat-menu-scroll-di-blogspot.html