Pertemuan kali ini kita akan mencoba/berekperimen dengan jQueriy untuk membuat menu vertikal di blog. Menu vertikal yang saya maksud di sini adalah menu vertikal yang menggunakan efek transparan dan letaknya di sisi kiri sidebar. Untuk melihat contohnya silahkan Klik di sini
Cara yang dilakukan cukup mudah, berikut langkah-langkahnya:1. Seperti biasa login dulu ke blogger dengan menulis email dan password
2. Tekan Ctrl-F dan cari kode <head>, setelah ketemu simpan kode di bawah ini diatasnya.
<link charset='utf-8' href='http://h1.ripway.com/infokita1978/Vdropdown.css ' rel='stylesheet' type='text/css'/>
<script src='http://www.w3csolutions.com/website-resources/Vertical-Menu/jQuery-Menu/jquery-vertical-menu/jquery-vertical-menu/jquery-1.3.2.js' type='text/javascript'/></div></div>
<script src='http://www.w3csolutions.com/website-resources/Vertical-Menu/jQuery-Menu/jquery-vertical-menu/jquery-vertical-menu/jquery-1.3.2.js' type='text/javascript'/></div></div>
<div class='scroll'/>
<ul id='navigation'>
<li class='home'><a href='#' title='Home'/></li>
<li class='about'><a href='#' title='About'/></li>
<li class='search'><a href='#' title='Search'/></li>
<li class='photos'><a href='#' title='Photos'/></li>
<li class='rssfeed'><a href='#' title='Rss Feed'/></li>
<li class='podcasts'><a href='#' title='Podcasts'/></li>
<li class='contact'><a href='#' title='Contact'/></li>
</ul>
<script type='text/javascript'>
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>
4. Klik pratinjau untuk melihat hasilnya.
5. Selesai.
Catatan:
- Silahkan ganti kode warna merah di atas dengan url link tujuan.
- Ganti kode warna hijau dengan anchor text yang berhubungan dengan link url
- Kode CSS bisa anda edit sesuai dengan keinginan anda dengan cara copy paste alamat link-nya (kode warna orange) dan paste-kan pada browser, secara otomatis kode CSS akan terbuka dan kode CSS akan terlihat. Di atas kode CSS sudah saya upload pada file hosting untuk membuat simple dan rapi kode CSS-nya. Edit menggunakan notepad dan simpan dengan ekstensi .css
- Upload file .css ke file hosting anda dan ambil link-nya untuk di-paste menggantikan kode warna orange di atas.
- Silahkan ganti kode warna merah di atas dengan url link tujuan.
- Ganti kode warna hijau dengan anchor text yang berhubungan dengan link url
- Kode CSS bisa anda edit sesuai dengan keinginan anda dengan cara copy paste alamat link-nya (kode warna orange) dan paste-kan pada browser, secara otomatis kode CSS akan terbuka dan kode CSS akan terlihat. Di atas kode CSS sudah saya upload pada file hosting untuk membuat simple dan rapi kode CSS-nya. Edit menggunakan notepad dan simpan dengan ekstensi .css
- Upload file .css ke file hosting anda dan ambil link-nya untuk di-paste menggantikan kode warna orange di atas.
Sekian pertemuan kita kali ini, semoga apa yang saya berikan pada tutorial di atas berguna dan bermanfaat, salam.
0 komentar:
Posting Komentar