Klik Tujuh

# Cara membuatnya : Login blogger
# Rancangan, Edit Html, Cari kode ]]></b:skin>
# 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/AVvXsEj2ErUuXfVYlLqhR1So0RhfX7hm00p95mGFHm8vrnTAXFIWyZI97nxXfGAneJZ8SzOk6QlWX0ubK6yNJZthnVqIy9Pl45eq_9ncXiX9tZ5RZav2aOdLaOLLyr-3x8lpyCMYPKeVlOiKWvU/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/AVvXsEjVoMaWv-Fp9JWXPcpL-KgtGWMtZRM6cIa6AVAdgdYOdjZPAaPjovGWQxJn5I8FWhwZIWZcRKNmjVagkLhFRKrMMlG7OzdOpDQ7xWtkVJLne6KEVCtWQSlQOcwahASs8pDBlmbsFHPtcNg/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/AVvXsEjNsT_dm9Sg4qrks-6nHB6vsrv0LzePJvsrsZig_S36eQe13dEjJ5T-Eh5E20mN_IPDZcz6TJ_58Ji7SRNROlqH8w8eTEircKPuD-7DWU5KeJksFjr6M5F4HsqXV4vMODjHm213W4OgD0w/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/AVvXsEjNsT_dm9Sg4qrks-6nHB6vsrv0LzePJvsrsZig_S36eQe13dEjJ5T-Eh5E20mN_IPDZcz6TJ_58Ji7SRNROlqH8w8eTEircKPuD-7DWU5KeJksFjr6M5F4HsqXV4vMODjHm213W4OgD0w/s1600/end.jpg);
    background-repeat:no-repeat;
    background-position: right -40px;
}
#kwick4 a:hover{
    background-position: right -120px;
}

selanjutnya simpan script berikut diatas :

<script type='text/javascript' src='http://kangdadang.googlecode.com/files/jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='http://kangdadang.googlecode.com/files/kwicks.js'></script>
<script type='text/javascript' src='http://kangdadang.googlecode.com/files/custom1.js'></script>

Terakhir simpan kode berikut di tempat yang sesuai dan diinginkan :

<ul class="kwicks">
     <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>

simpan template....

Sebagai catatan karena menu ini menggunakan jQuery, jadi terkadang ada bentrok Java script jquery yang satu dengan yang lainnya, jika jquery nya sudah ada kawan-kawan tidak perlu lagi menambahkan script jquery nya...

dan untuk lebih jelasnya bisa dilihat disini agar lebih mengerti: DEMO Kwicks menu with jquery

selamat mencoba,, dan semoga kawan-kawan bisa mengembangkannya....