Sabtu, 16 Maret 2013
SearchBox Keren untuk Blogger
___________________________________________________________________________________
<style type="text/css">
#w2b-searchbox{background:url(https://lh4.googleusercontent.com/-yLuzR93Eyvk/UUS6Z-dnCeI/AAAAAAAABMw/YPRS_xpg3O0/s209/vgjhghjhgj.png) repeat scroll center center transparent;width:198px;height:46px;display:clear;}
form#w2b-searchform{display: block;padding: 15px;margin:20;}
form#w2b-searchform #s{padding: 15px 15px 15px 20px;margin:0;width: 198px;font-size:12px;vertical-align:center top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:25;padding:25;height:25px;width:20px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
#w2b-searchbox{background:url(https://lh4.googleusercontent.com/-yLuzR93Eyvk/UUS6Z-dnCeI/AAAAAAAABMw/YPRS_xpg3O0/s209/vgjhghjhgj.png) repeat scroll center center transparent;width:198px;height:46px;display:clear;}
form#w2b-searchform{display: block;padding: 15px;margin:20;}
form#w2b-searchform #s{padding: 15px 15px 15px 20px;margin:0;width: 198px;font-size:12px;vertical-align:center top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:25;padding:25;height:25px;width:20px;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>
</form>
</div>
___________________________________________________________________________________
___________________________________________________________________________________
<style type="text/css">
#w2b-searchbox{background:url(https://lh3.googleusercontent.com/-qrGlJk4q6jE/UUS6ZMvtwNI/AAAAAAAABMk/Q_f72G6Mal8/s197/searchbox+3.PNG) repeat scroll center center transparent;width:198px;height:46px;display:clear;}
form#w2b-searchform{display: block;padding: 15px;margin:20;}
form#w2b-searchform #s{padding: 15px 15px 15px 20px;margin:0;width: 198px;font-size:12px;vertical-align:center top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:25;padding:25;height:25px;width:20px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
#w2b-searchbox{background:url(https://lh3.googleusercontent.com/-qrGlJk4q6jE/UUS6ZMvtwNI/AAAAAAAABMk/Q_f72G6Mal8/s197/searchbox+3.PNG) repeat scroll center center transparent;width:198px;height:46px;display:clear;}
form#w2b-searchform{display: block;padding: 15px;margin:20;}
form#w2b-searchform #s{padding: 15px 15px 15px 20px;margin:0;width: 198px;font-size:12px;vertical-align:center top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:25;padding:25;height:25px;width:20px;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>
</form>
</div>
___________________________________________________________________________________
___________________________________________________________________________________
<style type="text/css">
#w2b-searchbox{background:url(https://lh5.googleusercontent.com/-KjiYCHD4dcE/UUS6Y55c-gI/AAAAAAAABMg/XyAkVP_kcSE/s197/searchbox+2.PNG) repeat scroll center center transparent;width:198px;height:46px;display:clear;}
form#w2b-searchform{display: block;padding: 15px;margin:20;}
form#w2b-searchform #s{padding: 15px 15px 15px 20px;margin:0;width: 198px;font-size:12px;vertical-align:center top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:25;padding:25;height:25px;width:20px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
#w2b-searchbox{background:url(https://lh5.googleusercontent.com/-KjiYCHD4dcE/UUS6Y55c-gI/AAAAAAAABMg/XyAkVP_kcSE/s197/searchbox+2.PNG) repeat scroll center center transparent;width:198px;height:46px;display:clear;}
form#w2b-searchform{display: block;padding: 15px;margin:20;}
form#w2b-searchform #s{padding: 15px 15px 15px 20px;margin:0;width: 198px;font-size:12px;vertical-align:center top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:25;padding:25;height:25px;width:20px;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>
</form>
</div>
___________________________________________________________________________________
___________________________________________________________________________________
<style type="text/css">
#w2b-searchbox{background:url(https://lh6.googleusercontent.com/-T4M_LbFiSlw/UUS6Y-s9ZnI/AAAAAAAABMo/lOnVs9kngZE/s197/searchbox+1.png) repeat scroll center center transparent;width:198px;height:46px;display:clear;}
form#w2b-searchform{display: block;padding: 15px;margin:20;}
form#w2b-searchform #s{padding: 15px 15px 15px 20px;margin:0;width: 198px;font-size:12px;vertical-align:center top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:25;padding:25;height:25px;width:20px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
#w2b-searchbox{background:url(https://lh6.googleusercontent.com/-T4M_LbFiSlw/UUS6Y-s9ZnI/AAAAAAAABMo/lOnVs9kngZE/s197/searchbox+1.png) repeat scroll center center transparent;width:198px;height:46px;display:clear;}
form#w2b-searchform{display: block;padding: 15px;margin:20;}
form#w2b-searchform #s{padding: 15px 15px 15px 20px;margin:0;width: 198px;font-size:12px;vertical-align:center top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:25;padding:25;height:25px;width:20px;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>
</form>
</div>
___________________________________________________________________________________
___________________________________________________________________________________
___________________________________________________________________________________
Tutorial pemasangan SearchBox diatas :
Step 1 :
pilih Tata Letak.
Step 2 :
Pilih Tambahkan Gadget dimana anda ingin meletakan SearchBox nya :
Step 3 :
Pilih HTML & Java Script
Step 4 :
anda akan dibawa ketampilan seperti ini.
Step 5 :
Copy paste script searchbox diatas yang anda inginkan, letakan script seperti gambar dibawah.
Step 6 :
Simpan dan lihat hasilnya kurang lebih seperti gambar di bawah.
Selesai deh, Semoga bermanfaat.
terima Kasih Telah berkunjung.
SALAM SQR DESIGN
0 komentar:
Posting Komentar