Ira Chan's: Cara Membuat Menu Kwick untuk Blogger

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDbqPBZjNEvef_uvb8aqs8MvK5QeJ0UrDLMjegmn3d-4Exv2qxDDJAEQgOknU4tFcIXN35SBukXBrlrPq6f0OcO3M8l87CiSdX3PTNBxFp-4aEJOe9PuDspcmxBNL_YKATsZCkQfVprEM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwyzXxwf3dg8Jp2LMt0SHM8E62Q40kobrZg4s3A9XjwpLMs1UO7ZXWnQNJvmDQwHJnpyKHE1Cd-1YgSuYMolKNoZe450mrNDx2Y0GZWwitLcDxIV2rJGxuEYMCET517ELYg1cXUlZCrGw/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb2dqpfwnUnhhW0kjGH8t-_lAi0Qc_bGfJqYJEMhfxm3A0OUC9DREjWtOIX2HXkadxc5jU1sTUIvs4VbKg5MbkyZTFvL1y0H8z0BfzVOHQaeQMYOlCmfb8yMRc-Zjpi6le6qRoickSIyA/s1600/end.jpg);
background-repeat:no-repeat;
background-position: left 0px;
}
#kwick1 a:hover{
background-position: left -80px;
}
#kwick4 a{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb2dqpfwnUnhhW0kjGH8t-_lAi0Qc_bGfJqYJEMhfxm3A0OUC9DREjWtOIX2HXkadxc5jU1sTUIvs4VbKg5MbkyZTFvL1y0H8z0BfzVOHQaeQMYOlCmfb8yMRc-Zjpi6le6qRoickSIyA/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..

Bookmark this post: