Home » » Cara Buat List Menu Scroll Hover

Cara Buat List Menu Scroll Hover





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
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .