Cara Membuat Menu NAVIGASI Dengan SUB - MENU Membuat Menu NAVIGASI Di Blogger
Cara
Membuat Menu Navigasi Dengan Sub-Menu - Membuat Menu Navigasi, Dengan
menu navigasi blog 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.
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 sobat........
- login ke blogger - Klik Edit HTML.
- Back-up dulu template
- Carilah kode ]]></b:skin>
- 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 .
#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://kolombloggratis.blogspot.com'>Home</a> </li>
<li><a href='#'>Blogger Template</a>
<ul>
<li><a href='http://kolombloggratis.blogspot.com/search/label/2 column'>2 Column</a> </li>
<li><a href='http://kolombloggratis.blogspot.com/search/label/3 column'>3 Column</a> </li>
<li><a href='http://kolombloggratis.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://kolombloggratis.blogspot.com/search/label/Learn SEO'>Learn SEO</a> </li>
<li><a href='http://kolombloggratis.blogspot.com/search/label/Adsense'>Adsense</a> </li>
<li><a href='http://kolombloggratis.blogspot.com/search/label/Blog Monetize'>Blog Monetize</a> </li>
<li><a href='http://kolombloggratis.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 Merah adalah url-link dan kode warna biru 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 sobat.
- Bila Anda ingin apabila menu ini
diklik maka akan membawa atau menampilkan posting - posting yang
mempunyai label blogger template. rubahlah linknya menjadi
http://bloganda.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 - Klik Simpan - selesei
sobat...
