Memasang Dock Menu Versi 2Aku pening tapi gembira sebab dapat menggunakan Dock Menu Versi 2 ini kedalam blogger. Aku pun malas nak terangkan pasal Dock Menu. Korang bleh tengok Demo disini. Aku ambil dari laman web 221omedia.com. Aku tak tau yang mana lagi menarik antara versi ini atau versi 1. Bagi aku versi kali ni lagi simple tapi COOL. Berminat?
Tutorial langkah demi langkah. Kamu boleh download Sumber asal file tutorial ini. Dan kamu juga boleh hostkan file-file tersebut di hosting kamu masing. Kalau kamu malas, abaikan langkah diatas dan teruskan langkah 1.
Langkah 1: Pergi ke Layout>edit html. tak perlu Expand widget.
Cari kod ini:
</head>
(tips: Klik CTRL+F untuk carian mudah)
kemudian Paste Kod dibawah sebelumnya:
<script src='http://www.geocities.com/gen_sperm07/hide_menu.js' type='text/javascript'/>
Langkah 2: Memasukkan Kod CSS
Cari kod :
</b:skin>
Kemudian copy dan paste kod dibawah sebelumnya:
Langkah 3: Memasukkan kod HTML:
Cari kod:
Kemudian Copy dan Paste kod dibawah selepasnya:
<div id='hit_area' onmouseover='toggleDown();'/>
<div id='menu_holder'>
<div id='nav'>
<ul>
<li><a href='http://boonto.blogspot.com'>jstween</a></li>
<li><a href='http://boonto.blogspot.com'>2210media</a></li>
<li><a href='http://www.digg.com'>Digg</a></li>
<li><a href='http://boonto.blogspot.com'>CSS Mania</a></li>
<li><a href='http://boonto.blogspot.com'>Kirupa</a></li>
</ul>
</div>
</div>
Langkah 4: Fahami betul-betul.k
Cari kod:
<div id='header-wrapper'>
Gantikan kod diatas dengan kod ini:
<div id='header-wrapper' onmouseover='toggleUp();'>
(langkah 4 bertujuan, bila mouse kamu teralih ke header, dock menu secara automatik akan tersembunyi. bagi yang tiada header. Boleh gantikan ke kod "content-wrapper")
Langkah 5: Save dan Lihat blog kamu.
MENGEDIT DOCK MENU
1. Ubah kedudukan, hanya ubah nilai bahagian "left" saja:
#menu_holder {
height: 58px;
width:660px;
position: absolute;
left:300px;
top: -58px;
display: block; /* fix for doubling margin in IE */
}
2.Mengubah warna tulisan pada code "color"
3. Mengubah LINKANDA dan TAJUKLINK:
<li><a href='LINKANDA'>TAJUKLINK</a></li>
Credit: Webber 2.0 Dock Menu
Jika ada sebarang masalah, tolong komen dibawah.
Ps: Gara-gara Internet Explorer, aku ambil masa yang panjang untuk menetapkan kedudukannya sama seperti browser yang lain. Jadi, kepada pengguna Internet Explorer, korang berhutang dengan aku. Kalau nak bayar klik iklan dibawah.haha
Posts
0 comments:
Post a Comment