Kamis, 29 Januari 2015

Cara Membuat Menu Bar Horizontal (Datar) di Bawah Header Blog Lengkap Dengan Kotak Pencarian

Menu bar horizontal adalah menu yang dipasang pada blog untuk menghubungkan menu yang dibuat dengan kategori artikel yang telah diposting. Menu horizontal yang dibagikan ini lengkap dengan kotak mesin pencari (search) dan pas dipasang di bawah judul (heade blog). Dengan memasang menu bar horizonal memudahkan para pengunjung blog untuk menelusuri semua konten artikel.

Cara membuat menu horizonal (datar) lengkap dengan kotak pencarian:
1. Sign In di blogger.com
2. Pada Menu Drop Down, Anda pilih Template
3. Kemudian klik tombol "Edit HTML" dan Klik Proceed
4. Kasih tanda centang pada Expand Widget Template
5. Copy Paste kode berikut tepat di atas kode ]]></b:skin>

#menubar{
width:920px;
height:38px;
background:#222;
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:#222;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #222;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:35px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #222;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:37px;
border:1px solid #222;
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 #222;
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 #222;
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. Pasang kode berikut, sebelum 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='#'>Menu 1</a></li>
<li><a href=#'>Menu 2</a></li>
<li><a href=#'>Menu 3</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#/'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='#>Menu 4</a></li>
<li><a href='#'>Menu 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='http://1.bp.blogspot.com/_C6KkooKXCEw/TIBqtV6pdmI/AAAAAAAAGyM/QUBsym_R9V0/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>
7. Klik Preview terlebih dahulu. Kalau hasilnya sudah mantap, jangan lupa untuk menyimpan template blogger.
Catatan:
1. Setiap template memiliki kode yang berbeda, jadi, jika di dalam template blogger tidak terdapat kode <div id="content-wrapper"> Anda bisa meletakkan kode HTML di atas sebelum kode <div id="header-wrapper"> atau <div id="outer-wrapper"> atau <div class='tabs-outer'> atau sebelum kode <div class='tabs-cap-top cap-top'>
2. Jika Anda  ingin mengganti warna dari menu bar di atas, tinggal mencari kode #222 kemudian di ganti dengan kode warna yang sesuai dengan warna template.

The author of the blog Teknologivirtual

4 comments

Makasih sangat bermanfaat.

Terimakasih udah berkungjung ke blog kami. Semogat terbantu, salam blogging.

cara rubah menu carinya gimana gan? agak kurang pas dengan templte saya

Ubah angka pada padding gan, sesuaikan dengan template agan


EmoticonEmoticon