Cara Membuat Tombol Search Di Samping Menu
Larepct.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
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
Contoh penempatanya seperti di bawah ini
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.
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 Larepct.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.