Memasang Kotak Search di Menu Bar - Hallo sahabat Sopa, Pada Artikel yang anda baca kali ini dengan judul Memasang Kotak Search di Menu Bar, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Tips n Tricks Blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Memasang Kotak Search di Menu Bar
link : Memasang Kotak Search di Menu Bar

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/AVvXsEjaEXu3pc3ERgcwEwlPJMwm90IJOn6kwmfclzAvgfKPy5cS-0UrPXXRIBC3IY4pojCkZa7gAoAp1rfgpWYexs3TCnuoh17TBv357Q3R2gUScLNX02YBTL6r2ln1vLccVQ2nKwPAAt3rZXg/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/AVvXsEhRNDCJFs9G4t4nougsNcjdgPjLieOllXbZi-GV8XsYDNcu6F-SQaZ7x3pus0BxMCsg5St7R8JJ8cHxQGFPA1rUxiLZLZVCaNFcCWnuRVba3KrCy8dqribRsQ4Wjt4m7-Nex_9NUi-pDBU/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/AVvXsEjaEXu3pc3ERgcwEwlPJMwm90IJOn6kwmfclzAvgfKPy5cS-0UrPXXRIBC3IY4pojCkZa7gAoAp1rfgpWYexs3TCnuoh17TBv357Q3R2gUScLNX02YBTL6r2ln1vLccVQ2nKwPAAt3rZXg/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.

Demikianlah Artikel Memasang Kotak Search di Menu Bar

Sekianlah artikel Memasang Kotak Search di Menu Bar kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Memasang Kotak Search di Menu Bar dengan alamat link https://sopasopi.blogspot.com/2013/03/memasang-kotak-search-di-menu-bar.html

Tweet