Cara Buat List Menu Scroll Hover

List menu biasa kita lihat tampilannya di website profesional. Indahkan? Bukan cuma indah tapi juga memudahkan pengunjung situs dalam mengakses dan mencari apa yang diperlukannya. Bisa berisi informasi tentang yang punya web atau menu contact sebagai jembatan penghubung juga menu untuk product yang dijual. Dari semua itu ternyata blogger belum mempunyai widget untuk hal ini (kecuali template yang telah tersedia list menu), kita bisa liat list menu ada di worpress tapi wordpress sampe tulisan ini diturunkan belum juga bisa pake untuk adsense sebagai penghasilan tambahan buat kita para blogger.

Contoh List Menu Scroll Dengan Hover :

Tutorial Dasar

Domain Gratis

CSS

Javascript

jQuery

SEO

Tips dan Trik

Tools Blog

Widget

Template Blogger

Gambar Animasi

Milik Admin

Untuk kode HTMLnya kita masukan ke ADD PAGE ELEMENT/Elemen Halaman - HTML/JavaScript dan simpan dimana Anda ingin menunya terlihat. Biasanya kode HTML umumnya seperti dibawah ini:

<style type="text/css">
.bgboxgandadalam {
width: 250px;
background:url(http://i51.tinypic.com/2nupxja.gif) no-repeat right bottom #000;
opacity:0.7; filter:alpha(opacity=40); this.style.opacity=7;
border: 1px solid #ddd;
border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #00FF00; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #00FF00; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #00FF00;}
.bgboxgandadalam:hover {
background:url(http://onepieceindo.files.wordpress.com/2009/10/1_19.gif) no-repeat right bottom #000;
opacity:0.9; filter:alpha(opacity=50); this.style.opacity=10;
box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493;}
</style>
<div class="bgboxgandadalam">
<div class="Pages">
<div class="Page" style="display: block; height: 170px; overflow: auto;">
<div class="floor">
<style>
.list8 {
background: url("http://i634.photobucket.com/albums/uu61/adetea/link_arrow_thumb1.png") no-repeat left center;border-bottom:1px dotted #8BA9F3;line-height:1.2em;padding:3px 0px 0px 20px;}
</style>
<div class="list8">
<a target="_blank" href="#">Judul_1</a></div>
<div class="list8">
<a target="_blank" href="#">Judul_2</a></div>
<div class="list8">
<a target="_blank" href="#">Judul_3</a></div>
<div class="list8">
<a target="_blank" href="#">Judul_4</a></div>
<div class="list8">
<a target="_blank" href="#">Judul_5</a></div>
<div class="list8">
<a target="_blank" href="#">Judul_6</a></div>
<div class="list8">
<a target="_blank" href="#">Judul_7</a></div>
<div class="list8">
<a target="_blank" href="#">Judul_8</a></div>
<div class="list8">
<a target="_blank" href="#">Judul_9</a></div>
<div class="list8">
<a target="_blank" href="#">Judul_10</a></div>
<div class="list8">
<a target="_blank" href="#">Judul_7</a></div>
<div class="list8">
<a target="_blank" href="#">Judul_8</a></div>
<div class="list8">
<a target="_blank" href="#">Judul_9</a></div>
<div class="list8">
<a target="_blank" href="#">Judul_10</a></div>
</div>
</div></div></div>

Nah Anda tinggal menyimpannya di page element html Anda. dan mengganti tanda (#) dengan Link URL tujuan dan JUDUL_1 sampe JUDUL_10 ganti dengan nama link dari tujuan tersebut.
Mudahkan?

KET:::
Sobat tinggal perhatikan saya teks yang berwarna merah, sobat robah sesuai keinginan, dan angka 250px; itu adalah lebar widgetnya, mending sobat ganti menjadi 100% , atau bisa juga menjadi Auto. karena dengan begitu maka widgetnya akan otomatis menyesuiakan lebar sidebar blog kita masing-masing.


Silahkan dicoba...!