Selamat Datang Di Blog Bisnis Online Terpercaya www.maslukis.com


Kamis, 03 November 2016

Cara Membuat Menu Navigasi Dengan Jquery

Cara Membuat Menu Navigasi Dengan Jquery
Assalamu'alaikum sobat blogger semua and Untuk tutorial kali ini membahas tentang menu blog, untuk mempelajari Cara Membuat Menu Navigasi Dengan Jquery dan bila sobat nanti tertarik dengan menu ala Jquery ini sobat boleh pasang tu menu diblog sobat.Oke langsung aja kita test sedikit kecerdasan kita denga kode kode Menu Navigasi Jquery.


Langkah-langkah Membuat Menu Navigasi Dengan Jquery

1.Login Blogger.com
2.Klik Rancangan -->Edit HTML
3.Download Template Lengkap untuk keamanan.
4.Centang kotak Expand Template Widget
5.Cari kode ]]></b:skin>
Kemudian taruh kode berikut tepat di atasnya

.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.Selanjutnya cari kode <head>
Kemudian taruh kode berikut tepat di atasnya

<script src='http://roningasinanblogdotblogspotdotcom.googlecode.com/files/jquery-1.2.3.js' type='text/javascript'/>
<script src='http://roningasinanblogdotblogspotdotcom.googlecode.com/files/jquery.kwicks-1.5.1.js' type='text/javascript'/>
<script src='http://roningasinanblogdotblogspotdotcom.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

7.Simpan template
8.Sobat kembali lagi ke Rancangan -> AddGadget/Tambah Gadget -> HTML/JavaScript,kemudian masukkan kode berikut kedalamnya.

<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='http://blog.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='http://blog.blogspot.com/' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='http://blog.blogspot.com/' 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='http://blog.blogspot.com/' title='recomended links'>Resource</a></li>
</ul>
</div>
</td>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>

Keterangan
Untuk tulisan dengan warna merah sobat ganti dengan link tujuan sobat dan warna biru itu adalah judul untuk link tujuan sobat.Oke kalo sobat tertarik langsung aja Buat Menu Navigasi Dengan Jquery di blog keren sobat.


Baca Juga:

Comments
0 Comments

0 komentar:

Posting Komentar

 
Copyright © 2018. Info Hari Ini . All Rights Reserved
Jl. Delta Raya Utara Kav. 49 - 51 Deltasari Baru, Sidoarjo, Jawa Timur, Indonesia 61256
PT. Bimasakti Multi Sinergi