Membuat Kotak Search Keren

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

Tutorial :

1. 
   
2. Login ke  Blogger
3. Masuk ke Rancangan / Design
4. Tambah Gadget > HTML/JavaScript
5. Lalu masukan code kotak pencarian di kolom yang tersedia

Berikut contoh kotak search yang keren

Kotak Search Model 1

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgggLvfoGKxUOp3Tp_9HeOicsr1LAZTx8eM2J44TnLrjidBNaQpbUZxNYy_cVe3Xgnss5YnEz1Ovt8AzSELmfC3f8QW6rh2chI5EKdNM7Rc9vNvW2jisKqio-MamxKXauuuBRZyuUCzKmgK/) 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 Search Model 2

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilfdzwMjyiHemA74C49aqs6CzfMDCdV9Txd-Y3o-7dBb72CQj09GzDv1zDVL0JLDU_DIuost9__j-GHjWYhjQb4niF-nwJvOCWz_TmSaUtpcQieaomhUnDLo4FBcP-4PXfC-FYfDAAn9Zq/) 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 Search Model 3

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUgZ-gAg4Q0la0-8MxWrplCvRILh3Ukcgzyx8zd9B0uRj1NeDnRSop1U6JzUaCHLOEfr5zPbRj7hSUnAj9Mp-NBSDkIH-UZnhhQ9PDitfahjrOXX9Yv5Gt1pB_naoOf_CEc3GpbRmCKOuK/) 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 Search Model 4

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm7P2KfenKw1f9AmSdo4781lGGAUuOsplhv2PbvMMTVkAkBK3qJj0Qio4CIIzbIdlqO3muUglviay3wFQuBgXs8EHz5NGZ_LzASWZ9b3FS1BAg1oxiSN1EdeHSHlK1MoH9ym6Cy6Ao6QTH/) 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 Search Model 5

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo34XCBErcw68BA0J-ePolCq5gObpczILC5i1eU8NTbrRS7pl6IBmlSW2GkBKluyycmGd4hoWXAbw0rT1VOmnxgsenB0hXRbgZjAi5iaWunRVlaQWwJcTNnKv2xCEny9M0wK4v1I5DXOo_/) 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 Search Model 6

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnUhCnMxTyoeqZUBVePv1ASH4MD4hP9W9YEXG6LtphKo8g-tlf6NVmVl2ZPJcNOGGtWOrbRu_TL39T82m10upF2_D1_vKYJTMN0eFV_CJw7emEzO3jvcPbxx8gV1JJFP-qbS48ch_yWBn/) 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

Sumber : Bang Kodok