Widged Search Box Keren 2014

Bagi yang punya blog nih, yang gak punya jangan ngiri ya..Hahaha...
Pada kali ini saya akan bagikan Search Box Keren untuk kalian semua.
Langsung aja nih, Check this out...!!!

Cara memasang widget search box di blogger

Login ke Blogger > Edit HTML > Add Element baru > HTML atau Javascript
Copy salah satu kode dari 6 widget serch box keren di bawah ini dan paste pada element baru tadi.

Widget Search box 1<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu1FLSdgzKsLUoi8_V8LK4LDTCkLQfOLUxUJPbe0zrjQZ7q6X4EBrHNkMKQEB8BYHqraxob2kMEL3mc1yxtK5iasbsK39YGPDF7vs7kya5x4tTbzNMgUzhpXynJJ3SXPqI20Ox674sw_jI/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" 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="abutton" /> </form></div>

$0AWidget Search box 2<style type="text/css"> #b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg1xFXWeKIIwFF6TOe6LYS6fnLkpD9z2AbWXyKkDhT0_eyRKCNwk0gC0HUMZPv7fHTK_cxNMKD5Nx6j5CSt7-fzpCm9ZBFE2En9XGTXqqpfajHyjOl18CQ1ZmdzkLsKo6jE1ntWUBmfQkA/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#b-searchform{display: block;padding: 10px 12px;margin:0;} form#b-searchform #b{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#b-searchform #bbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="b-searchbox"><form id="b-searchform" action="/search" method="get"> <input type="text" id="b" 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="bbutton" /></form></div>

Widget Search box 3<style type="text/css"> #c-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieBgH6GUeOavXJjljXY1GV6u22-VWfuFGqEkrF3w_LKZOGz9GfDmVmIgofpmE7pwG4tJQJjxkcARZMtVL1NDK3DRatFaHkPMFBc2euLoBqp3zzm_FThUF8-wSwTvrVyliidzPRqeU84T6Y/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#c-searchform{display: block;padding: 10px 12px;margin:0;} form#c-searchform #c{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#c-searchform #cbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><div id="c-searchbox"><form id="c-searchform" action="/search" method="get"> <input type="text" id="c" 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="cbutton" /></form></div>

Widget Search box 4<style type="text/css"> #d-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEishS7J_AFIw_U9cmFRtqGq1d6IFYydDQkTnPSW8NXekEq_MFZbP1bQhDnXoVYiKorn3Nv5xS-1OjFhSbKL_5xGHXxo_z7NIjGVb-g7iEw_Zhyphenhyphenk1EqDPBWecKrT_ulFDDqbDQ6612edUeXJ/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#d-searchform{display: block;padding: 12px;margin:0;} form#d-searchform #d{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#d-searchform #dbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="d-searchbox"><form id="d-searchform" action="/search" method="get"> <input type="text" id="d" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="dbutton" /> </form></div>

Widget Search box 5<style type="text/css"> #e-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZtwrmXyB3OVIaiJFpEeX35NyNtmwv8kSwCtrumX4KY1H5iHaVMPp9jQBj-SrGTdgun-V1nFF2tBcyUMCHZT2GK98V-4NBF2fUmW1m3oViGF63NBUv_M37blAa9lAlqh-8nFfNi1NmQabW/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#e-searchform{display: block;padding: 12px;margin:0;} form#e-searchform #e{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#e-searchform #ebutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="e-searchbox"><form id="e-searchform" action="/search" method="get"> <input type="text" id="e" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="ebutton" /></form></div>

Widget Search box 6<style type="text/css"> #f-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfhn86BtmHRKHTzczMG-L0B78loFgpnxwSJ79Y4u3AHhJQDzcXUEFujjWXItJq4Rc0EQPBT2NTswoK2YQdzZlMxKqm_UZWWZdyB6sFwFzf4ESCKJYMXarpSapk0V7DbCQ5bZaeyrw8NXWG/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#f-searchform{display: block;padding: 12px;margin:0;} form#f-searchform #f{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#f-searchform #fbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="f-searchbox"><form id="f-searchform" action="/search" method="get"> <input type="text" id="f" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="fbutton" /> </form></div>

width:307px >> Silahkan ganti dengan lebar widget blog anda.
Terimakasih..

SHARE

Gilang Ramadhan

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of Cs Corporation. I’m Creative Art Director, Web Designer, Hacker, Programer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.

• 
• 
• 
• 
•