Selamat Datang Diucapkan Kepada Semua Pengunjung Blog Ini Segala Komen Dan Saranan Teman Teman Amat Seri Hargai

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

11 Pandangan:

Yastro Februari 27, 2011  

Memang dok cari gak navbar menu nih..tp mungkin amik masa nak buat kot,stadi pelan2 dulu...hehehe...thanks seri.

mrs.sabri Februari 27, 2011  

akak dah cuba tapi template akak tak sesuai la seri..tak menjadi..

mrs.sabri Februari 27, 2011  

eh..tersalah tengok pula..ooo rupanya navbar kat bawah header tu ye..akak ingatkan navbar yg macam kat bawah ni 'album malaysia' album nasyid' 'free mp3' ingatkan yang itu..hehe

Seri Bahasa Februari 27, 2011  

Yastro@ yang susah kalau nak ubah warna tab dan ukuran tab tu je.

mrs.sabri@ yang bawah tu linkbar he..he..

caliph shuriken Februari 27, 2011  

best tutorial ni.. seri, thanks for sharing ^^

latest en3: ~ aku, dia & vintage photo contest ~

Abu Luqman Februari 27, 2011  

saya tak cuba lagi la sri

Blog Tutorial Februari 28, 2011  

:) bagus ni sangat membantu mereka yang membutuhkan..

Pengumpul Blog Februari 28, 2011  

Nice posrting Seri. Thank's 4 Sharing.

Djoe Mac 06, 2011  

mohon dukungannya disini sahabat

rezaprama|bloggersmp Mac 10, 2011  

sipp,, coba ke tkp,, tuker link yuk sob,, ditunggu konfirmasinya di

Klik untuk menjalin persaudaraan dengan rezaprama|bloggersmp
Klik untuk tukeran link dengan rezaprama|bloggersmp

salam kenal dari blogger indonesia,,

Yastro Mac 22, 2011  

dah try buat...tp belum menjadi la...hold dulu...tgu masa yg sesuai lak...

Teman Setia

This Blog Is Proudly Sponsored By SURF7 Template Modified By Seri Bahasa Proud To Be A Kinabatangan Blogger