Hari ini saya akan membahas
bagaimana membuat menu navigasi dengan sub-menu seperti contoh di bawah ini.
Silakan anda gerakkan mouse anda pada contoh menu navigasi di bawah ini. Pada
menu Blogger Template terdapat 3 sub-menu yaitu 2, 3, dan 4 Column.
Dengan menu navigasi seperti di atas
blog anda akan terlihat lebih menarik bukan? Selain itu tentunya bagi si
pemilik blog juga lebih mudah meng-organisir konten dari blognya. Begitupun
sebaliknya buat pengunjung blog anda, menu seperti ini mempermudah pengunjung
dalam meng-eksplor isi blog anda. Anda bisa juga melihat live demo di sini.
Pada saat saya surfing, saya
menemukan beberapa menu navigasi dengan sub-menu. Ada yang menggunakan javascript
dengan tampilan dan efek yang sangat menarik, namun saya tidak akan membahasnya
kali ini, mungkin di lain waktu saya akan posting tentang hal ini. Yang
sekarang akan saya bahas adalah cara yang paling mudah dan tidak menggunakan javascript.
Nah, langsung aja ya masuk ke
penjelasan bagaimana caranya memasang menu ini di blog anda. Seperti biasa anda
perlu login ke www.blogger.com dan langsung menuju ke Edit HTML.
Jangan lupa back-up dulu template anda. Setelah itu ikutilah
langkah-langkah di bawah ini:
- Carilah kode ]]></b:skin>
- Setelah menemukan kode di atas, letakkan kode di bawah
ini di atas kode tersebut. Kode berwarna merah adalah lebar dari menu
navigasi, rubahlah nilai px agar sesuai dengan lebar blog anda.
#NavbarMenu
{ background: #000; width: 874px; height:
35px; font-size: 13px; font-family: Arial, Tahoma, Verdana; color: #fff;
font-weight: bold; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 874px; float: left; margin: 0; padding: 0;
} #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none;
margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; }
#nav li a, #nav li a:link, #nav li a:visited { background: #808080; height:
24px; color: #fff; display: block; font-size: 14px; font-family: trebuchet ms,
Times New Roman; font-weight: bold; text-transform: none; text-decoration:
none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px;
padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li
a:active {background: #c0c0c0; color: #000; margin: 0; padding-top:6px;
padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration:
none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background:
#c0c0c0; width: 150px; color: #000; font-size: 14px; font-family: trebuchet ms,
Times New Roman; font-weight: normal; text-transform: none; float: none;
margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav
li li a:active { background: #000; color: #fff; padding: 7px 10px; } #nav li {
float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute;
left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a
{ width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul
ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul,
#nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left:
auto; } #nav li:hover, #nav li.sfhover { position: static; }
- Sebelum melanjutkan ke langkah berikutnya, anda perlu
menentukan posisi menu navigasi yang diinginkan. Biasanya menu navigasi
diletakkan di atas header atau di bawah header. Misalkan anda ingin
memasangnya di atas header, maka anda harus mencari kode <div
id='header-wrapper'>
- Lalu letakkan kode di bawah ini persis di atas kode
tadi
<div
id='NavbarMenu'>
<div
id='NavbarMenuleft'>
<ul
id='nav'>
<li><a
href='http://allfreetips4u.blogspot.com'>Home</a> </li>
<li><a
href='#'>Blogger
Template</a>
<ul>
<li><a href='http://allfreetips4u.blogspot.com/search/label/2
column'>2 Column</a> </li>
<li><a href='http://allfreetips4u.blogspot.com/search/label/3
column'>3 Column</a> </li>
<li><a href='http://allfreetips4u.blogspot.com/search/label/4
column'>4 Column</a> </li>
</ul> </li>
<li><a
href='#'>Blogging
Trick</a> </li>
<li><a
href='#'>Forum</a>
<ul>
<li><a href='http://allfreetips4u.blogspot.com/search/label/Learn
SEO'>Learn SEO</a> </li>
<li><a href='http://allfreetips4u.blogspot.com/search/label/Adsense'>Adsense</a> </li>
<li><a href='http://allfreetips4u.blogspot.com/search/label/Blog
Monetize'>Blog Monetize</a>
</li>
<li><a href='http://allfreetips4u.blogspot.com/search/label/Link
Exchange'>Link Exchange</a>
</li>
</ul>
</li> </ul>
</div>
</div>
- Sekarang anda perlu mengganti beberapa kode di atas
agar sesuai dengan keinginan anda. Kode warna
biru adalah url-link dan kode warna merah
adalah anchor-text atau titel menu yang terkait dengan url-link
tadi. Sebagai contoh menu Home. Anda menginginkan apabila menu ini diklik
maka akan membawa anda kepada halaman utama dari blog anda, maka dari itu
rubahlah url-linknya dengan url blog anda. Berikutnya, menu Blogger
Template. Anda ingin apabila menu ini diklik maka akan membawa atau
menampilkan posting-posting yang mempunyai label blogger template. Maka,
rubahlah linknya menjadi http://namabloganda.blogspot.com/search/label/blogger
template.
- Anda bisa menambah menu maupun sub-menu dengan
menambahkan kode seperti di atas. Sebaliknya anda pun bisa menghilangkan
menu dan sub-menu yang tidak anda inginkan dengan menghapus kode di atas
yang tidak diinginkan.
- Setelah itu jangan lupa untuk menyimpan pekerjaan anda
dan lihatlah hasilnya di blog anda.
- Jika anda berhasil, tentunya blog anda akan terlihat
lebih menarik.
