5 Desain Kreatif Search Box untuk Blog

Di posting sebelum ini saya sudah menjelaskan caranya memasang search box di blog. Tapi kalau Anda lihat desainnya jadul dan kurang atraktif, nah terus kenapa kalo ngga menarik yang penting kan fungsinya? Ya ngga apa-apa juga sih, tapi kan semakin menarik maka pengunjung pun akan lebih suka stay di blog Anda. Ingat jaman sekarang cara penyampaian dan desainlah yang bersaing karena saya yakin 99% setiap artikel yang Anda buat pasti sudah ada yang mendahului membuatnya, right? Jadi jangan heran jika ada 2 blog dengan tema artikel sama tapi salah satunya lebih ramai gara-gara unggul di desain tampilan.

Apakah perlu memasang search box di blog?
Yups, penting banget masang search box di blog. Coba Anda perhatikan ilustrasi cerita berikut:

”Sudah 3 hari 7 malam ini Aryo masih belum bisa tidur, dia masih mencari artikel di sebuah blog tentang cara merias kucing buat kucing betinanya yang mau nikah. Ya dia mencarinya artikel per artikel yang mana ada total 14045 artikel di blog X tersebut. Aryo rela melakukan itu karena rasa cintanya pada sang kucing walaupun harus melakukan pencariannya dengan internet berkecepatan 13 bytes/sec.”

Dengan adanya search box para pengunjung bisa mencari artikel yang dibutuhin dengan lebih mudah, ingattt siapapun yang memudahkan urusan orang maka akan dimudahkan urusannya pula, hehe. Coba bayangkan kalau blogmu sudah punya ratusan post, pastilah para visitor akan kesulitan mencari artikel spesifik yang mereka butuhkan, bisa-bisa karena mereka bosan mencari satu per satu, judul per judul, para visitor malah nyari di blog sebelah, tapi dengan adanya search box mereka dapat menemukan artikel yang dibutuhkan tanpa usaha terlalu keras. Visitor puas tanpa perlu Anda lemas :D

Step by Step

1. Masuk ke blogger dashboard dan pilih blog Anda.
2. Pilih opsi Layout.
3. Pilih opsi Add a Gadget.
4. Pilih widget HTML/JavaScript.
5. Pada jendela HTML/Javascript paste kode search box-nya dan save.

Dynamic width (Expandable) search box Design
Menurut saya inilah search box yang paling unik, karena saat disorot (hover) pake mouse maka ukurannya akan berubah secara otomatis. Dan pilihan warna serta lebar search box bisa Anda sesuaikan sendiri.

KODE:

<style>
#wc-searchexpandbox1
{
padding:10px;
}

#wc-searchexpandsubmit1
{
border:1px solid #111111;
background: #111111;
padding:5px;
color:#ffffff;
font:14px verdana;
}

#wc-searchexpandinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:65px;
}

#wc-searchexpandinput1:hover
{
width:200px;
}

</style>

<div id='wc-searchexpand1'> <form expr:action='data:blog.homepageUrl + "search/"' method='get' id="wc-searchexpandbox1"> <input name='search' id='wc-searchexpandinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/> <input id='wc-searchexpandsubmit1' type='submit' value='Search'/> </form> </div>

Clean Search box

KODE:

<style>
#wc-searchsimplebox1
{
padding:10px;
}

#wc-searchsimplesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}

#wc-searchsimpleinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
width:130px;
font:14px verdana;
}

</style>

<div id='wc-searchsimple1'> <form expr:action='data:blog.homepageUrl + "search/"' method='get' id="wc-searchsimplebox1"> <input name='search' id='wc-searchsimpleinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/> <input id='wc-searchsimplesubmit1' type='submit' value='Search'/> </form> </div>

Elegant Green

KODE:

<style>
#wc-searchgreen1
{
background: rgb(143,196,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}

#wc-searchgreenbox1
{
padding:10px;
}

#wc-searchgreensubmit1
{
border:1px solid green;
background: green;
padding:5px;
color:#ffffff;
font:14px verdana;
}

#wc-searchgreeninput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}

</style>

<div id='wc-searchgreen1'> <form expr:action='data:blog.homepageUrl + "search/"' method='get' id="wc-searchgreenbox1"> <input name='search' id='wc-searchgreeninput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/> <input id='wc-searchgreensubmit1' type='submit' value='Search'/> </form> </div>

Dark Black

KODE:

<style>
#wc-searchblack1
{
background: #222222;
border-radius:10px;
width:290px;
}

#wc-searchblackbox1
{
padding:10px;
}

#wc-searchblacksubmit1
{
border:1px solid #222222;
background: #dc4523;
padding:5px;
color:#ffffff;
font:14px verdana;
}

#wc-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}

</style>

<div id='wc-searchblack1'> <form expr:action='data:blog.homepageUrl + "search/"' method='get' id="wc-searchblackbox1"> <input name='search' id='wc-searchblackinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/> <input id='wc-searchblacksubmit1' type='submit' value='Search'/> </form> </div>

Easy Blue

KODE:

<style>
#wc-searchblue1
{
background: rgb(37,141,200); /* Old browsers */
background: -moz-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(37,141,200,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,141,200,1)), color-stop(100%,rgba(37,141,200,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}

#wc-searchbluebox1
{
padding:10px;
}

#wc-searchbluesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}

#wc-searchblueinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}

</style>

<div id='wc-searchblue1'> <form expr:action='data:blog.homepageUrl + "search/"' method='get' id="wc-searchbluebox1"> <input name='search' id='wc-searchblueinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/> <input id='wc-searchbluesubmit1' type='submit' value='Search'/> </form> </div>