Glowing Navigation Menu with jQuery
Dalam postingan ini saya akan coba share membuat " Glowing Navigation Menu with jQuery for Blogger "
itu adalah suatu menu dengan mengunakan efek Jquery, sekilas kalian pernah berkunjung di suatu Blog yang Menunya seperti di bawah ini :
 |
 |
Gimana keren bukan kalau di simpan di template kalian.
yaudah langsung aja lihat langkah-langkahnya di bawah ini :
1. Login / masuk Blogger
2. Masuk rancangan pilih Edit HTML
3. Jangan lupa kasih centang ( Expand Template Widget )
4. Kemudian cari code ]]></b:skin>
5. Kalau sudah ketemu code di atas simpan code di bawah ini di atas code ]]></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(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);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. Bila sudah selesai langkah di atas lalu cari code </head> dan copy code di bawah ini di atas code </head>
<script src='http://code.jquery.com/jquery-1.4.4.min.js' type='text/javascript'></script>
<script src='http://monozcore-project.googlecode.com/files/jquery.kwicks-1.5.1.js' type='text/javascript'></script>
<script src='http://monozcore-project.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'></script>
7. Save template dan lihat hasilnya ..!!
Sekarang kita masuk langkah akhir.
1. Login / masuk Blogger
2. Masuk Rancangan
3. Klik Tambah Gadget
4. Kemudian pilih HTML/Javascript
5. Simpan code di bawah ini di dalamnya Lau save
<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='#' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='#' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='#' title='about'>About</a></li>
<li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='#' title='recomended links'>Resource</a></li>
</ul>
</div>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>
Keterangan : code yang berwarna merah ( # ) Url Link tujuan. Silakan diisi sesuaikan yang di butuhkan oleh kalian.
>
Show
0 Comments
prev
next
