Sunday, February 2, 2014

Cara Mudah Membuat Search box Yg elegan dengan CSS

11:13 AM    
Untuk itu saya akan membagi kotak search box tapi saya akan membagikannya bukan yg biasa tapi menggunakan CSS .kotak search box ini sangat cantik,elegan, dan juga tidak repot.bagi sobat yang ingin menggunakan search box ini ikutilah tutorial berikut ini :

  • Login ke akun blogger anda
  • Pilih menu ''Tata Letak''
  • Klik Tambah Gadget 
  • Pilih HTML/JavaSript



  • Udah itu pilih salah satu search box yang di inginkan, copy kode scriptnya dan masukkan di dalam HTML/JavaScript





Script kode search box 1



<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj14u8E79fl-3-fYmW9wDpmSWh8Xnm2QAQziUH07t8FO_cC4iTs2KxBzJXD3mcj8ShLvdeIozmgbEBkVoex7rYYmDEX2uwiHWiazeSqjChwEYjQytzqg7g93VLPDyP_5M-VD1vtihmXE5wO/) 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>






Script search box 2 



<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdWn0-fHlll3LqN54e1tUkqGLcTsjKvsq4C4flOjEAWH-OYLor2eW1APJcenJGRzjp7cATmXTZnsAqLBliloKgBBoTleZBnGWlUHiQrEiX1R1dY2F_6wAjqetT0nn6MTPUXyII4jOzet-8/) 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>





Script kode search box 3



<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4mI9-HEcmsF0ALYfjKPJcacJDsTEZKEg6b8bOTOL0keQz2BTAGJTNQ4qjFeDJo2UEWV4WpEhVG7qJ3NxmZjoWlmVV-6Rv-0OoB3UVGipOyKPXg7U3MfpKxcAZHfr6_2f9EOx4_ueuR8g1/) 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>




Script kode search box 4


<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSBWxwID-v79xGmmNcfzQMYPxdpTLW67ed56iFEAFgJyUzQD9Y8SwgI357YIsjTSnD6sdzgjnBR4p45kTBEULOSzlm7vx9XetvElsdWWtd7ysJKe3kseoz4reenj__AkRhsVd4HsYaX2oL/) 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>







Script kode search box 5



<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmxus4Qp49MD7n6rmzfLS2b9RwMhr43Rb96zcR9D-AKD572bLXGE-q6XJTxWP8lXlFGxSkvXt5AN7fiaYd3RY9p2llFlQJDQeDw9JGtGrALhYlkYsxWjfo5kS9Mxi8OTrTHChpGSow-RHv/) 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>






Script kode Search box 6



<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjswCtBBhu-UYybUhxHcwEqFF-ZWzanF_hdyTjIKyjTl1DrBE4ijevktkz-FcdJ8Ex2TDElAjuoyt01FkDO8AAODYP4oLmDVr0vCJuZw9fhMLUSLHmdlGvDP2TZi9M10EIlJBGVLPniQdS9/) 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>

  • klik simpan dan lihat hasilnya
Comments
0 Comment