Cara Mudah Membuat Search box Yg elegan dengan CSS | hai sobat..... hari ini kita akan membahas tutorial blogger Cara Mudah Membuat Search box Yg elegan dengan CSS . pasti dalam sebuah blog eleman yg sangat penting salah satunya pastinya kotak search. kotak search/search box berguna untuk membuat pengunjung apalagi mencari sesuatu di blog dengan kotak search.
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/AVvXsEjQYnfA0T67Lf6bXzPMOoZdtA3HO_T02l3b8z8icGH5n0UwVszpnYIcME47s7f1yM7E3zWl0UM5wdwpF0nGZpr7EBTtKoVkYMKjONXpBEQEjJEqkGo-ccUdIuy-E8MTgLeNj88W0mY8K4zl/) 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/AVvXsEg_fiIwKHW99oghvTQhLvle7df8bwxvwqgB76MvEwwoo34CuX7AVDdrX-g0OxwPYDKEvArFNZPAsi95D7lVJknbbxIKMg4ic90jt74LKkxDMJQ9sfFnAn6VSZO2QGzZn0575ASleX1In_6C/) 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/AVvXsEjs43fYWN3XA2HusCq9bVlwxea9bwxRjbKKt38Gd_bPwPq5uuoGrXJ65PESUnn2mUCl-Ejr59ABBspZ-OuAHwJHLKYGG1cazAP3igG2qFbl-Das_49I0D4SbtUQOKyvVQt17nlL1ss2WZYP/) 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/AVvXsEgrWAxVj9DdrCTKFvdx0Hlu4AVfPzOdj0hYFV07Q_MIeKcSS1ZHbJks2X9zl0dslLPCHJvGH6qECD6s-tynV2kPx6ANPuFGz_wOSpODLIJK_e5CYc3_5KScSCUzDlNB5UV3QkubiGJx-M6Q/) 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/AVvXsEhqSMpnDq92Ti4IldbrcdPdDfV8xKLhmwWqUclaueLKvmk_qgCRUFFeulWMTUCNH8s2bxOXPff7hn-fUweOz_Xtx1Ns9hx5YSIkydLyofngl0lEJMM9DqJ13z55c8fJpj3W6kQ4RvCWaYHz/) 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/AVvXsEiZfSpewGTEjuAqo6dKLH0mXDr59pSTRxkFuLiNMaMOyLSfyYuCrPgeUFpAmiavFliicGot94Un8Yx-4-j_dbBeGxqjxUVEf9yQwQB7jBCrEkQckjXJ-IEPZVQtbzvmeqCoCquwXQj7RJie/) 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
Dan demikianlah tutorial Cara Mudah Membuat Search box Yg elegan dengan CSS mudah mudahan membantu kalian untuk membuat blog anda terlihat lebih hidup dan indah untuk pengunjung .
Keep Blogging
