Cara Memasang Widget Kotak Pencarian Atau Search Box di Blog

Kotak Pencarian Atau Search Box Elegan dan Simple di Blog di situs web atau blog wajib dilakukan para desainer/developer blog. Fungsi kotak pencarian untuk memudahkan pengunjung mencari data atau informasi yang mereka butuhkan di blog kita.

Ibarat kompas kotak pencarian adalah petunjuk untuk mencari tempat artikel berada. Jika template anda belum ada kotak pencariannya maka saat ini juga anda wajib memasangkannya.

Apakah wajib memasang kotak pencarian untuk blog seperti tulisan di atas?

Mungkin kalau artikel anda kurang dari 10 artikel kotak pencarian tidak penting untuk blog anda tetapi jika anda mempunyai artikel lebih dari 10 atau mungkin ratusan artikel. keberadaan kotak pencarian merupakan hal wajib ada yang harus anda pasang.

Dengan begitu pengunjung atau pembaca blog anda tidak tidak kebingungan jika ingin mencari isi lain dari blog anda.

Memudahkan pengunjung untuk mengakses halaman-halaman artikel anda juga bagian dari suksesnya blog kita jika ingin bermitra dengan google adsanse.

Keberadaan kotak pencarian di blog sangat User Friendly diperlukan sekali mengingat mayoritas user membuka mesin pencari seperti google untuk mencari info yang mereka butuhkan di blog atau website untuk mencari info yang lain.

Banyak tutorial yang membagikan cara membuat widget pencarian ini, jadi pilihlah yang simple dan tidak terlalu memberatkan loading blog anda.

Cek dengan GT Metrix yaitu alat untuk mengecek kecepatan respon atau loading anda sebelum dan sesudah anda menambahi widget pencarian blog ini.

Apakah widget pencarian blog ini memperlambat atau malah sebalikanya.  Jika memperlambat carilah widget pencarian yang simple dan tidak memberatkan loading blog.

Ada tiga pilihan kotak pencarian yang akan kami tunjukkan disini, oke langsung saja kita lihat tutorialnya dan cara pemasangannya.

sebaiknya sebelum memasang atau menggunakannya kode-kode dibawah ini lebih baik anda membackup template anda.

Cara Memasang Widget Kotak Pencarian Keren di Blog

1.  Layout  >  Add a Gadget di Sidebar
2.  Pilih  HTML/Javascript 
3.  Copy & Paste kode berikut ini di kotak Contents
4.  Save!

1) Kotak Pencarian Atau Search Box (Seperti gambar diatas)

<style>
#search-box {
position: relative;
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: #4d90fe;
-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='Search Here' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

2) Kotak Pencarian Atau Search Box Model Kedua

<style>
.serching{margin:0;width:100%;}.serching form{border:1px solid #ddd;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:14px}.serching form input{display:block!important;margin:0;border:0;padding:5px 0;outline:0;height:20px;line-height:20px;font-size:13px;border-radius:0!important}.serch{float:left;width:85%!important;text-indent:10px}.serchg{float:right;width:15%!important;height:30px!important;padding:0!important;background:gray;color:#fff;border:0!important;font-size:12px!important}
</style>
<div class='serching'><form action='/search?q='><input class='serch' name='q' placeholder='Cari...' title='Cari Tulisan di Sini' type='text'/><button class='serchg' type='submit'> GO </button><span style='clear: both;display:block'/></span></form></div>

3) Kotak Pencarian Atau Search Box Model Ke Tiga

<style type="text/css">
form#_bcd_141013_search_form {
    position: relative;
    display: block;
    clear: both;
    float: none;
    border: 1px solid #dddddd;
    padding: 5px;
    font-size: 12px;
 background-color: #ffffff;
}
input#_bcd_141013_search_text {
    width: auto;
    border: none;
    margin: 0;
    padding: 0 0 0 4px;
    line-height: 2em;
    height: 2em;
    outline: none;
    background: transparent;
    color: #000000;
}
button#_bcd_141013_search_submit:hover {
    opacity: 0.8;
}
button#_bcd_141013_search_submit {
    width: auto;
 padding: 0 5px;
    margin: 0;
    position: absolute;
    right: 5px;
    top: 5px;
    line-height: 2em;
    height: 2em;
    text-align: center;
    cursor: pointer;
 border: none;
 min-width: 2em;

 color: #000000;
    background: #ffffff;
}
html[dir="rtl"] button#_bcd_141013_search_submit {
 right: auto;
 left: 5px;
}
</style>

<form action='/search' id='_bcd_141013_search_form' method='get'>
 <input id='_bcd_141013_search_text' name='q' value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" type='text'/>
 <button type="submit" id="_bcd_141013_search_submit"><i class="fa fa-search"></i></button>
</form>

Demikian contoh demo Kotak Pencarian Atau Search Box Elegan dan Simple di Blog semoga dapat diterapkan diblog anda. salam sukses

sumber : http://blogromeltea.blogspot.co.id/2015/10/cara-memasang-kotak-pencarian-keren-di.html