Menu scroll di blog

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 susah.

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 :



Sedikit keterangan tentang elemen diatas :

1. overflow : auto adalah kode untuk penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.

2. width:320px adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 320 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. sesuaikan dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).

3. height:200px adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 300px.

4. 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.

5. border:1px solid #eee adalah garis pada pembatas setiap sisinya, #eee untuk kode warna abu-abu,jika ingin merubah sesuai Template blog sobat silahkan ganti,misalnya dengan #fff,atau#000 atau lainnya.misalkan kita memakai kode warna #eee,lihat contoh dibawah ini.

ISI MENU

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 :


dan seterusnya,12,13,........jika masih banyak lagi.


mudah-mudahan berhasil.

Tidak ada komentar:

Posting Komentar

Sobat jika ingin berkomentar silahkan berkomentar pada kotak dibawah ini.