Subscribe to our RSS Feeds
Hello, selamat datang di rumah blog saya. Komputer adalah jantungku dan hidupku belum lah sempurna bila belum kujelajahi seisi dunia tanpa harus menuju kesana. Nikmati perjalanan anda dengan berpetualang ilmu di dunia blog saya ini.

**Jangan Lupa Follow Ira Chan Yaahh**



Cara Membuat Menu Kwick untuk Blogger

0 Comments »


Untuk Blogger

1.Login blogger
2.Rancangan, Edit Html, Cari kode ]]></b:skin>
3.Dan Simpan kode berikut diatasnya :
/* Kwicks menu with jQuery
———————————————– */
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
background-image:url(https://lh3.googleusercontent.com/-2nxMDFYODTY/TXxY_uUs-1I/AAAAAAAAAVc/8uoYNoiN3Y4/s1600/no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/
}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
float: left;
width: 125px;
height: 40px;
margin-right: 0px;
background-image:url(https://lh3.googleusercontent.com/-NM9VV1LIiEw/TXxY_IMS3wI/AAAAAAAAAVY/Istj9Vkq5MQ/s1600/kwicks_sprite.jpg);
background-repeat:no-repeat;
}
.kwicks a{
display:block;
height:40px;
text-indent:-9999px;
outline:none;
}
#kwick1 {
background-position:0px 0px;
}
#kwick2 {
background-position:-200px 0px;
}
#kwick3 {
background-position:-400px 0px;
}
#kwick4 {
background-position:-600px 0px;
}
#kwick1.active, #kwick1:hover {
background-position: 0 bottom;
}
#kwick2.active, #kwick2:hover{
background-position: -200px bottom;
}
#kwick3.active, #kwick3:hover {
background-position: -400px bottom;
}
#kwick4.active, #kwick4:hover {
background-position: -600px bottom;
}
#kwick1 a{
background-image:url(https://lh3.googleusercontent.com/-qe0Wc3VfaUI/TXxY-LI-sPI/AAAAAAAAAVU/IoaUilYJm2A/s1600/end.jpg);
background-repeat:no-repeat;
background-position: left 0px;
}
#kwick1 a:hover{
background-position: left -80px;
}
#kwick4 a{
background-image:url(https://lh3.googleusercontent.com/-qe0Wc3VfaUI/TXxY-LI-sPI/AAAAAAAAAVU/IoaUilYJm2A/s1600/end.jpg);
background-repeat:no-repeat;
background-position: right -40px;
}
#kwick4 a:hover{
background-position: right -120px;
}
selanjutnya simpan script berikut diatas </head> :
<script type=’text/javascript’ src=’http://asenk.com/js/jquery-1.2.6.min.js’></script>
<script type=’text/javascript’ src=’http://asenk.com/js/kwicks.js’></script>
<script type=’text/javascript’ src=’http://asenk.com/js/custom1.js’></script>
Terakhir simpan kode berikut di tempat yang sesuai dan diinginkan :
<ul>
<li id=”kwick1″><a href=”#”>Home</a></li>
<li id=”kwick2″><a href=”#”>Contact</a></li>
<li id=”kwick3″><a href=”#”>Downloads</a></li>
<li id=”kwick4″><a href=”#”>Search</a></li>
</ul>
Ganti # dengan url yang kamu inginkan..
Selamat mencoba ya..
StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google Twitter FaceBook

18.16

0 Responses to "Cara Membuat Menu Kwick untuk Blogger"

Poskan Komentar