Cara Membuat Tombol Search Di Samping Menu

.com- cara membuat tombol search atau tombol pencarian di samping menu, terutama pada template buatan arlina design seperti contoh di blog ini www.oke-goo.web.id. Kotak pencarian artikel bisa juga disebut icon blog karena pengunjung bisa mencari apa yang mereka inginkan, yang terdapat pada blog

Tombol search pada template yang saya sebutkan di atas, pada tampilan mobile terletak di atas Header sedangkan di tampilan dekstop awalnya tidak ada, dan kemudian saya memasangnya manual di letakkan pada sidebar sebelah kanan alhasil saya kurang nikmati hasilnya

Saya lihat-lihat kayaknya kurang menarik karena di tempatkan pada sidebar, akan ,muncul tombol search 2 buah pada tampilan mobile, disitulah saya mempunyai gambaran untuk menambahkan tombol pencarian di samping menu atas sebelah kanan blog, dan ternayata keren juga hehe

Dan inilah caranya membuat tombol search di samping menu

Login blogger
Klik menu Tema
Edit HTML
Copy paste kode CSS di bawah ini letakkan di kumpulan kode CSS template kalian

 /* Search Box .com */ #search{position:relative;float:right;margin:8px 10px 5px 10px}li.search{float:right;line-height:normal} #search input[type="text"]{float:left;background:#444;height:28px;line-height:28px;border:0 none;font-size:12px;font-weight:500;width:200px;padding:0 10px} #search input#search-button{height:28px;line-height:28px;background:#FC4F3F;border:2px solid#fff;float:right;padding:0 10px;cursor:pointer;color:#fff}#search input#search-button:hover{background:#333} #search input[type="text"]:focus{background-color:#fff;text-shadow:none!important;outline:none;color:#555} 

Kemudian selanjutnya silahkan cari kumpulan kode menu yang ada pada template kalian copy paste kode di bawah ini letakkan di antara </nav> atau </li> sesuai menu kalian

<li class='search'> <form action='/search' id='search' method='get'> <input name='q' placeholder='Pencarian...' size='50' type='text'/><input id='search-button' type='submit' value='Cari'/></form> </li>

Contoh penempatanya seperti di bawah ini

<li class='menu-item'><a href='https://www.instagram.com/ukim_lp/' rel='nofollow' target='_blank' title='Follow Our Instagram'><i class='fa fa-instagram'/></a></li>    <li class='search'> <form action='/search' id='search' method='get'> <input name='q' placeholder='Pencarian...' size='50' type='text'/><input id='search-button' type='submit' value='Cari'/></form> </li> 

Keteranganya
Warna biru adalah kode menu yang ada pada template kalian, kode merah adalah kode yang telah kita tambahkan tadi, jadi pada contoh menu diatas kita menmabahkan kode di bawah </li> diatasnya </div>

Baca disini : Cara membuat tombol share responsive lengkap dengan whatsapp

Kemudian silahkan simpan apabila sudah dilakukan seperti diatas, dan taraaa lihat hasilnya sudah muncul kan tombol pencarian di samping menunya. Mudah bukan kalau masih tidak muncul atau kesulitan coba tanyakan di kolom komentar

Oke selamat mencoba dan mudah-mudhan berhasil.