Cara Menciptakan Sajian Kafe Horizontal (Datar) Di Bawah Header Blog Lengkap Dengan Kotak Pencarian

Menu kafe horizontal yaitu hidangan yang dipasang pada blog untuk menghubungkan hidangan yang dibentuk 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 hidangan kafe horizonal memudahkan para pengunjung blog untuk menelusuri semua konten artikel.

Cara menciptakan hidangan 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 aba-aba berikut sempurna di atas aba-aba ]]></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 aba-aba berikut, sebelum aba-aba <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 hidangan 1</a></li>
<li><a href='#/'>Sub hidangan 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQAl5D2aRW5Dmx0iIGCoLc4mOM4CZGw9XXG81KXqf8I0QV-8SsIRl77TNP8m_iNlCUz-AvQfa_vrqheXxnB9MYzg5Lk2-pbUET5X7fZo1uUPqAfXgvjpVymkBnLzELB6P1NBb2OABPscY/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 kesannya sudah mantap, jangan lupa untuk menyimpan template blogger.

Catatan:
1. Setiap template mempunyai aba-aba yang berbeda, jadi, kalau di dalam template blogger tidak terdapat aba-aba <div id="content-wrapper"> Anda sanggup meletakkan aba-aba HTML di atas sebelum aba-aba <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 hidangan kafe di atas, tinggal mencari aba-aba #222 lalu di ganti dengan aba-aba warna yang sesuai dengan warna template.

Share this post