Cara Pasang Tab Menu Di Bawah Header

Cara Pasang Tab Menu Di Bawah Header

Membuat/memasang Tab Menu di bawah header seperti yang ada di bawah header template seri.

Bagi template yang telah ada tab menu tapi yang biasa boleh juga mengubah dengan menggantikan kode css yang seri sediakan ini.

Panduan Memasang:

Masuk Ke Blogger
Klik Tab Design
Klik Tab Edit HTML
Cari kode ini, #header-wrapper{. Kode lengkap seperti di dalam petak di bawah.

#header-wrapper{
float:left;
margin:10px 5px 12px 5px;
padding:0px 0px 0px 0px;
width:908px;
height:200px;
background: url(http://i1234.photobucket.com/albums/ff405/seribahasa/headerbutterfly.jpg) top center repeat;
border-top:13px solid #009900;
border-bottom:13px solid #009900;
border-left:13px solid #006600;
border-right:13px solid #006600;
}
#header{width:885px;margin:0px 0px 0px 0px;padding:5px 5px 5px 5px;text-align:right}
#header h1{
color:#339900;
font:$blogTitleFont;
font-variant:small-caps;
margin:0px 0px 0px 0px;
padding:10px 10px 0px 10px;
}
#header h1 a{text-decoration:none;color:$blogTitleColor}
#header h1 a:hover{text-decoration:none;color:$blogDescriptionColor}
#header .description{
color:#99cc00;
font:$blogDescriptionFont;
margin:0px 0px 0px 0px;
padding:1px 20px 25px 20px;
}
#header h1 p,
#header .description p{margin:0;padding:0}
#header1 a img{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border:0}

Salin kode di bawah ini dan pastekan di bawah kode CSS header.

#NavbarMenu{
width:919px; (Sesuaikan kelebaran NavbarMenu dengan saiz template)
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 url(http://i755.photobucket.com/albums/xx200/Seri_07/Rosec1.jpg) top center; (Tukar URL background mengikut kesesuaian template anda. Jika ingin mengunakan color kode buang kode bermula dari sini: (http://i755.photobucket.com/albums/xx200/Seri_07/Rosec1.jpg) top center.)
color:#7fff00; (Tukar warna mengikut kesesuai template)
display:block;
font-size:14px; (Ukuran saiz font)
font-family:trebuchet ms, Times New Roman;
font-weight:bold;
text-transform:none;
margin-right:1px; (Jarak antara petak Tab)
padding-top:6px; (Jarak antara Header dengan Menu Tab)
padding-bottom:5px; (Jarak antara Menu Tab dengan main-wrapper atau main-post)
padding-left:13px; (Jarak sebelah kiri Menu Tab dengan content-wrapper)
padding-right:13px; (Jarak sebelah kanan Menu Tab dengan content-wrapper)
border:2px solid #003300; (lebar serta warna sempadan Menu Tab)
-moz-border-radius-topleft:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-topright:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-bottomleft:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-bottomright:15px; (Untuk mengubah bentuk tepi Menu Tab)
}
#nav li a:hover, #nav li a:active{
background: #CCFF99; (Warna latar)
color:#005b06; (Warna font)
margin:0;
padding-top:6px; (Jarak antara Header dengan Menu Tab)
padding-bottom:5px; (Jarak antara Menu Tab dengan main-wrapper atau main-post)
padding-left:13px; (Jarak sebelah kiri Menu Tab dengan content-wrapper)
padding-right:13px; (Jarak sebelah kanan Menu Tab dengan content-wrapper)
text-decoration: none;
-moz-border-radius-topleft:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-topright:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-bottomleft:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-bottomright:15px; (Untuk mengubah bentuk tepi Menu Tab)
}
#nav li li a, #nav li li a:link, #nav li li a:visited{
background:#CCFF99; (Warna latar)
width:150px; (Lebar Tab li)
color:#005b06; (Warna font)
font-size:14px; (Saiz font)
font-family:trebuchet ms, Times New Roman;
font-weight:normal;
text-transform:none;
float:none;
margin:0;
padding:7px 10px;
border:2px solid #006400; (lebar serta warna sempadan Menu Tab li)
}
#nav li li a:hover, #nav li li a:active{
background:#66CC33; (Warna latar)
color:#000066; (Warna font)
padding:7px 10px;
}
#nav li{
float:left;
padding:0;
}
#nav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px; (Lebar Tab li)
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:
Sila rujuk kepada ayat yang bertanda MERAH untuk melakukan pengubahsuaian.

Contoh #header-wrapper{ dan #NavbarMenu{ yang telah dicantum secara betul.

#header-wrapper{
float:left;
margin:10px 5px 12px 5px;
padding:0px 0px 0px 0px;
width:908px;
height:200px;
background: url(http://i1234.photobucket.com/albums/ff405/seribahasa/headerbutterfly.jpg) top center repeat;
border-top:13px solid #009900;
border-bottom:13px solid #009900;
border-left:13px solid #006600;
border-right:13px solid #006600;
}
#header{width:885px;margin:0px 0px 0px 0px;padding:5px 5px 5px 5px;text-align:right}
#header h1{
color:#339900;
font:$blogTitleFont;
font-variant:small-caps;
margin:0px 0px 0px 0px;
padding:10px 10px 0px 10px;
}
#header h1 a{text-decoration:none;color:$blogTitleColor}
#header h1 a:hover{text-decoration:none;color:$blogDescriptionColor}
#header .description{
color:#99cc00;
font:$blogDescriptionFont;
margin:0px 0px 0px 0px;
padding:1px 20px 25px 20px;
}
#header h1 p,
#header .description p{margin:0;padding:0}
#header1 a img{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border:0}

#NavbarMenuleft{
width:919px;
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 url(http://i755.photobucket.com/albums/xx200/Seri_07/Rosec1.jpg) top center;
color:#7fff00;
display:block;
font-size:14px;
font-family:trebuchet ms, Times New Roman;
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:trebuchet ms, Times New Roman;
font-weight:normal;
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;}

Sekarang kita pergi di bahagian kode HTML dan cari kode ini, <div id='header-wrapper'>. Kode lengkap seperti di dalam petak di bawah.

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

Salin kode di bawah ini dan pastekan di bawah kode HTML header-wrapper.

<div id='NavbarMenu'>
<ul id='nav'>
<li>
<a href='URL Blog Di Sini'>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
</ul>
</div>
<div style='clear:both;'/>

Contoh <div id='header-wrapper'> dan <div id='NavbarMenu'> yang telah di cantum secara betul.

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

<div id='NavbarMenu'>
<ul id='nav'>
<li>
<a href='http://www.seribahasa.com/'>Peribahasa</a>
<ul>
<li><a href='http://www.seribahasa.com/2009/05/peribahasa.html'>A</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Simpulan Bahasa</a>
<ul>
<li><a href='http://www.seribahasa.com/2009/05/simpulan-bahasa.html'>Simpulan Bahasa</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>KKMS</a>
<ul>
<li><a href='http://www.seribahasa.com/2009/09/kurik-kundi-merah-saga-adat.html'>Adat</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Pantun Pilihan</a>
<ul>
<li><a href='http://www.seribahasa.com/2010/05/pantun-anak-dagang.html'>Anak Dagang</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Sajak</a>
<ul>
<li><a href='http://www.seribahasa.com/2010/07/aku-seorang-bloger.html'>Aku Seorang Bloger</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Blogger Tips</a>
<ul>
<li><a href='http://www.seribahasa.com/2010/05/rahsia-mendapat-pagerank.html'>Page Rank</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Blogger Tools</a>
<ul>
<li><a href='http://www.seribahasa.com/2011/01/panduan-membuat-kode-html-parser-box.html'>HTML Parser Box</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Modifikasi Template</a>
<ul>
<li><a href='http://www.seribahasa.com/2011/03/modifikasi-blogger-template.html'>Modifikasi Template</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
</ul>
</div>
<div style='clear:both;'/>

Okey, last sekali Save Template kemudian klik View blog untuk melihat hasilnya. Kalau tak berapa faham sila tinggalkan pesan di komen box, seri akan jelaskan seberapa yang boleh.