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/AVvXsEiuBJDHYcKE57zPchLwI0M8SSIvXLelr1K7UkMSbkW2FwPKWsgVN32SRfcr1c2NPltrazBgn-AJearxMa5qRJ-QnUWUoDr_LTbEVRl71RXVpBD9a_rT0XHnRkTnwCZ200L8Xu8OIl7ztIKj/) 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/AVvXsEjAKYBkQsrLkSIT-qndbN4cyI-JrE5eubtzcTs0_yjT-PXI5wHLj3XL_Ntlv1yv3pZUSB19YT_kw-F97dyFdybOP3BuOpZPkvHjaAsrTd8M-uK2bAoLadZFyVsSgrrWSaTWTTtf-Xf7nSRr/) 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/AVvXsEhE24nGmlqaOx18WNW-JOiWnN_M55F3woTt5QB32yMKNXks85qDopVhOPlCkfnEeHVI7QysSXfVqGzEuqL9UX50r9V7LSfT0kX90PU_NqSrWZ_bpLcZWqnxTohDGWkJtx7Jrzb4gV8eQUbk/) 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/AVvXsEjHNhH-F60HDja4DKaqt385S-Xg6CK0tpiObmCBw7KOiFF4YPCFm9lI9niGY5Gq7JHniuMGUqaudSR0dR_lchDzrWJLxyucsyLiVUxCHYheTqWC75iZpYYyrs7vsSLUuPFdNZJ3UjYm6s2p/) 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/AVvXsEgil0XhGf2sKeq1NiDxA09FSFF43CEV_-grUmAT1hCIumH9VMYK5mwH-sTv31-V-qyHFYJaBMHWrbweAnxrTXR3jITxQbcpQcGlP9c67Y9dKa18n6ZeDEyG-fYP-LE2Jn1JLxj5dWkkQZT5/) 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/AVvXsEgit3uJBDpbmJ2Lms9cXAQ-SLgCENQrg5a9-V5e83TtsRVp0pBXNcnvRhlrsGddxtCvnRNwUl9OIkZGQScwP5sUK37rtVIhPr8uZ0pFH4gjUZ-qsHcXElKAbZ5hXueKRtaFa0K9VQcRTKgH/) 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 .
