Membuat Sub-Menu Navigasi Diatas Hider

Dengan menu navigasi blog akan terlihat lebih menarik. Selain itu tentunya bagi si pemilik blog juga lebih mudah meng-organisir konten dari blognya. Begitupun sebaliknya buat pengunjung blog, menu seperti ini mempermudah pengunjung dalam meng-eksplor isi blog.
Langsung saja masuk ke penjelasan bagaimana cara Memasang Sub-Menu Navigasi Diatas Hider blog . Seperti biasa login ke www.blogger.com dan langsung menuju ke Edit HTML. 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 biru 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; }  


3. Cari kode <div id='header-wrapper'> 
4. Letakkan kode di bawah ini persis di atas kode tadi (3)


<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http://gratistutoriallengkap.blogspot.com'>Home</a> </li>
<li><a href='#'>Blogger Template</a>
<ul>
        <li><a href='http://gratistutoriallengkap.blogspot.com'>2 Column</a>
</li>
        <li><a href='http://gratistutoriallengkap.blogspot.com'>3 Column</a>
</li>
        <li><a href='http://gratistutoriallengkap.blogspot.com'>4 Column</a>
</li> </ul> </li>
<li><a href='#'>Blogging Trick</a> </li>
<li><a href='#'>Forum</a>
<ul>
       <li><a href='http://gratistutoriallengkap.blogspot.com'>Learn SEO</a>
</li>
       <li><a href='http://gratistutoriallengkap.blogspot.com'>Adsense</a>
</li>
       <li><a href='http://gratistutoriallengkap.blogspot.com'>Blog
Monetize</a> </li>
      <li><a href='http://gratistutoriallengkap.blogspot.com'>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 hijau adalah url-link dan kode warna merah adalah anchor-text atau titel menu yang terkait dengan url-link.
6. Save template dan lihat hasilnya.

Artikel Terkait