Membuat Kotak Pencarian Keren CSS

Kali ini saya akan berbagi Tips mempercantik blog lagi sob (^_^). keren banget lah pokonya.
di sini saya menyediakan 6 kotak pencarian yang di desain dengan css, jadi sobat hanya perlu copy kode yang di butuhkan dan silahkan pilih kotak pencarian mana yang anda suka.

Langsnung ke TKP, dan simak langkah-langkah cara membuat Search Box Simpel dan Keren Untuk Blogspot:

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Page Element/Elemen Laman
4. Kemudian Add Gatget dan pilih HTML/Javascript, dan masukan kode search box dibawah ini:

ok..berikut ini kotak-kotak pencarian keren dan cool untuk anda :

• kotak pencarian blog 1.

Kode:

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho4XEsaPVkHuftN7vasnX525nDcC-vSaThNvxh581BKXYss3Q9FB6mefWEOCcjDBVk_LQmZqZd9ctwddtxNKsxaqo0lDrUZEteHY6nPclqmfvlNO6D6H51Tbzv4CCshjrshczFTwV0KY57/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" 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="sbutton" />
form>
div>

• kotak pencarian blog 2

Kodenya :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsSG6tP6-B2uCWLDurKFToKJVJxnN7ucmAdJz9elMPm0moOvJNP24UFTd_zIuSsNyJYr3xcrJv9io7w3ZJ5dKtjB5C83ZHhBeiTzP9Oo_6xigV0Ul6Mx7I0JTE1nhqHmahccbrZCPuky16/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" 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="sbutton" />
form>
div>

•  kotak pencarian untuk blog 3.

Kodenya :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMv3rWMimBDTTBE1AnSOEIRIPWexIeTVOI4TNYfKuIADexCB1zwWjr12z-hlfvja9ZTqUsBiLWsNbcUUldpfxDdS2slStdar-KZpqiw0fgQc0Yf-0nIjiDQ-bCW_iXP9lTk5kawlCd3XI6/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" 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="sbutton" />
form>
div>

• kotak pencarian blog 4

Kode nya:

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGoVp5WtVaYh20WJyEl8odErP1EaxE3rsZ4YEnkVZEaatcoIxv4TCHQItLhES1hFifnUjxsA6sysaqpJ1Bm56YRDL9vG2Jn69oOcRVUckxXJ6bphOa-1_4G47Krr5UuO7gblEeoYojXVPe/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
form>
div>

•  kotak pencarian blog 5.

Kode nya:

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzB5hMJI7yShvGe2XdTICV-0Cn2oW7op9US7xB0dk7kf9Bm5NxbHI6Zn5xr_bXE0DpVtsORwRNcetkMu1M803zj059-lVtgRA43gj_SgEtvPULv7-VdD8WwLZ_QyIJ7yWvm3ZcDVEPNRAn/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
form>
div>

• kotak pencarian blog 6.

Kode Kotak pencarian:

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6bPjd6_WZg10HiOM46hdSAuKTGe47U-FtJE7M4uVYbwp1h993DMukURhhRolUFSlzXSw6dumsI9_9nEasrEiG8m63FvoazWwGFj1iKCuDAgwGXOf6hg5qifhUMUyzKdAJvG0mUPTCIfir/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
form>
div>

HAPPY BLOGGING