Cara Memasang Navbar Menu Di Bawah Header

Kali ini seri akan tunjukkan cara memasang navbar menu di bawah header. Sebenarnya sudah ramai blogger bertanyakan hal ini, tetapi waktu itu seri belum berapa pasti kalau kode ini boleh dipindahkan ke template lain.

Kegunaan Navbar Menu ini membolehkan kita menempatkan artikel-artikel yang penting buat rujukkan para pengunjung blog.



Masuk ke Blogger
Klik Tab Design
Klik Tab Edit HTML
Langkah pertama cari kode ini, #header-wrapper{. Bila sudah jumpa salin semua kode #NavbarMenuleft dan pastekan di akhir/pengunjung kode HeaderWrapper yang ada tanda penutup }.

Salin Kode Di Bawah Ini

#header-wrapper{
Ini Kawasan
Kode Header
}

#NavbarMenuleft{
width:923px;
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:#009900;
color:#7fff00;
display:block;
font-size:14px;
font-family:sans serif;
font-weight:bold;
text-transform:none;
margin-right:1px;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
border:2px solid #003300;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#nav li a:hover, #nav li a:active{
background: #CCFF99;
color:#005b06;
margin:0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
text-decoration: none;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited{
background:#CCFF99;
width:150px;
color:#005b06;
font-size:14px;
font-family:sans serif;
font-weight:bold;
text-transform:none;
float:none;margin:0;
padding:7px 10px;
border:2px solid #006400;
}
#nav li li a:hover, #nav li li a:active{
background:#66CC33;
color:#000066;
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;
}

Catatan:
width:923px; = Ubah ikut lebar template
background:#009900; = Warna latar Tab
color:#7fff00; = Warna font
font-size:14px; = Ukuran font
font-family:sans serif; = Jenis font
margin-right:1px; = Ukuran jarak antara satu Tab
padding-top:6px; = Mengubah size Tab
padding-bottom:5px; = Mengubah size Tab
padding-left:13px; = Mengubah size Tab
padding-right:13px; = Mengubah size Tab
border:2px solid #003300; = Tebal warna sempadan Tab
-moz-border-radius-topleft:15px; = Mengubah radius tepi Tab
-moz-border-radius-topright:15px; = Mengubah radius tepi Tab
-moz-border-radius-bottomleft:15px; = Mengubah radius tepi Tab
-moz-border-radius-bottomright:15px; = Mengubah radius tepi Tab
* Kalau hendakkan Tab berbentuk bersegi, hapuskan semua kode -moz-border-radius

Langkah kedua, cari kode <div id='header-wrapper'>. Bila sudah jumpa salin dan pastekan semua kode <div id='NavbarMenuleft'> seperti yang didalam kotak dibawah.

Salin Kode Di Bawah Ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Seri Bahasa (Header)' type='Header'/>
</b:section>
</div>

<div id='NavbarMenuleft'>
<ul id='nav'>
<li>
<a href='URL Blog Di Sini'>Tajuk Utama</a>
<ul>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama</a>
<ul>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama</a>
<ul>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama</a>
<ul>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
</ul>
</li>
<li>
<a href=''>Blogger Tools</a>
<ul>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
<li><a href='URL Posting Di Sini'>Tajuk Posting</a></li>
</ul>
</li>
</ul>
</div>

Catatan:
URL Blog Di Sini = Letakkan URL blog di bahagian ini
Tajuk Utama = Tajuk utama untuk main Tab
URL Posting Di Sini = Letakkan URL posting/artikel di sini
Tajuk Posting = Tajuk posting di bahagian ini


Save template dan View Blog

Share :

Facebook Twitter Google+