Pentingkah Kotak Pencarian Pada Suatu Situs?

Imajinasi Asha

Halo, perrkenalkan aku Faycha Anastasya. Mau lebih tau tentangku? klik menu about.

Berbagi kebaikan walau hanya sebuah tulisan, mudah-mudahan menjadi ladang amal yang terus didapatkan.

Soundcloud

Tidak dipungkiri lagi, bahwa setiap situs wajib memiliki fitur pencarian. Mengapa? Coba kita bayangkan jika kita menjadi pengunjung di sebuah situs. Kita ingin mencari sebuah data atau sebuah artikel, tetapi di situs tersebut tidak terdapat kotak pencarian. Lalu apa yang harus kita lakukan? mencarinya disetiap page? Mungkin beberapa orang akan melakukan hal tersebut, kalau aku sih cukup close tab situs tersebut hehe :p

Pentingkah Kotak Pencarian Pada Suatu Situs?

Bermanfaat untuk pengunjung

Kotak pencarian tidak hanya untuk pemanis desain pada sebuah situs, tapi juga untuk mempermudah pengunjung baru maupun pengunjung tetap untuk menelusuri sebuah situs. Mungkin bagi pengunjung baru belum begitu memperhatikan fitur dari kotak pencarian. Mengapa? pengunjung baru mengakses situs kita dari mesin pencari google atau lainnya, yang langsung membuka artikel pilihannya pada saat mereka klik judul yang ada pada mesin pencari.

Bagaimana dengan pengunjung lama pada situs kita? Biasanya pengunjung lama yang bisa dibilang pembaca tetap pada situs kita akan mengakses situs kita dengan langsung mengetik nama situs pada address bar perambannya. Lalu apa masalahnya? Ya pasti masalah dong! Setelah mereka datang terus mau ngapain?! ya pasti mau cari sesuatu kan? Jadi kalau tidak ada kotak pencarian mau cari dimana? *Sebel. Bisa saja karena masalah sepele (gak sepele juga sih) ini pengunjung lama jadi tidak betah dan pergi meninggalkan situs kita selamanya (ih sedih banget).

Solusinya? Pasang kotak pencari di situs kita pastinya. Nah untuk pengguna setia blogger seperti aku ini, aku punya pilihan kotak pencari yang keren untuk kalian.

Bermanfaat untuk empunya blog

Pengunjung akan sering membuka halaman-halaman pada situs kita, menguntungkan? jelas sekali menguntungkan. Saat pengunjung mencari dan mengunjungi halaman tersebut pasti kita dapat page view di halaman tersebut dong? Mungkin jika pengunjung tersebut belum cocok dengan artikel tersebut dia bisa mencarinya kembali pada kotak pencarian pada situs kita. Wow jadi sering dikunjungi jadi semakin ingat ^_^. Lagi pula widget kotak pencarian juga bisa menjadi analisis situs dan SEO yang baik :).

Ingat artikel 7 Tips SEO untuk Blogger? Yang sudah baca pasti ingat dengan spider dong? Yups, perangkat lunak canggih yang menelusuri setiap situs dan mengambil informasi data yang ada pada situs. Setiap keyword yang dimasukkan akan menguji frase untuk memastikan konten mengarah ke sesuatu tempat yang dituju.

Pasang widget custom kotak pencari pada blogger

Blogger memang sudah menyediakan widget standarnya, namun kita bisa mengubahnya dengan selera kita. Aku mempunyai 6 style untuk kalian yang mau mengubah kotak pencarian bawaan blogger.

Kustomisasi Kotak Pencarian Style 1

<style type="text/css">
#searchbox{background:#d8d8d8;border:4px solid #e8e8e8;padding:20px 10px;width:250px}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input{outline:none}
#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDG4fBvcPVMdJmin4GduZPcozxkyjIbYAQ_5CvapCzMYBn0VDL904SKImoMWEIuwAXfYFhF-oUTODsnoe0dugxAYPdkiUo2nrgEuptyPViwK9Qap4HoEuXr7Jj6tZPcRDeEaE57hEzel1t/s1600/search-dark.png) no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}
#button-submit{background:#6A6F75;border-width:0;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}
#button-submit:hover{background:#4f5356}
#button-submit:active{background:#5b5d60;outline:none}
#button-submit::-moz-focus-inner{border:0}
</style>

<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" /></form>

Kustomisasi Kotak Pencarian Style 2

<style type="text/css">
#searchbox{width:240px}
#searchbox input{outline:none}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDG4fBvcPVMdJmin4GduZPcozxkyjIbYAQ_5CvapCzMYBn0VDL904SKImoMWEIuwAXfYFhF-oUTODsnoe0dugxAYPdkiUo2nrgEuptyPViwK9Qap4HoEuXr7Jj6tZPcRDeEaE57hEzel1t/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border:2px solid #f2f2f2;font:bold 12px Arial,Helvetica,Sans-serif;color:#6A6F75;width:160px;padding:14px 17px 12px 30px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-webkit-transition:all 0.7s ease 0s;-moz-transition:all 0.7s ease 0s;-o-transition:all 0.7s ease 0s;transition:all 0.7s ease 0s}
#searchbox input[type="text"]:focus{background:#f7f7f7;border:2px solid #f7f7f7;width:200px;padding-left:10px}
#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigHuFi4I8GkgUU__kfbKEH64AyfQbZrvUJc-cCqOBX3_6_ojl_1Ce-fj_phH2gw9JKAmcW9Uj3xYsSyEHV-HhtbMJeMVrDYFLAFgF3YuEp5API9eXzukaqUspIpxxLUqWB4-48jojvaxpM/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;width:43px;height:45px}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/></form>

Kustomisasi Kotak Pencarian Style 3

<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpPxPnPaiqTfCaQPz9vWULwUAikqmFKiUftiEWwwvBcjDv8SmIvVOgmt5fP7cjXTdgnARvHLctHr00Xmai0PDGv5DV6KUMNwy1MBune6MTDXlWSy5Xl9E2IVTfNh2ubBqcf6OH253sAecx/s1600/searchbar.png) no-repeat;width:208px;height:29px}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input{outline:none}
#searchbox input[type="text"]{background:transparent;margin:3px 0 0 20px;padding:5px 0;border-width:0;font-family:"Arial Narrow",Arial,sans-serif;font-size:12px;color:#828282;width:70%;display:inline-table;vertical-align:top}
#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhspUIeXLmy9H-FcDiRRYZBjo5XCzG3_ynW2FlhQ5mz4AgRTeYVmM7964SFQNymtcGMMFD074gn9SqwByzCpbwB9xPB1qcQv6yoP_okYdbngBIC8B8xu_kJ60_Uzvu_Y1UiD8zt7sV-jH51/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-left:10px;margin-top:4px;width:21px;height:22px}
#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjefxwOLrz6Jt5GZ7Q9f0yrhn87zHSGHbHUafmiRkS06xSJMhJ69N8fHB55dNRFriWPo7PGEPfQHC7098lEg3ppB9Ddz4mPchW00_VwDrpNbmEs07PQOOH3mAydSg08gLrW8DcSnbEYZr7L/s1600/magnifier-hover.png) no-repeat}
#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjefxwOLrz6Jt5GZ7Q9f0yrhn87zHSGHbHUafmiRkS06xSJMhJ69N8fHB55dNRFriWPo7PGEPfQHC7098lEg3ppB9Ddz4mPchW00_VwDrpNbmEs07PQOOH3mAydSg08gLrW8DcSnbEYZr7L/s1600/magnifier-hover.png) no-repeat;outline:none}
#button-submit::-moz-focus-inner{border:0}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>

Kustomisasi Kotak Pencarian Style 4

<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwaSVmqxsVQkRrRG0aGe8Fn32pVpuJOKrEE4Eh8Q8XmA2hUTFPYdyCUlmFORIDU_ETNQ5c1zDBa186fILYnSEK8n3zR-K2nVOPyiKdCbZY_0WTe8j4_yuhFFWarT-lYr34bZYdf-DAy1Ui/s1600/search-box.png) no-repeat;height:27px;width:202px}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input{outline:none}
#searchbox input[type="text"]{background:transparent;margin:0 0 0 12px;padding:5px 0;border-width:0;font:italic 12px "Arial Narrow",Arial,sans-serif;width:77%;color:#828282;display:inline-table;vertical-align:top}
#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBkXOUrQqajNETOe2FcFLYC5tn0j6x-jPq9tvq0Xo35JjPToMxaHgkzoeLgDIuTg9ATsQEdpJKiAlsT9uMMj2VRXUrIb5noH7EN7ddrtVUIGIc-QM_efKRcnxo5dQPRyi2HvlneEM3klZQ/s1600/search-button.png) no-repeat;border-width:0;cursor:pointer;width:30px;height:25px}
#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEsvtTNvwf9cakGcQpu1wvg_JlZRWb0Vh-2blNMmQ6pt0UnH3_noNYf4ZLIOselO6XZJw9yTkzYwDJJU0EAd5e7orXTcqDhb5WTUTpzbEnfQ3sH0GVE-BYPbmSc8HjcykT203qBB5jgsa3/s1600/search-button-hover.png) no-repeat}
#button-submit::-moz-focus-inner{border:0}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>

Kustomisasi Kotak Pencarian Style 5

<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMo7g1oEwBsR5IWMgXWPD_S5ElInxX9Mqsx8GgTP0w63bDkMr428NDegdWFUizEwkj-6ScITUZtDRDRNX1o5j4Wfd0cV1zkN_iSRoGQBmSp5vU1LLmKUBljn1GIl9Apwc7sSOBDJrIRHGo/s1600/search-box1.png) no-repeat;width:250px;height:65px}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input{outline:none}
#searchbox input[type="text"]{background:transparent;padding:2px 0 2px 20px;margin:10px 15px 0 0;border-width:0;font:bold 16px "Brush Script MT",cursive;color:#595959;width:65%;display:inline-table;vertical-align:top}
#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-E9l0E0LvnEN_VIWgpcFehZgd9SrJBkIKyCyuvl6YIgjagOq_MBQ2PCafUJUZys-GZMyxliK8RvAUIgvXIIAIrOJn2631TVSPp1eWACy0tadqgaA-u4LnvRiUkiENg5D4-h9vinNu_KcG/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-top:10px;width:19px;height:25px}
#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqXrBTMUJE4rK2qYaXEAeRtBCcNges5QWTcqQ-KWvxr0gOBH3TR4CWcaaF098zQzrqHJn030PRTBEFGT7nE4Gz9ljGe44PQ2FfGA6-3CwZC29yZDA0xX76VekFX4-MG5ks0pjj56Tk8tT7/s1600/magnifier-hover.png) no-repeat}
#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqXrBTMUJE4rK2qYaXEAeRtBCcNges5QWTcqQ-KWvxr0gOBH3TR4CWcaaF098zQzrqHJn030PRTBEFGT7nE4Gz9ljGe44PQ2FfGA6-3CwZC29yZDA0xX76VekFX4-MG5ks0pjj56Tk8tT7/s1600/magnifier-hover.png) no-repeat;outline:none}
#button-submit::-moz-focus-inner{border:0}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off"><input class="textarea" name="q" type="text" size="15" placeholder="Search here..." /><input id="button-submit" type="submit" value="" /></form>

Kustomisasi Kotak Pencarian Style 6

<style type="text/css">
#searchbox{width:280px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDLxm0p2OvXnZqxTirK9vAFP8fdz_Srh_g7QM79SiD-7rku-V2qhoYrGXyuG90Tr3J28GxRBPdALTsqACQjUySv9MB7GW9z1ChKnwH2iMYlVb8eC089NfJyMuEeduxKVg67yg_oig72OvI/s1600/search-box.png) no-repeat}
#searchbox input{outline:none}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input[type="text"]{background:transparent;border:0;font:14px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,"AppleGothic",sans-serif;color:#f2f2f2!important;padding:10px 35px 10px 20px;width:220px}
#searchbox input[type="text"]:focus{color:#fff}
#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwCVU5quWMMb943bci1GJdJUL8LAl7LRFnliqTJF6S9o836Bk2e7YM89-3OeO73qxcXagQufPnioA4-iStXA8VsG0fvnfAxoJp9z4kDEgfiC7dKJ1nChhDqwh4e7d3WFqxoB-RAeu0dLi4/s1600/search-icon.png) no-repeat;margin-left:-40px;border-width:0;width:40px;height:50px;cursor:pointer}
#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1eoKbRd2SBhOq6e7BDL9j8cYPoQV7By3niQQkyrS4b2owvioU5QHw5rsGrbifMhyphenhyphenMt7Za4wWd3gT9AHg7gxB256Ch151IALH0ceGU4I4sfvSeQqOcFMmlHoF1MwIIIy6TGJZ0rL64Wf73/s1600/search-icon-hover.png)}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." /><input id="button-submit" type="submit" value=" "/></form>

Cara pemasangan

Pemasangan gadget Kotak Pencarian pada blogger

Masuk ke blogger, pilih menu Layout -> Pilih Add a Gadget pada kolom yang kalian inginkan.
Kemudian pilih HTML/Javascript -> Paste script kotak pencarian yang kalian pilih diatas pada popup yang muncul.
Simpan dan lihat hasilnya~

Baiklah, aku rasa kalian sudah mengerti manfaat dari pemasangan kotak pencarian pada situs. Apalagi kalian bisa mengubah dengan keinginan sendiri :). Mungkin kedepannya aku akan menambahkan style kotak pencarian yang lain, untuk sekarang hanya 6 yang bisa aku berikan.

Poka! Do vstrechi~