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.
Search Box Style 1
<style type="text/css">#helperblogger-searchbox { border-radius: 5px; background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxazEpuk432nuywE-dCHFS4emogfmGX0Q1U7_qebyrw08yHrwsQmAFT0WSP6bISINSB-d8FDAsZVxEmk9Fm7cl8sq0dQwjJn27XiPuF-mhiUhvcGwsyCLDTRQtcJxVH1H6kFXGYMj_yI/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/AVvXsEi3x_eLAfEC7fBi_qe7qD4pMVqnO8IXUHfQheLCHhn7UHGEu_O_qiRi1KfAMm9T3XKVp0ockREMac7UUQxsjpOUARZdomY0v3V3B2v9GSUYKJBzau6n75xRTsv-ehrCjqRdVXdKzZf0ARQ/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/AVvXsEhzb5TnSxpDw4Vc5C6oymw6Z4Yzr0snHE7FwZCS6KW0G6NQqki-KaKbd7w2gvEDzUWBs6ME4TsvzMsuX-4CW6Y23v2I963YSTR01uuYoY-qO1rLxynVFW4CejVflojQNMgFTGyGdA0pOJU/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/AVvXsEjip41H9aGoMbSiXmPfhdOjkoHzHlcNMbQvY1PA1o0VRfOiU6X1wFui0lEFRnOabvh10dP7NcfAjAIYHbMv1ZpxafSV5RpzgtGjyn37Yyu4fpp640rw1aHiZPVfTwpRknpV9xQuby5SO2w/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/AVvXsEgGe4haH_sqve8Zi-Kwct2A3UI9GygqU9sfXj0zT7-ZnxlNXfv-3Wk4Y6XGyoTOwJbbB3KC4buWw1l5NXeVCuebqXU75gf4csrJF4XF9YINsQa2SYxEZ2Sdbp2DB_B1lbqmVR6D0kYk02M/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