Bagi para pengelola blog, kotak pencarian atau search box menjadi salah satu kelengkapan navigasi yang cukup penting bagi sebuah blog. Dengan adanya fitur ini, web atau blog pun akan semakin mudah untuk dijelajahi oleh para pembacanya. Para pengunjung dapat mempergunakan fitur ini untuk mencari artikel yang mereka kehendaki di dalam situs atau blog tersebut.
Bagi pengguna platform blogspot, fitur kotak pencarian sebenarnya telah tersedia secara default. Untuk menampilkannya, kita tinggal mengaturnya dengan menambahkannya [add gadget] pada menu layout [tataletak]. Hanya tampaknya, kebanyakan pengelola blog cenderung menggunakan kotak pencarian dari pihak luar, hasil modifikasi, atau bawaan dari template yang mereka beli/unduh. Mungkin tampilannya lebih keren sehingga lebih sedap dipandang.
Nah, pada postingan kali ini saya ingin berbagi tutorial tentang cara membuat kotak pencarian [search box] yang sederhana tapi tampak keren dan elegan. Tampilannya juga responsive sehingga mobile friendly. Adapun tampilan kotak pencariannya akan seperti berikut ini:
Silahkan anda bisa meletakkan kotak pencarian tersebut misalnya di bagian sidebar, header, atau di tempat lainnya terserah anda. Usahakan mudah terlihat pengunjung agar mereka dapat menggunakannya untuk mencari informasi yang diinginkan dengan memasukkan keyword yang dibutuhkan.
Membuat Kotak Pencarian Keren Sederhana
1. Buka akun blogger anda.
2. Pilih menu tema dan klik edit html.
3. Cari kode ]]> atau dan letakkan kode berikut ini di atasnya.
.searchbox{margin:1px 10px 15px 0;width:100%;}.searchbox form{border:1px solid #ddd;font-size:14px}.searchbox form input{display:block!important;margin:0;border:0;padding:0;outline:0;height:32px;line-height:32px;font-size:13px;border-radius:3px!important}.serch{float:left;width:85%!important;text-indent:10px}.serchg{float:right;width:15%!important;height:32px!important;padding:0!important;background:#090;color:#fff;border:0!important;font-size:29px!important}.serchg:hover{background:#070}
4. Simpan template.
5. Pilih menu layout [tataletak].
6. Klik tambahkan gadget [add gadget] dan pilih html/javascript.
4. Kosongkan kolom judul dan masukkan kode berikut ini ke dalamnya.
6. Klik simpan.
Silahkan dilihat hasilnya. Anda juga bisa ubah warna background ikon lup [kaca pembesar] nya pada kode yang saya tandai merah di atas. Demikianlah tutorial kali ini. Semoga bermanfaat.
Labels: Blogging
Thanks for reading Cara Membuat Kotak Pencarian [Search Box] Keren Simpel Sederhana di Blog. Please share...!
Cara Membuat memasang Widget Search Box Kotak Pencarian Yang Mengarahkan link Ke Google Di blogger ~ Halo sobat blogger kali ini admin jagoan kode akan memberikan sedikit tips dan trik mengenai bagaimana cara membuat kotak pencarian atau search box yang bila diketik katanya maka secara otomatis keyword atau kata kunci akan diarahkan ke google dan menyertakan link blog yang kita punya Kali ini saya akan berbagi tips untuk
pembuatan kotak pencarian yang nanti hasilnya akan mengarah langsung ke google dengan menampilkan isi konten yang kita miliki. Sebenarnya banyak yang sudah memasang widget kotak pencarian ini, namun mungkin kebanyakan justru malah jarang memberikan triknya atau mungkin memang tidak begitu penting. saya mendapatkan script ini dari forum luar negeri yang memang sudah sangat lama sekali. blogger Indonesia sendiri ada beberapa yang menggunakan widget search box google ini. untuk contoh
widgetnya kalian dapat melihat pada bagian kanan blog jagoankode ini. Nah lalu bagaimanakah cara kerja dari widget kotak pencarian /search box google ini. mari kita simak ulasan singkatnya berikut ini. jika diperhatikan dengan seksama widget kotak pencarian bila diketik maka secara otomatis menampilkan query yang
relevan terhadap keyword yang dimasukan dan ditampilkan langsung di blogger, nah untuk search box yang saya maksud ini jika kalian mengetik kata kunci atau keyword maka akan terbuka langsung pada panel google dengan menyertakan link situs yang kalian punya, jadi format pengetikan kata kunci search box google akan menjadi seperti ini : Kata Kunci / Keyword Site : //jagoankode.blogspot.com/ kalian bisa melihat screen
shot perbedaan antara kotak pencarian default dengan kotak pencarian dari google.Cara Kerja Widget Kotak Pencarian [Search BOX] Google
sebenarnya jika diperhatikan keduanya terlihat sama namun terdapat sedikit perbedaan mengenai dimana postingan yang kalian cari ditampilkan, lalu apa fungsi memasang kotak pencarian google ini ?
Fungsi Dan Manfaat Memasang Kotak Pencarian [Search BOX] Yang Mengarah Ke Google
untuk fungsi dan manfaat sebenarnya tidak ada hal hal yang khusus hanya akan membuat kalian tampil agak sedikit berbeda saja dari blogger lainnya, selain itu jika kalian peain adsense tentunya akan semakin menguntungkan kalian, karna search box ini akan banyak mendata tayangan referer yang berasal dari google. selain itu juga meningkatkan popularitas artikel dimata search engine dengan catatan yang mencari postingan tersebut dalam jumlah besar.
oke setelah memahami fungsi menfaat dan kegunaan serta cara kerja kotak pencarian dari google ini maka kita akan melanjutkan ke langkah pembuatannya. untuk itu mari simak langkah lengkapnya berikut ini :
Cara Membuat/Memasang Kotak Pencarian [Search BOX] Yang Mengarah Ke Google
1. silahkan buka blogger kalian masing masing
2. Pergi kemenu tata letak/layout >> Tambahkan Gadget/Add GAdget>>
HTML/Javascript
3. lalu pastekan kode dibawah ini
.search-input input, .search input {
width: 94.7%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
height: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
4. Jangan Lupa simpan dan lihat hasilnya
Catatan :
ganti tulisan URL blog //jagoankode.blogspot.com/ dengan yang kalian punya
placeholder=”Search this blog…” Ganti tulisan Search this blog dengan teks yang kalian inginkan Silahkan berkreasi dengan css versi kalian
Demikianlah tutorial mengenai Membuat Kotak Pencarian [Search BOX] Yang Mengarah Ke Google semoga informasi ini dapat membantu kalian semua sekian dan terima kasih 😀
You may also like
About the author
Pengetahuan adalah kebebasan, dan ketidaktahuan adalah perbudakan.