METAL - XP - kali ini metal -xp akan berbagi sebagian cara yang digunakan di template ini sob yaitu
Kwick Menu Navigasi Blogger dengan jQuery, kiranya itulah yang akan saya bahas kali ini. Setelah kemarin saya bahas juga untuk cara membuat
Jquery Tab View Scroll Show Hide Widget, kita lanjut lagi, dan masih seputar JQuery. Ini juga merupakan reques dari beberapa sobat blogger, yang meminta untuk membuatkan tutorialnya. Ok, bila masih penasaran sobat bisa melihatnya pada menu navigasi diblog saya ini, ataupun bisa melihat pada blog ini sob ini
Demo
.
yang pasti membuat tampilan blog makin keren sob, karena dengan jQuery Sliding Navigation Menu. untuk melihat demonya sobat lihat saja di blog yang BERANDA, ARSIP, dll
Berikut langkah-langkah membuatnya:
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() {
$('.kwicks').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='http://kode-blogger.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='#' id='hide_top-klik'>Portfolio</a></li>
<li id='kwick3'><a href='http://www.blogger.com/profile/08113139411481282535' title='about'>About</a></li>
<li id='kwick4'><a href='http://kode-blogger.blogspot.com/search?max-results=200'>Portfolio</a></li>
<li id='kwick5'><a href='http://kontactr.com/user/viyan%20pradita' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://code.google.com/p/k-blogger/' title='recomended links'>Resource</a></li>
</ul>
</div>
9. Simpan/Save. Sipppp, sampai disini sobat sudah bisa membuat kwick menu navigasi blogger dengan jQuery.
Catatan:
Untuk gambar menu kwick'nya saya dapat dari pelajaran-blog.blogspot.com, disana juga ada tutorialnya, tapi sedikit berbeda dengan cara saya. Untuk Kode CSS silahkan sesuaikan sendiri dengan blog sobat.
Nah, cara diatas merupakan cara yang saya terapkan pada blog saya ini. Bila sobat mendapat kesulitan, bisa sobat bertanya lewat komentar dibawah.,,,,,,
Waaaaah perlu di coba nih sobat,,,,,,,,,
BalasHapusmakasih telah berbagi,,,,
Falah Mulyana Berkunjung di pagi hari sebelum melakukan aktifitas,,,,
Nice share sobat and Happy Blogging sobat
oww iya falah semog berhasil gan
BalasHapuswah bagus nich tippsnya sob..
BalasHapus