Cara Buat List Menu Scroll Hover

Judul_1

Judul_2

Judul_3

Judul_4

Judul_5

Judul_6

Judul_7

Judul_8

Judul_9

Judul_10

Judul_7

Judul_8

Judul_9

Judul_10

Caranya adalah sebagai berikut :

1. Login ke akun Blog anda.
2. Pilih Rancangan, Add Gadget kemudian klik HTML/Java Script.
3. Copy Paste script di bawah ini ke dalam gadget HTML/Java Script anda.

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

NB :
► (#) Ganti dengan Link URL tujuan anda.
► JUDUL_1 sampe JUDUL_10 ganti dengan nama link dari tujuan tersebut.
► Anda 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.

4 . Save

Good Luck

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's

Related Post