Header Ads

  • Breaking News

    How to Add Beautiful And Sleek Search Boxes For Blogger


    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

    1. First choose any search box below
    2. Copy the code of that search box
    3. Go to Blogger Dashboard > Layout
    4. Click Add a Gadget
    5. Select HTML/JavaScript
    6. Paste code and save it
    7. 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://lh6.googleusercontent.com/-tKmZ5tztgsc/T9I3yaICyJI/AAAAAAAAB7s/BpkCNmZEHEY/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://lh6.googleusercontent.com/-Bh4x2wKJUxE/T9I3v1eUQOI/AAAAAAAAB7U/4y5GfhNAZD0/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://lh6.googleusercontent.com/-ng_i425nL80/T9I3u1nw0XI/AAAAAAAAB7Q/7G2cNDy0yvg/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://lh6.googleusercontent.com/-lKox_NVhhss/T9I3wu8t4LI/AAAAAAAAB7c/JjxQvxDk-I0/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://lh5.googleusercontent.com/-JX2GRIRmqM8/T9I3xoYku0I/AAAAAAAAB7k/ZWuSRg0XN-E/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


    No comments

    Post Top Ad

    Post Bottom Ad