Cara Memasang Kotak Search di Menu Bar

Kotak Search merupakan sebuah tools yang dapat memudahkan pengunjung dalam mencari artikel yang ingin di baca. Maka dari itu, pada kesempatan kali ini saya akan sedikit berbagi tentang bagaimana Cara MemasangKotak Serach di Menu Bar. 

Read More,......
Kotak pencarian ini memiliki tampilan yang sangat simple atau sederhana mungkin karena itulah sehingga banyak para blogger memasang kotak pencarian ini. 
Jika ingin Anda ingin membuatnya, terlebih dahulu harus mempunyai menu bar, jika belum ada silahkan bikin dulu ya….. atau Anda boleh juga membaca pada artikel sebelum ini tentang Cara Membaut Menu Bar di Blogspot.

Berikut urutan untuk membuatnya : 
1. Login ke Blog > Layout (template) >> Edit HTML >>> Cari kode ]]></b:skin> 

2. Lalu masukan kode ini tepat di atas kode ]]></b:skin>

#navright { 

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


3. Lalu klik Save 

4. Setelah itu buka widget menu bar milik Anda dan lalu masukan kode di bawah ini sebelum kode </ul></div> :

<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/AVvXsEgtE7zk_ngyxJVIZ-7dgV-k-g9N1HD2hTBnkBCMgw_QnIOR6rfQUGNv_5ZW6IjtA49bActILyaXvDTbE5dOvdo0RrMHOjcmSZyrmtxa4yVhhpbNJ345rD4C72KJ-MmvHNQw8CbPXn4P6sM/s1600/magnifier.png' style='margin-left: 5px; margin: 1px 15px 0px 13px;' type='image' value='Search'/></form> </div> 


Maka akan seperti ini, jika Anda sudah memasukan kode diatas :
Contoh ini milik blog ini.


<div id='menubar'>
<ul>
<li><a href='http://multiblog137.blogspot.com'>Home</a></li>
<li><a href='http://multiblog137.blogspot.com/search/label/bisnis online'>Bisnis Online</a></li>
<li><a href='http://multiblog137.blogspot.com/search/label/blog'>Blog</a></li>
<li><a href='http://multiblog137.blogspot.com/search/label/tutorial'>Tutorial</a></li>
<li><a href='http://multiblog137.blogspot.com/search/label/daftar isi'>Daftar Isi</a></li>
<li><a href='https://plus.google.com/102701880217391607134'>About Me</a></li>
<div id='navright'> <form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' size='50' type='text' value='Search.......'/><input id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtE7zk_ngyxJVIZ-7dgV-k-g9N1HD2hTBnkBCMgw_QnIOR6rfQUGNv_5ZW6IjtA49bActILyaXvDTbE5dOvdo0RrMHOjcmSZyrmtxa4yVhhpbNJ345rD4C72KJ-MmvHNQw8CbPXn4P6sM/s1600/magnifier.png' style='margin-left: 10px; margin: 1px 20px 13px 13px;' type='image' value='Search'/></form> </div> 
</ul>
</div>

Setelah itu Anda klik SAVE, dan selsesai. Silahkan Anda lihat hasilnya di tampilan blog Anda.
Cukup mudah bukan…???. Semoga bermanfaat,…..


Salam,……

Den AriyDitulis Oleh : Den Ariy

Anda sedang membaca artikel tentang Cara Memasang Kotak Search di Menu Bar, Semoga artikel ini dapat menambah pengetahuan anda. Sobat diperbolehkan menyebar luaskan artikel ini, namun harus meletakkan link dibawah ini sebagai sumbernya.

No comments: