Pasang kotak pencarian (Search Box) pada Blog

Rasanya ada yang kurang jika punya blog tetapi tidak ada kotak (Widget) pencariannya. Dengan adanya widget tersebut maka mempermudah penungunjung untuk mencari sesuatu dari blog tersebut. Nah disini saya akan berbagi cara untuk menambahkan widget search pada blog. Silahkan dipilih salah stu yang anda suka

Berikut langkah-langkah cara memasang widget search engine di blog :
1. Login akun blogger Anda.
2. Pilih Tata Letak -> Tambah Gadget -> HTML/JavaScript.
3. Copy-Paste kode di bawah ini, pilih salah satunya saja

Ganti Namablog yang berwarna merah dengan nama blog anda dan size/ukurannya ganti sesuai keinginan anda

Hasilnya seperti ini

<p align="left">
<form id="searchthis" action="ALAMAT URL BLOG/search" style="display:inline;" method="get">
<strong>Cari artikel<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

Ganti ALAMAT URL BLOG dengan alamat URL blog anda dan ganti Cari artikel dengan nama yang ingin Anda tampilkan pada kotak.

Hasilnya seperti ini

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg50y2BIRMCEbRl3BrJyo4brpaFVki-XXQCoiMLwJbsvAs3LejALiHog_g9KCSyYEOWFSm3yMQuER7iqKhlwfsmyiJIg5LQbM8l5T7-bJ4-zaC_qkN0BrOOerNqbz-Kn7L9Z-dJsQ_bEja5/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>
</span>

Ganti Tulisan Search... sesuai keinginan ingin anda tampilkan pada kotak

Hasilnya seperti ini

<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</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: 200px;
    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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR236K8hzUieCnWkAwpifc2zWUxZTHPiym2uKMb5dluFwtLdkbD35L88taT43JomfbA79SqrXkQNbXcHzUlsTYidzhtt7tXp74SaXvFZwqWgu4hHWSG0WXx32ajCUpR8G0R04lsgULrkc/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

Ganti Cari Artikel Disini sesuai dengan selera dan kebutuhan kalian yang nanti tulisan itu akan muncul di tengah kotak pencariannya. Dan warna biru itu ukuran kotak pencariannya, silahkan kalian rubah sesuai dengan kebutuhan.

Hasilnya seperti ini

Cukup sekian tips tentang cara pasang search box atau kotak pencarian. semoga bermanfaat buat anda semua..