Cara Membuat Menu Scroll Di Sidebar Blog

By HP Yitno

Dear Sahabat,
Kemarin malam temen lamaku yang sedang belajar ngeblog bertanya padaku,"itu cara membuat menu seperti yang ada di blog kamu gimana, pakai javascript ya?" Saya kira yang ditanyakan adalah cara membuat menu drop down melayang. Eh ternyata yang dimaksud adalah menu scroll yang ada di sidebar. Seingatku ane sudah pernah membuat tutorial bagaimana cara bikin menu scroll di blog, tapi pas tak cari di arsip tahun 2012 kok nggak ada. Rupanya artikel yang membahas cara pembuatan menu scrolling di blogspot masih tersimpan rapi dalam draft dan belum saya terbitkan.

Sebenernya postingan tersebut mau langsung saya terbitkan, namun gaya bahasanya kok masih amburradul. Saya khawatir temen-temen bukannya paham malah puyeng selepas membaca artikel tersebut. Ya sudah akhirnya saya susun ulang kosakatanya supaya menarik dan mudah di mengerti.

Cara pembuatannya juga cukup mudah karena tidak menggunakan kode javascript di dalamnya melainkan hanya memakai kode html dengan sedikit sentuhan css. Menu ini bisa kalian manfaatkan untuk menempatkan blogroll yang panjang atau daftar artikel yang kalian miliki. Dengan adanya menu scroll ini kalian jadi bisa menghemat tempat. Kelemahannya adalah apabila dibuka lewat operamini, fungsi scroll tidak berfungsi dan akan ditampilkan secara menyeluruh

Berikut kode untuk membuat menu scroll di website atau web:

<div style="border: 1px inset green; padding:10px; overflow:auto; width:270px; height:115px;">
1. <a href="alamat url sobat">nama link pertama</a><br />
2. <a href="alamat url sobat">nama link kedua</a><br />
</div>

Keterangan:
width      : untuk mengatur lebar menu
height     : untuk mengatur tinggi menu
border    : untuk mengatur ketebalan garis pinggir
inset       : garis tepi menjorok ke dalam
solid       : garis tepi berupa garis penuh
padding  : untuk mengatur jarak tulisan dengan garis tepi
overflow : berfungsi menampilkan scroll jika kapasitas melebihi batas

SHARE :