Search boxes helps your readers to find any content present in your blog very easily,to get the thing which they want exactly. And remember one thing that "making things easier for your readers is a symptoms of good blogger." Today we are sharing a some beautiful search boxes for blogger, this search boxes are designed by Design3Edge and Ammar bloggerized them. As always I have kept the installation as easy as possible, you can add any search box in one step. Now lets see how to add them into blogger blog.
How To Add Sleek Search Boxes To Blogger
- First choose any search box below
- Copy the code of that search box
- Go to Blogger Dashboard > Layout
- Click Add a Gadget
- Select HTML/JavaScript
- Paste code and save it
- Drag it to the top of your siderbar,if you are good blogger :)
Search Box Style 1
<style type="text/css">#helperblogger-searchbox { border-radius: 5px; background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie4fYR2jFIdyQeiagSGs2yPaqjIF21_TXeEFxvji03kc5L06Hovb4dYNYS9EX1rYDJiwbESiC8ndt8ic-14Oofu8uwjy-HVdNt3aqEcv88GZImEYqWQYM5-n2aGDcjOVYxDhnQFDmiBdA/s1600/helperblogger.com-white.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block;} form#helperblogger-searchform { display: block; padding: 10px 12px; margin: 0;} form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 220px; font-size: 14px; font-family: verdana; vertical-align: top; border: none; background: transparent;} form#helperblogger-searchform#sbutton { margin: 0; padding: 0; height: 40px; width: 44px; vertical-align: top; border: none; background: transparent;}</style><div id="helperblogger-searchbox"> <form id="helperblogger-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>
Search Box Style 2
<style type="text/css">#helperblogger-searchbox { border-radius: 5px; background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_juBzsE4EBdcDMJVhuk2J_jUONXUp1TY1jE5M5gLAaXM2Rspu4i5gliGlalvXSvcQLebf49PKF979PkDCOtJQbjcmWtg2-ix_XrsQ0tUsE3HZwMBBAJtgE39-7IdHddF6UteY7RSJzg0/h57/helperblogger.com-blue.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block;} form#helperblogger-searchform { display: block; padding: 10px 12px; margin: 0;} form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 220px; font-size: 14px; font-family: verdana; vertical-align: top; border: none; background: transparent;} form#helperblogger-searchform#sbutton { margin: 0; padding: 0; height: 40px; width: 44px; vertical-align: top; border: none; background: transparent;}</style><div id="helperblogger-searchbox"> <form id="helperblogger-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>
Search Box Style 3
<style type="text/css">#helperblogger-searchbox { border-radius: 5px; background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFcOzwsD7YQm9w941OH4GkeJEiZ32I0WQMMOpg71g9hBjRm-FIopYgf8Vm4FZbpY9Ni9lM9BKI2_gYWqfD1Mlj_Q9X0bWs67gCRKshMKwKidQjBbYM_c4WVBO2YhYJE0Wy1YFYQ63hvkY/s1600/helperblogger.com-black.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block;} form#helperblogger-searchform { display: block; padding: 10px 12px; margin: 0;} form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 220px; font-size: 14px; font-family: verdana; vertical-align: top; border: none; background: transparent;} form#helperblogger-searchform#sbutton { margin: 0; padding: 0; height: 40px; width: 44px; vertical-align: top; border: none; background: transparent;}</style><div id="helperblogger-searchbox"> <form id="helperblogger-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>
Search Box Style 4
<style type="text/css">#helperblogger-searchbox { border-radius: 5px; background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx3gJZzxwxhVQmw7AqTOKFozRZB9DcLii6OH6opvBhMTkNrRBOwoKB9Da4s9los1pQU92q_cyNI1SiA2rlcJcoDnASP_tqMO3jKQFNAqYsjYOI2dxy-kJIJN1epunfqKLTonnk7ZphyEQ/s1600/helperblogger.com-orange.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block;} form#helperblogger-searchform { display: block; padding: 10px 12px; margin: 0;} form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 220px; font-size: 14px; font-family: verdana; vertical-align: top; border: none; background: transparent;} form#helperblogger-searchform#sbutton { margin: 0; padding: 0; height: 40px; width: 44px; vertical-align: top; border: none; background: transparent;}</style><div id="helperblogger-searchbox"> <form id="helperblogger-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>
Search Box Style 5
<style type="text/css">#helperblogger-searchbox { border-radius: 5px; background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU453e562oGrur_BLV1uoaSE4E0OJm1kgN49BE8xGtRaeD6N_fSuLB5ALBzsKG0WQJ8RSWqlQQGdY5ultJIIZJmjri-42bYZLNeuFeHZsiYB-Rxv9OABPydDFUbUDS4vr9eQKfQDpRz84/h57/helperblogger.com-pink.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block;} form#helperblogger-searchform { display: block; padding: 10px 12px; margin: 0;} form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 220px; font-size: 14px; font-family: verdana; vertical-align: top; border: none; background: transparent;} form#helperblogger-searchform#sbutton { margin: 0; padding: 0; height: 40px; width: 44px; vertical-align: top; border: none; background: transparent;}</style><div id="helperblogger-searchbox"> <form id="helperblogger-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>
That's it
