Vertikal Scroll Menu With JQuery

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatasnya :

/* ---------------
Vertikal scroll menu with jQuery
---------------------------------- */
#scroolvrtkl{
height:400px;
overflow:hidden;
position:relative;
background-color:#999;
}  

#vrtikal {
width:100%;
list-style:none;
padding:0;
margin:0;
top:0;
position:relative;
height:100%;
width:300px;
}

#vrtikal li {
padding:10px 0;
text-align:right;
display:block;
cursor:hand;
cursor:pointer;
}

#vrtikal li a {
background:url() repeat #1f1f1f;

color:#ddd;
font-family:helvetica, arial, verdana;
font-size:9px;
font-weight:900;
display:inline;
padding:20px 8px 5px 20px;
text-decoration:none;
}

#vrtikal li span {
font-family:georgia, arial;
font-size:9px;
color:#464646;
}

8. selanjunya cari kode </head> dan letakkan java script beikut tepat diatasnya :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='http://kangdadang.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://kangdadang.googlecode.com/files/jquery.color.js' type='text/javascript'/>
<script type='text/javascript'>

9. Save

10. cara pemanggilannya, silahkan ssuaikan dengan keinginan kawan-kawan baik itu pada Edit html posting atau pada menu Rancangan, Tambah Gadget,  Html/Java script :

<div id="debugging_mouse_axis"></div>
<div id="debugging_status"></div>
<div id="scroolvrtkl">
<ul id="vrtikal">
<li><a href="#">vrtikal 1 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 2 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 3 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 4 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 5 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 6 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 7 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 8 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 9 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 10 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 11 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 12 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 13 <span> / 2007</span></a></li>
<li><a href="#">SUPER LONG vrtikal vrtikal vrtikal vrtikal SIZE 14 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 15 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 16 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 17 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 18 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 19 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 20 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 21 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 22 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 5 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 23 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 24 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 25 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 26 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 27 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 28 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 29 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 30 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 31 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 32 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 33 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 34 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 35 <span> / 2007</span></a></li>
</ul>
</div>

NB: sebagai tambahan. jika script http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js  ini sudah ada pada template anda, anda tak perlu lagi mnambahkan script tadi pada template yang dipakai  .

Related Post