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

Assalamualaikum lama tak berkongsi tutorial.

Kali ini sangat murah hati untuk berkongsi menu pengekod bar menu baru, terutamanya bagi mereka yang bosan dengan tab menu lama ... sy tidak meminta apa-apa pampasan ... pengetahuan yang ada harus dikongsi untuk berkat-berkat yang dikongsi .

Kali ini dengan jenis bar menu bersama dengan menu drop-down menu menengah atau orang.

Bar menu kelihatan 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..❤❤❤❤❤