Minggu lepas Kak Sue ada melawat banyak blog dan antaranya mempunyai menu yang berstruktur dan cantik. Kak Sue bertanyakan dengan suami, boleh tak diguna menu tersebut. Jadi suami Kak Sue telah mencari caranya dan telah memberi dokumen bagaimana nak menambah menu ini. Jadi Kak Sue kongsi-kongsikan kepada anda semua.
Ini adalah contoh paparan yang telah Kak Sue masukkan ke dalam blog
Ini adalah contoh paparan yang telah Kak Sue masukkan ke dalam blog
Dropdown menu ni tujuannya adalah untuk memudahkan capaian maklumat. Ianya lebih berstruktur dan memudahkan pengguna. Ada 2 bahagian yang perlu diubahsuai pada blog.
Bahagian 1: Ubahsuai pada bahagian master page blog
1. Login ke dalam blog akaun.
2. Pilih blog anda. Dalam contoh dibawah "Impian bahagia bersama Premium Beau..".
3. Pilih "Template" dari menu sebelah kiri seperti dibawah.
Pilih Template dari menu
4. Pilih "Edit HTML" dan window dibawah akan dipaparkan. Harus diingat kod dibawah hendaklah di backup supaya boleh dikembalikan semula kepada kod asal jika berlaku kesalahan atau ralat semasa pengubahsuaian.
Copy code diatas dengan menekan button Ctrl-A untuk select semua kod dan Ctrl-C untuk copy kod
6. Cari string "]]></b:skin>" pada kod didalam notepad.
Tekan button Ctrl-F untuk mencari string
#mbtnavbar { background: #060505; width: 960px; color: #FFF; margin: 0px; padding: 0; position: relative; border-top:0px solid #960100; height:35px; } #mbtnav { margin: 0; padding: 0; } #mbtnav ul { float: left; list-style: none; margin: 0; padding: 0; } #mbtnav li { list-style: none; margin: 0; padding: 0; border-left:1px solid #333; border-right:1px solid #333; height:35px; } #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #mbtnav li a:hover, #mbtnav li a:active { background: #BF0100; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; } #mbtnav li { float: left; padding: 0; } #mbtnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #mbtnav li ul a { width: 140px; } #mbtnav li ul ul { margin: -25px 0 0 161px; } #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul { left: -999em; } #mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul { left: auto; } #mbtnav li:hover, #mbtnav li.sfhover { position: static; } #mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited { background: #BF0100; width: 120px; color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px dotted #333; } #mbtnav li li a:hover, #mbtnavli li a:active { background: #060505; color: #FFF; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } |
Kod yang perlu dicopy kepada template
8. Kod diatas boleh ditukar mengikut kesesuaian
a. Tukar #060505 untuk menukar warna background Main menu
b. Tukar teks yang berwarna kuning untuk mengubah warna font, saiz dan family
c. Tukar #BF0100 untuk tukar warna background tab boleh mouse hover pada tab
d. Tukar #BF0100 untuk tukar warna backgroud drop down menu
e. Tukar #060505 untuk tukar warna background drop down menu bila mouse hover pada menu
9. Copy kesemua kod yang telah ditukar di dalam notepad dan kemudian paste ke dalam template yang dibuka sebelum ini.
a. Tukar #060505 untuk menukar warna background Main menu
b. Tukar teks yang berwarna kuning untuk mengubah warna font, saiz dan family
c. Tukar #BF0100 untuk tukar warna background tab boleh mouse hover pada tab
d. Tukar #BF0100 untuk tukar warna backgroud drop down menu
e. Tukar #060505 untuk tukar warna background drop down menu bila mouse hover pada menu
9. Copy kesemua kod yang telah ditukar di dalam notepad dan kemudian paste ke dalam template yang dibuka sebelum ini.
Copy kod yang telah diubah dari Notepad kepada template
10. Klik "Save Template" untuk menyimpan perubahan.
11. Cuba browse blog anda dan pastikan tidak ada kerosakan pada paparan blog. Untuk makluman menu tidak lagi keluar pada waktu ini kerana anda perlu execute proses Bahagian 2 untuk memaparkan menu tersebut. Ini hanya untuk memastikan page tidak rosak selepas perubahan diatas. Jika berlaku kesalahan atau ralat, restore semula dengan kod yang asal.
Bahagian 2: Tambahan gadjet "HTML/JavaScript" dengan kod pada Layout sekarang
1. Pilih “Layout” dari menu dan klik “Add a Cadget" seperti di bawah. Pastikan lokasi dimana anda mahu letakkan Gadjet tersebut.
Pilih "Layout" untuk melihat kandungan dan susunan blog
2. Cari widget “HTML/JavaScript” dan klick “+”
Pilih "HTML/JavaScript" dari senarai gadjet
3. Copy kod di bawah
div id='mbtnavbar'> <ul id='mbtnav'> <li> <a href='#'>Home</a> </li> <li> <a href='#'>About</a> </li> <li> <a href='#'>Contact</a> </li> <li> <a href='#'>Sitemap</a> <ul> <li><a href='#'>Sub Page #1</a></li> <li><a href='#'>Sub Page #2</a></li> <li><a href='#'>Sub Page #3</a></li> </ul> </li> </ul> </div> |
Kod yang perlu dicopy dan paste pada gadjet
4. Tukarkan string # dengan links yang berkenaan contohnya “<a href='#'>Home</a> “ ditukar kepada “<a href='http://suzanamohdramli.blogspot.com'>Home</a> “ . Kod yang ditanda warna kuning adalah item dalam dropdown menu. Boleh ditambah mengikut kehendak. Anda boleh copy dan paste pada mana-mana tab sebelum </li>
5. Untuk tambah tab lain hanya kod ini di atas </ul>
Kod boleh diibuah mengikut struktur dan kehendak anda
Selamat mencuba. Kalau ada apa-apa masalah bolehlah komen dibawah. Kak Sue cuba tolong seberapa yang boleh. InsyaAllah.
Layarilah Facebook Kak Sue di http://www.facebook.com/suzana.mohdramli dan harap-harap anda boleh "Like" page Kak Sue disamping menambah kenalan dan ilmu pengetahuan.
No comments:
Post a Comment