Cara Membuat Menu Bar dan Sub Menu di blogspot

Cara Membuat Menu Bar di Blog mungkin bagi pemula tidak tahu bagaimana cara membuatnya dan apa menu bar itu!!.di kesempatan ini saya akan menjelaskan dan membagi-bagi ilmu dengan anda,  menu bar itu mungkin menurut saya sebuah menu tampilan yang berisikian nama-nama yang berguna untuk mempermudah cara kerja menu yang diisikan link-link artikel yang bersangkutan. Dengan itu saya akan menjelaskan juga langkah-langkah membuat menu bar.

'

 "contoh menu bar dan sub menu plus kotak pencarian"

menu bar juga bisa ditambahkan lagi beberapa sub menu atau disebut menu drop down. jika anda ingin menambah sub menu pada menu bar, anda hanya merubah kode html yang akan dijelaskan dibawah ini;

1. Login pada blogger ID Anda

2. masuk ke halaman Template..

3. klik menu Edit Html

4. Cari kode ]]></b:skin> (gunakan ctrl+f)

5. Pasang kode di bawah ini di atas kode ]]></b:skin>

#menubar{
width:920px;
height:38px;
background:#de360f;
border-radius:2px;
float:center;
margin:0px auto;
}
#menubar-left{
float:left;
width:720px;
padding:0 0 2px 2px;
}
#menubar-right{
float:right;
width:170px;
padding-top:8px;
padding-right:18px
}
#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:12px 10px;
color:#fff;
position:relative;
font-weight:bold !important;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
text-decoration:none;
background:#F0512D;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:35px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:37px;
border:1px solid #de360f;
border-radius:0px 0px 8px 8px;
}
#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
}
#search{
border:1px solid #F0512D;
height:20px;
width:180px;
background:#f6f4f4;
}
#search input{
color:#777;
border:none;
}
#s-m{
font-size:11px;
width:180px;
padding-left:4px;
padding-top:5px;
margin:0;
}
#search-t #search{
background-color:#FFFFFF;
border:1px solid #F0512D;
border-radius:4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
-khtml-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}
#search-t #s-m{
width:155px;
padding-top:3px;
}

6. Selanjutnya, cari kode <div id="content-wrapper">
7. Lalu pasang kode di bawah ini, di atas kode <div id="content-wrapper">

<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://21selection.blogspot.com/'>Edit me 1</a></li>
<li><a href='http://21selection.blogspot.com/'>Edit me 2</a></li>
<li><a href='http:/21selection.blogspot.com/'>Edit me 3</a>
<ul>
<li><a href='http://21selection.blogspot.com/'>Sub menu 1</a></li>
<li><a href='http://21selection.blogspot.com/'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='http://21selection.blogspot.com/'>Edit me 4</a></li>
<li><a href='http://21selection.blogspot.com/'>Edit me 5</a></li>
</ul>
</div>
<div id='menubar-right'>
<div id='search-t'>
<div id='search'>
<form action='/search' method='search' target='_blank'>
<input class='keyword' id='s-m' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel disini..&quot;;}' onfocus='if (this.value == &quot;Cari artikel disini..&quot;) {this.value = &quot;&quot;}' type='text' value='Cari artikel disini..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuUM43w7CSsSuTdaKu3W9mNiOSaWeTfxIJM8XSIl1dgHDOUtkcRD4NmRJOGknV5sh1sqSZL10s2Q06S0mKdKyGrQbHn3eXNjfFGnCgoA_dUXtHMQkjby54qL8HDrsrZl8pQMpJ_Kllxc8/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>

8. Simpan Template
9. dan lihat hasilnya dengan Klik Lihat Blog

Keterangan :

• semua texts yang berwarna silahkan anda rubah, terutama warna yang orange, silahkan anda ganti dengan nama blog anda,
• jika anda merasa kesulitan u/ mencari kode <div id="content-wrapper"> sebaiknya anda mencari dengan manual, biasanya tidak ketemu. karna tampilan blog sekarang berbeda, sebagian yang dihidden sebagian ada.
• semoga bermafaat untuk semua pengguna.