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.
Anda mau membuat menu dan sub menu seperti gambar diatas ? Berikut ini caranya:
1. Login ke blogspot.com
2. Klik Rancangan (Tata Letak)
3. Klik Edit HTML
4 Cari kode ]]></b:skin>
5. Letakkan kode dibawah ini, diatas kode no 4 tadi
/* ----- NAVBAR MENU ----- */
#NavbarMenu {
width: 875px;
height: 35px;
background:#FF6600 url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;
color: #ffffff
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
#NavbarMenuleft {
width: 680px;
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 {
color: #ffffff;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background:#FF6600;
color: #ffffff;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;
width: 150px;
color: #ffffff;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
font: normal 14px Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #FF6600;
color: #ffffff;
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;
}
6. Kemudian cari kode ini:
</b:section>
</div>
7. Letakkan kode dibawah ini di bawah kode no 6 tadi
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a>
<ul>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>
</li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a>
<ul>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>
</li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a>
<ul>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>
</li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>
</div>
</div> <!-- end navbar -->
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a>
<ul>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>
</li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a>
<ul>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>
</li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a>
<ul>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>
</li>
<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>
</div>
</div> <!-- end navbar -->
Keterangan:
=> www.zizinrahma.blogspot.com diganti dengan alamat blog anda
=> Nama Label diganti dengan nama label pilihan anda yang ada di blog anda
=> Judul Menu diganti dengan judul menu yang anda inginkan
8. Simpan
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:
1.
Carilah kode ]]></b:skin>
2.
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; }
3.
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'>
4.
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>
5.
Sekarang anda perlu
mengganti beberapa kode di atas agar sesuai dengan keinginan anda. Kode warna biru adalah url-link dan kode warna merahadalah 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 menjadihttp://namabloganda.blogspot.com/search/label/blogger
template.
6.
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.
7.
Setelah itu jangan lupa
untuk menyimpan pekerjaan anda dan lihatlah hasilnya di blog anda.
8.
Jika anda berhasil,
tentunya blog anda akan terlihat lebih menarik.
Comments :
0 komentar to “Cara membuat Menu dan Sub Menu”
Posting Komentar