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.

6 Style / Skin Widget Search Box Untuk Blogger
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
Skin Widget Search Box Untuk Blogger

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
Skin Widget Search Box Untuk Blogger
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
Skin Widget Search Box Untuk Blogger

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
Skin Widget Search Box Untuk Blogger

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
Skin Widget Search Box Untuk Blogger
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
Skin Widget Search Box Untuk Blogger
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...!!!

Unknown
Unknown