Search Box
Kotak pencarian atau kotak penelusuran yang berada pada blog, ini berfungsi untuk mempermudah pengunjung dalam mencari sebuah artikel atau judul tulisan artikel , tanpa harus si pengunjung keluar dari halaman browsing..
Tentunya ,,dalam blog tersebut sudah terpublish artikel dengan berbagai judul ,, sehingga jika di lalukan pencarian menggunakan search box maka artikel tersebut akan di tampilkan secara menyeluruh ,, maksudnya terbidik oleh keyword yang di tulis dalam kotak pencarian tersebut.
"Sebenarnya dalam pengaturan blogger tersebut sudah menyediakan widget kotak penelusuran ,, hanya saja mungkin sobat ingin memasang script atau tampilan search box yang tampil beda dari pada bawaan template blogger tersebut,,
Lantas bagaimana caranya ,,
Belum lagi kalau sobat ingin yang tampilanya sticky , alias menempel di bagian atas postingan , sehingga kalau di scroll , kotak search box tersebut tetap muncul di bagian atas,,
Contoh Search Box Sticky Di Atas Header
Pada contoh gambar di atas adalah tampilan search box sticky..
Jika sobat ingin membuatnya , sobat bisa ikuti panduan di bawah ini...
Baca juga : Cara Mengganti Tombol Search Viomagz
Yuk simak artikel dari westoiku yang kali ini akan membahas tentang cara membuat kolom search pada blogger.
Cara Membuat Kotak Penelusuran Sticky Di Header
Jika sebelumnya memang template blogger sobat tidak sticky , ini akan lebih mudah ,,
Tapi jika template blogger sobat headernya tampilan sticky , sobat ubah dulu agar tidak sticky ,, ini bertujuan supaya tampilan headernya full scren..
Ok lanjut..
Saran :
Sebaiknya sobat BackUp terlebih dahulu template blogger milik sobat ,, apabila terjadi error bisa segera di pulihkan.
1. Buka Akun Blogger.
2. Pilih Thema , Edit HTML.
Cari Kode <body>
Lalu taruh kode ini tepat di bawahnya.
ini code nya gaes..
<style>
#search-box {position: fixed;width: 100%;margin: 0;}
#search-form {height: 40px;border: 1px solid #999;-webkit-border-radius: 5px;
-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}
#search-text {font-size: 14px;color: #ddd; border-width: 0;background: transparent;}
#search-box input[type="text"]
{width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 42px;
width: 80px;font-size: 14px;color: #fff;text-align: center;
line-height: 42px;border-width: 0;background-color: #ff0000;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Cari Artikel Disini gaes..' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>
Selanjutnya,, klik simpan ,,
Selesai.
Keterangan :
Position : fixed Artinya sticky
Jika ingin di ubah tidak sticky maka ganti menjadi absolute
Background-color :#fff , artinya warna putih , jika ingin transparan ,, ganti dengan kode transparent
Background-color: #ff0000 artinya warna merah ,, silahkan ganti sesuai warna keinginan sobat masing masing.
Cari Artikel Disini gaes.. silahkan ganti kata tersebut , misal , Ketik dan Enter
Search bisa juga di ganti menjadi Enter
Sekian tutorial dari kami ,,
Semoga mudah di pahami...!!
Demikian artikel dari westoiku seputar blogger yang saat ini membahas tutorial tentang cara membuat search box pada blogger.
Post a Comment