Kotak pencarian merupakan salah satu tools pendukung terpenting dari suatu web/blog. Dengan adanya kotak pencarian akan mempermudah pembaca mencari suatu artikel pada blog Anda. Apalagi blog Anda merupakan sebuah sumber informasi Gado Gado yang Komplit.
Untuk meminimalisir ruang posisi kotak pencarian, sebaiknya di posisikan di menu tab. Di samping itu posisi ini juga mudah terlihat oleh pengunjung anda. BPO kali ini akan berbagi cara untuk membuat kotak pencarian di menu tab sebuah blog.
Masuklah ke account blogger Anda. Ambil menu Template dilanjutkan HTML EDITOR. Cari kode ]]></b:skin> untuk mempermudah pencarian gunakan bantuan CTRL+F. Copy kode berikut ini dan pastekan di atas kode ]]></b:skin> tadi.
Background #FF1202 merupakan kode warna background, bisa Anda ganti dengan kode warna lain. Untuk kode warna lain dalam HTML silahkan bisa dilihat di : Daftar Kode HTML . Selanjutnya carilah bagian dimana script navigasi atau menubar juga boleh dari blog anda berada. Cari posisi Navigasi (Biasanya dengan kata pencarian nav) Pada template blog Anda Lalu Copy kode ini dibawahnya.
Jika Anda memiliki banyak menu pada menu bar, sebaiknya jangan mengunakan cara ini. Posisikan saja kotak pencarian mungkin bisa di bagian top header. Selain itu juga bisa kotak pencarian diposisikan pada sidebar kanan. Namun sebelumnya lakukanlah penyesuaian ukuran kotak pencarian itu sendiri terlebih dahulu.
Untuk meminimalisir ruang posisi kotak pencarian, sebaiknya di posisikan di menu tab. Di samping itu posisi ini juga mudah terlihat oleh pengunjung anda. BPO kali ini akan berbagi cara untuk membuat kotak pencarian di menu tab sebuah blog.
Masuklah ke account blogger Anda. Ambil menu Template dilanjutkan HTML EDITOR. Cari kode ]]></b:skin> untuk mempermudah pencarian gunakan bantuan CTRL+F. Copy kode berikut ini dan pastekan di atas kode ]]></b:skin> tadi.
#bponavid { width: 221px; background: #FF1202; font-size: 11px; float: right; padding-top:0px; margin: -4px; }
Background #FF1202 merupakan kode warna background, bisa Anda ganti dengan kode warna lain. Untuk kode warna lain dalam HTML silahkan bisa dilihat di : Daftar Kode HTML . Selanjutnya carilah bagian dimana script navigasi atau menubar juga boleh dari blog anda berada. Cari posisi Navigasi (Biasanya dengan kata pencarian nav) Pada template blog Anda Lalu Copy kode ini dibawahnya.
<div id='bponavid'> <form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' size='25' type='text' value='Pencarian'/><input id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizO1EMkTpG6CxvXDNWaC7PWJ1ms-3N5xYJT5bHCspynntqoeVzP93f43cz3uATwAQeWP5mO6Hvi66F-vvcfnpASToeURYtDjogHCMlIEw2KQJ03jmaxJDbLwBc3KIbzkGbx4rtmclj0PU/s1600/magnifier.png' style='margin-left: 5px; margin: 1px 13px 0px 10px;' type='image' value='Search'/></form> </div>Jika telah melakukan semua langkah-langkah di atas. Silahkan template blog Anda di simpan. Lihatlah bagaimana tampilan kotak pencarian Anda sekarang. Lumayankan untuk menghemat space. Lagian dengan begitu blog pastinya akan terlihat rapi. Hanya saja gunakanlah ilmu ini jika pada blog Anda tidak terdapat banyak hal pada menu bar.
Jika Anda memiliki banyak menu pada menu bar, sebaiknya jangan mengunakan cara ini. Posisikan saja kotak pencarian mungkin bisa di bagian top header. Selain itu juga bisa kotak pencarian diposisikan pada sidebar kanan. Namun sebelumnya lakukanlah penyesuaian ukuran kotak pencarian itu sendiri terlebih dahulu.
Share Yuk
Related Posts
Loading...