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

Cara Pasang Tab Menu Di Bawah Header

Seri buat tutorial ini atas permintaan seorang blogger yang ingin tahu cara hendak 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.

12 Pandangan:

Slash`s Jun 02, 2011  

rajen bena wat post tutorial ni.. selamat maju jaye~

BagiBagiBlog Jun 02, 2011  

SALAM PERSAHABATAN Mbak....
Tab Menu Horizontalnya Unik sekali Mbak...Buatan sendiri ya???
Jadi SALUT sama Mbak....
SALAM SUKSES SELALU Yach!!!
^_^

tejan Jun 02, 2011  

hello seri, here for a visit..how are you?

mestizas Jun 02, 2011  

thanks for dropping my site my friend, hope to see you again

Yastro Jun 02, 2011  

Nampak cam agak rumit gak nih...thanks krn sharing...info yg bermenafaat kpd semua...


#nak buat...tp cam tak banyak mende nak letak kat situu...hehehe

Ray ban Malaysia Jun 02, 2011  

Pernah buat dulu memang rumit..
Tapi klau jadi memang puas hati=)

Thanks for sharing tuan rumah

Lovely Kitchen Jun 03, 2011  

salam,...mcm mana pula nak masukkan tab menu yg anak2 dia di bawah menu2 utama tu...tq

alif haris Jun 03, 2011  

mekasih ye kak seri .. sorry lmbat blas jejak .. baru balik kolej .. huhu

alif haris Jun 03, 2011  

fuuh boleh tahan rumitnye .. hhihi

blog-tips-kurus Jun 07, 2011  

'tab' saye cacat tak? :-)

lirik lagu Jun 08, 2011  

Mantaff infonya,sob....nitip link ya..thank's

Teman Setia

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