Tips Cara Memasang Kotak Search Di Blog

Memasang Kotak Search Di Blog -Kotak Search ditambahkan di blog bukan hanya sebagai pajangan atau hiasan. Tetapi berfungsi agar pengunjung yang ingin mencari sebuah artikel yang menarik yang ingin di ketahuinya. Untuk Widget Search, sebenarnya blogger sudah menyediakannya, tetapi mengapa memilih menggunakan HTML/Javascript? Kalau ada pertanyaan seperti itu saya akan menjawab "Karena widget itu kurang menarik atau polos" Mungkin anda akan berfikir seperti itu juga.

Cara Memasang Kotak Search Di Blog

Langkah-langkahnya sebagai berikut :

• login ke akun blogger anda
• Pada dashboard, pilih blog lalu masuk ke Tata Letak
• Klik Tambah Gadget pada lokasi dimana kotak search akan muncul
• Muncul jendela baru gadget blog, cari yang bernama HTML/Javascript
• Copy kode dibawah ini, lalu pastekan di kolom konten HTML/Javascript

<form action='/search' method='get' style='display:inline;'><input id='s' name='q' placeholder='Cari Artikel di Blog Ini...' type='search'/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
 width: 250px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
 position: relative;
    z-index: 2;
    background: #fff url(http://faikhkwnict.blogspot.com//-RdCoLqn34t4/UDeUFSTJ17I/AAAAAAAAKqg/GxdClZ5RjXg/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}

</style>

• Klik Simpan dan coba lihat blog anda sekarang. Kotak search yang menarik pun sudah muncul

Apa tampilan kotak search menurut anda terlalu panjang? jika iya, ubah angka 250px dengan angka yang lebih kecil