6 Style / Skin Widgets Search Box Custom Untuk Blogger

Search Box atau biasa juga disebut sebagai kotak pencari adalah sebuah media atau alat yang bisa digunakan untuk mencari dan menemukan sesuatu sesuai dengan kata kunci yang diketikkan kedalam form. Search box mempunyai peranan yang sangat vital bagi blog, karena jika seorang pengunjung ingin mencari sesuatu, misalnya mencari  artikel yang berhungan dengan widget, maka pengunjung cukup memasukkan keyword kedalam form dan menekan tombol enter atau search untuk menemukan postingan yang berhubungan dengan keyword yang dimasukkan akan ditampilkan.

Demo By Image

Cara Memasang Kotak Kostum Pencari Pada Blog

• Terlebih dahulu login ke Blogger
• Pada Dashboard, pilih Tata Letak » Add Gadget » HTML/JavaScript
• Langkah selanjutnya, copy salah satu kode yang saya sediakan di bawah kemudian pastekan ke dalam form HTML/JavaScript Tersebut
• Lanjutkan dengan menekan tombol Simpan.

Skins Search Box Widget

SKIN 01

KODE

<style type="text/css">

#a-searchbox{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Tb9hn6qg3nwIm4vWEa4vXSNHDc0avnZTMJHxM3ZRFfeXhyphenhyphenafnClMKwvQxOVqyEHnk5JIFsVA49RFJwMxR8P-d29iTe6dfrz_b4WII3mb6zGNSvNyC6naR426C6m0jPOmX3cUVSlKZQnF/s1600/lostsector-search-box-blue.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#a-searchform{display: block;padding: 10px 12px;margin:0;}

form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;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>

<center>

<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></center> 

SKIN 02

KODE

<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtg9MMZTjOB20Ypx3jRnC5uQknf6xjwVyS8wPhQifDkUICNvNR6oIrFEKzCsL_qNVLq8GnvTrZqLnkMsJYsKSERP4PLTWH2ZqgQFI4NqpLPYbTtTot0NKlLVCXBXNAIb4YvgiyLPoBwunN/s1600/lostsector-search-box-darkgrey.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;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>
<center>
<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></center>

SKIN 03

KODE

<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvxnlyMpoNwJbz0vp10SORoYjRXjbQbyBVAmuLHDkx2MvsY3-Z8hYNliS2i-x86m42DdT1xrHx5rTIo0HAmhu984RZTocUR7FVO0UAD1_Ot4zcHyHtBJJe_1ka-osQSSVHLT64J9PLS10G/s1600/lostsector-search-box-gray.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;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>
<center>
<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></center>

SKIN 04

KODE

<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEius_uZAh8LdpvSHgoJiByummA3d8QB7yTarTRaOo-vimAt11qQh1NQMI8BdqITcnmlzHHTJSHkpsYPeh9BpIF5i7DAufnJfdpHBxov31OKqhItMFOUYrGeUr-h02xQsnqQelAOn9u2h1Ax/s1600/lostsector-search-box-black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;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>
<center>
<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></center>

SKIN 05

KODE

<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5BS6hzp0HOPpEWYooLbRCE9ppIlwr95AmB3vaII1ToscG_YpS2Ma4VpYo-Y1ahQ9JDakgqAXV4cziQFi5ua-03g-Pn1wJljiIdVo-K0VEQfhh7cJoR2r30yEbu3uiijfTgsB_HVVo-a-5/s1600/lostsector-search-box-red.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;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>
<center>
<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></center>

SKIN 06

KODE

<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM09uBuLu7qK-tz-2bKOgbvqKXQu88G-x_ZoBM1AF1d0QHYpqs9AsUyuG50mw6SuEGyX3sAS_MdNFGsV37avuf34jVH7tft1FrztFqK34tnZswa6AxRSt6rl0fEe6drCxMeK7ann0EjotV/s1600/lostsector-search-box-yellow.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;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>
<center>
<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></center>

Selamat Mencoba dan semoga bermanfaat...!!!