Tampilan atau model kotak pencarian ini biasanya di perbagus tampilannya dengan cara menambah kode CSS. Dengan ditambah kode CSS maka tampilan formnya bisa di desain dengan berbagai tampilan.
Sebelumnya kita sudah berbagi artikel mengenai cara membuat search box kustom google. Maka pada artikel ini kita akan mencoba menulis tutorial cara mempercantik search box dengan menambah sedikit kode CSS.
Adapun artikel cara membuat search box banyak kita jumpai di internet. Namun kadang kala tampilannya kurang cocok dengan blog kita maka kita bisa mengeditnya supaya cocok dengan tampilan blog kita.
Berikut langkah - langkah yang dapat dilakukan untuk membuat kotak pencarian dengan tampilan yang sudah ditambah kode CSS.
Langkah pertama
Masuk akun blogger kita terlebih dahulu dan langsung klik Template yang ada pada menu dashboard. Kemudian selanjutnya silahkan klik Edit HTML dan masukkan kode CSS berikut di dalam </style>
#search-form {
background:$(menu.background.color);
float:center;
margin:0 0;
width:280px;
}
#search-form table {
width:100%;
margin:0 0 0 0;
}
#search-form td.search-box {
padding-right:0px;
}
#search-form input#search-box[type="text"] {
background:#ccc;
height:36px;
line-height:36px;
margin:0px 0 0px 0px;
padding-left: 2px;
width:99%;
color:#666;
border:solid 0px;
}
#search-form input#search-button[type="submit"] {
font-family: Arial;
background:#999;
font-weight:bold;
color:#f8f8f8;
height:36px;
line-height:36px;
margin:5px 10px 5px 0;
padding:0 12px;
border:none;
outline:none;
transition:all 0.25s;
-moz-transition:all 0.25s;
-webkit-transition:all 0.25s;
}
#search-form input#search-button[type="submit"]:hover{
background:#e78e8e;
cursor:pointer;
}
#search-form input#search-box[type="text"]:focus {
background:#eee;
outline:none;
}
Langkah kedua
Setelah menambah kode CSS tersebut silahkan klik Simpan Template. Selanjutnya buka menu Tata Letak dan klik Tambahkan Gadget dan pilih HTML/JavaScript dan masukkan kode berikut
<form action='/search' id='search-form' method='get'
style='display: inline;'><table><tbody><td class='search-
box'><input id='search-box' name='q' onblur='if
(this.value=='')this.value=this.defaultValue;' onfocus='if
(this.value==this.defaultValue)this.value='';' type='text'
value='Search...' vinput=''/></td> <td class='search-button'><input id='search-button' type='submit'
value='Search'/></td></tbody></table></form>
Untuk menambah kode HTML tersebut bisa dipilih dimana nantinya kotak pencarian akan muncul maka tempatkan HTML/JavaScript tersebut sesuai dengan tempat yang ingin ditampilkan.
Jika sudah selasai langkah di atas maka silahkan lihat blog apa sudah berhasil atau belum. Berdasarkan yang sudah saya coba kode tersebut bekerja dengan baik.
Selain itu jika kita ingin mengubah ukuran atau warna background bisa mengeditnya pada kode CSS yang ada di atas. Sesuaikan warna dengan tampilan blog Anda supaya tampil lebih menarik.
Membuat search box ini saya praktek sendiri dan kode tersebut saya ambil dari kode yang ada pada menu navigasi. Kemudian saya pisahkan hanya mengambil kode untuk kotak pencarian saja.
