Kwick Menu Archive Blogger Kwick Menu Archive Blogger

Jum'at, 10 Agustus 2012 jam 02:48 dini hari

Membuat Kwick Menu Archive Blogger dengan jQuery Membuat Kwick Menu Archive Blogger dengan jQuery

Diposkan oleh F̶a̶i̶s̶a̶l̶ ̶D̶a̶e̶ ⇦⇦⇦ di 11.48 ·

Untuk kesekian kalinya di blog bertema tutorial blog dan seo blogger blogspot ini mengunduh tutorial jQuery dalam membuat menu navigasi di blogger.
Betul gan! Yuk kita intip bagaimana sih membuat menu navigasi untuk flatform blogger/blogspot dengan jQuery ini.

Membuat Menu Navigasi Blogger dengan Kwicks jQuery

Lu pernah lihat di beberapa blog atau situs dimana pada menu navigasi-nya dapat menyembunyikan icon atau gambar secara geser / slide saat mouse berada diatasnya?
Demo atau contoh dari menu navigasi kwicks jQuery ini lu dapat lihat di:

http://boc4h-ingusan.blogspot.com/p/contoh-kwick-menu-navigasi-blogger.html

Memang betul,bahwa kelemahan dari kwicks menu navigasi ini tidak dapat dibaca oleh beberapa browser khususnya handphone atau browser yang tidak mengaktifkan javascript.Tapi kwicks menu navigasi jQuery ini Bisa bekerja sangat baik di browser mozilla juga Google chrome dan IE terbaru.

Penasaran,? Hayu lah  mari urang pelajari bagaimana membuat menu navigasi blogger dengan jQuery kwicks tricks.

Pertama langkahnya seperti biasanya ya hanya pilih Dashboard lalu Tata Letak kemudian contreng tulisan Expands Widget Templates.
Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard),setelah ketemu tinggal letakkan kode CSS berikut tepat diATAS kode ]]></b:skin> tersebut.

 .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
} 

Keamudian cari kode ]]></b:skin> kembali,setelah ketemu letakkan kode jQuery berikut tepat diBAWAHnya:

<script class='jsbin' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'>

</script>

<script class='jsbin' src='https://sites.google.com/site/pujiantoroinc/Home/kwicks.js'>

</script>

<script type='text/javascript'>

$(document).ready(function(){ 

$(&#39;.kwicks&#39;).kwicks({

duration: 500, 

max: 170, 

spacing: 0 

});

});

</script>

Lalu simpan templates.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar nodan klik tulisan Add New Widget atau Tambah Gadget,
Selanjutnya pilih HTML/Javascript lihat kemudian letakkan kode berikut:

<table width="100%" border="0"><tr><td bgcolor="black">

<ul class='kwicks'>

<li id='kwick1'><a href='http://pujiantoro.blogspot.com/' title='halaman utama'>Home</a></li>

<li id='kwick2'><a href='http://pujiantoro.blogspot.com/search' title='daftar isi.'>Blog</a></li>

<li id='kwick3'><a href='http://pelajaran-blog.blogspot.com/2009/02/profil.html' 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://pelajaran-blog.blogspot.com/' title='recomended links'>Resource</a></li>

</ul></td></tr></table>

Simpan,selesai sudah Liat Hasilnya Gan XD

Langganan: Poskan Komentar (Atom)