Memasang Kotak Search di Menu Bar

Merupakan sebuah tools yang dapat mempemudah pengunjung dalam menemukan artikel yang ingin di baca. Oleh karena itu, Tutorial blog yang akan disampaikan adalah tentang Cara Membuat Kotak Pencarian yang berada pada Menu Bar di blog anda.
Kotak pencarian yang di tawarkan hari ini, memiliki tampilan yang sangat simple atau sederhana.
Mungkin karena memiliki tampilan yang sangat sederhana inilah sehingga banyak para blogger memasang kotak pencarian ini.
Jika ingin melakukan ini anda terlebih dahulu harus mempunyai menu bar, jika belum ada silahkan bikin dulu ya…..

Jika sudah punya sekarang tinggal tambahkan search box-nya :

1. Login ke Blog > Layout (tata letak) >> Edit HTML >>> Cari kode ]]></b:skin>

2. Copy paste kode ini di atas kode ]]></b:skin>

#navright {
width: 220px;
background: #FF1202;
font-size: 11px;
float: right;
padding-top:0px;
margin: -4px;
}

Save

3. buka link menu bar milik anda dan copy paste kode ini

<div id='navright'> <form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' size='25' type='text' value='Cari Artikel Disini'/><input id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfuVN5uyq7k8sMexoGrqagE8xo4zsa3XVx1RqyBMDtG_ndg5eh07VR_7qcm7YNl-NKMNv9FvZnr6qvQgkQ9LcrahfQ20UVprQZIRxtiseLplNP6qMot5q1OQ0LgSZdzdhhTenZiGmocho/s1600/magnifier.png' style='margin-left: 5px; margin: 1px 15px 0px 13px;' type='image' value='Search'/></form> </div>

Contoh milik saya (PERHATIKAN PENEMPATANNYA):

<!-- Tab Menu Mulai -->
<table border='0' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeX84tgEYFS9xZFRoMjRqLNeVS04RP3kzG2taSsm2uJTyho0Hyy0sKG_t-_pvgKAsgzyfnf9574ObmdMmuSBa9gcOdZaqx5RrLfQKc7QdovWi1DUcTNybQvTGxc3alYZ-hjTv0uqi_NPE/s400/title.jpg) repeat-x; margin-top: 10px; margin-bottom: 10px;' width='100%'>

<tr><td align='left' id='menu'>
<a href='#'>Menu1</a> |
<a href='#'>Menu2</a> |
<a href='#'>Menu3</a> |
<a href='#'>Menu4</a> |
<a href='#'>Menu5</a> |
<a href='#'>Menu6</a> |
<a href='#'>Menu7</a> |
<a href='#'>Menu8</a> |
<a href='#'>Menu9</a> |
<a href='#'>Menu10</a>

<div id='navright'> <form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' size='25' type='text' value='Cari Artikel Disini'/><input id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfuVN5uyq7k8sMexoGrqagE8xo4zsa3XVx1RqyBMDtG_ndg5eh07VR_7qcm7YNl-NKMNv9FvZnr6qvQgkQ9LcrahfQ20UVprQZIRxtiseLplNP6qMot5q1OQ0LgSZdzdhhTenZiGmocho/s1600/magnifier.png' style='margin-left: 5px; margin: 1px 15px 0px 13px;' type='image' value='Search'/></form>
</div>
</td></tr>
</table>
<!-- Tab Menu Selesai -->

Gampang kan….. Semoga Membantu.