Memasang Kotak Search di dalam Menu Bar | Blogger Ponorogo
Headlines News :
Home » » Memasang Kotak Search di dalam Menu Bar

Memasang Kotak Search di dalam 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/AVvXsEgXLmDxc87XMIWMjxDsPIVuP_kWVFwMwgw9oOk5_8fMBzS6O5oPd0-UjOZJuni3uuQ_1ZbbGVrlFoK-PkYxPby3b_D-KXiFn7Tm4Z4ocX1UmOh0xLHNmxHZ-m6SodPjt84R68pS30LdHpU/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/AVvXsEjM5EcdzR4NQiUc3gyHdagaKiP6Ee3BHlQmaRUQDLqvGfL7Nqn5zjJ8rRdylRILCbSgKPowA_VJMRpeQbNRq6Pt-k4hGVKmwvM3petqKqrJapSzBuxpBr2XUil9KnWJXzFxj2aCaEpoh14/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/AVvXsEgXLmDxc87XMIWMjxDsPIVuP_kWVFwMwgw9oOk5_8fMBzS6O5oPd0-UjOZJuni3uuQ_1ZbbGVrlFoK-PkYxPby3b_D-KXiFn7Tm4Z4ocX1UmOh0xLHNmxHZ-m6SodPjt84R68pS30LdHpU/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.
Share this article :

1 komentar:

  1. Kalau menu search dari penelusuran khusus google bisa di letakkan di situ juga gak mas.

    BalasHapus

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Blogger Ponorogo - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger