Cara membuat Kwick Menu Navigasi di Blog



Demo

1. Login ke akun blogger sobat
2. Masuk ke Rancangan/Design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin>
.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(lh6.ggpht.com/_xcD4JK_dIjU/S4QDv0XGT8I/AAAAAAAAD2I/xo08gKbHeQc/d/main_menu.png
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block}
6. Kemudian cari kode <head>,dan letakkan kode jQuery berikut tepat diatasnya:
<script src='http://k-blogger.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/jquery.kwicks-1.5.1.pack.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
- Tambahin juga kode script berikut dibawahnya:
<script type='text/javascript'>
$().ready(function() {
$(&#39;.kwicks&#39;).kwicks({
max : 205,
spacing : 5
});
});
</script>
 
7.Simpan Template
Nah untuk file.js bila sudah ada yang menggunakan jquery-1.3.2.min.js, untuk file.js ini tidak perlu dipasang lagi.

8. Masih lanjut sob, masuk ke Tata Letak/Rancangan, klik Add New Widget/Tambah Widget, lalu pilih HTML/Javascript. Untuk cara berikutnya, rada gampang-gampang susah, bila ditemplate sobat sudah ada halaman untuk widget ditas halaman posting, sobat tinggal menambahkan kode berikut:

<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='Cobasanasini' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='Cobasanasini' id='hide_top-klik'>Portfolio</a></li>
<li id='kwick3'><a href='Cobasanasini' title='about'>About</a></li>
<li id='kwick4'><a href='Cobasanasini'>Portfolio</a></li>
<li id='kwick5'><a href='Cobasanasini' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='Cobasanasini' title='recomended links'>Resource</a></li>
</ul>
</div>

9. Simpan/Save. Sipppp, sampai disini sobat sudah bisa membuat kwick menu navigasi blogger dengan jQuery jangan lupa ganti KOde Cobasanasini Denag Url Yang anda inginkan contoh

Sumber :

0 Coment "Cara membuat Kwick Menu Navigasi di Blog", Baca atau Masukkan Komentar

Posting Komentar