Tutorial 144: Membuat Menu Bar Berserta Sub-menu/ Drop Tab Menu

Assalamualaikum lama tak share tutorial.
Kali ini Cik Farah sangat bermurah hati nak share coding menu bar baru pulak, khas untuk korang yang rasa jemu dengan tab menu lama kan...Cik Farah tak minta bayaran pun... ilmu yang ada perlu dikongsi untuk keberkatan bersama.

Kali ni jenis Menu Bar beserta sub-menu atau orang panggil drop tab menu.

Rupa bentuk Menu Bar ni seperti ini:

Tapi ada special sikit dia ada sub menu di bawahnya seperti ni :

So lebih jimat ruang dan lebih tersusun blog korangkan...


1.Login ke Blogspot, clik Template > Edit HTML > Rujuk sini

2. Selepas itu...cari code ini ]]></b:skin> dengan cara tekan CTRL F
3. Copy code di bawah dan PASTE di ATAS/SEBELUM code yang korang cari tadi.

#menubar{
border-bottom:4px solid #ff0000;
width:1025px;
height:32px;
background:#000000;
float:center;
margin-bottom:3px;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
background: #ff0000;
color: #fff;
text-decoration:none;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #ff0000;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #000000;
color: #ffffff;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##ff0000;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}  

Petunjuk:
Code #ff0000 (border bawah menubar),  
1025px (lebar menubar), 
#000000(background menubar).

4. Try Preview, jika tak ada sebarang masalah. SAVE sahaja.

5. Selepas itu, Copy code di bawah:

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://bicarafarah.blogspot.com/p/blog-tutorial_1005.html'>Tutorial Blog</a></li>
<li><a href='http://bicarafarah.blogspot.com/p/my-review-collection.html'>Produk Review</a></li>
<li><a href='http://bicarafarah.blogspot.com/2012/08/tempahan-design-dan-edit-blog.html'>Tempahan Blog</a>
<ul>
<li><a href='http://bicarafarah.blogspot.com/p/info-dan-tips.html'>Info/Tips</a></li>
<li><a href='http://bicarafarah.blogspot.my/p/blog-page_16.html'>Header Design</a></li>
<li><a href='http://bicarafarah.blogspot.my/p/portfolio-header-design.html'>Blog Design</a></li>
<li><a href='http://bicarafarah.blogspot.my/search/label/full%20template'>Contoh Template</a></li>
</ul>
</li>
</ul>
</div>

6. Pergi ke Layout Blog > Add Gadget > Html/JavaScript (bahagian crosscol) dan Paste code di atas dalam Html/JavaScript tapi ubah dulu :

Petunjuk:

http://bicarafarah.blogspot.my - link korang
Home - tab menu title
http://bicarafarah.blogspot.my- sub menu/drop tab menu

7. Save dan lihat hasil.

*kenapa pakai tab menu ni bagus? Sebab kemas dan tersusun..boleh letak banyak menu...boleh delete, add ubah bila-bila masa, jimat masa daripada nak design kat PS.

 Sekian itu sahaja. Selamat mencuba. Doakan Cik Farah Murah rezeki..❤❤❤❤❤

SHARE:

blog tutorial