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 :
6. Bila sudah selesai langkah di atas lalu cari code </head> dan copy code di bawah ini di atas code </head>
Keterangan : code yang berwarna merah ( # ) Url Link tujuan. Silakan diisi sesuaikan yang di butuhkan oleh kalian.
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.
