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 :

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