Yesterday we shared a beautiful set of search boxes for blogger and as promised here I am sharing another beautiful set of search boxes for blogger.This search boxes are designed by designed by Design3Edge and we have bloggerzied them to works perfectly with blogger blog.As previous search boxes you can also add this search boxes in one step.See preview of search boxes below in search boxes,now lets see how to add them into blogger blog?



How To Add This Search Boxes To Blogger Blog


  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(http://4.bp.blogspot.com/-jkzG3DU10a0/T9L_yt0nqYI/AAAAAAAAB8U/8NCpgoIYP18/s1600/helperblogger.com-green.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
 
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
 
form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
 
form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    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(http://1.bp.blogspot.com/-3QS-Mh7cdm4/T9L_x-etZiI/AAAAAAAAB8Q/OXgi3sBFiRI/s1600/helperblogger.com-blue.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
 
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
 
form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
 
form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    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(http://3.bp.blogspot.com/-8DNTltUx70c/T9L_zrbhRaI/AAAAAAAAB8g/5H5PYM-I20I/s1600/helperblogger.com-orange.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
 
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
 
form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
 
form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    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(http://1.bp.blogspot.com/-xUr8VMkrYEw/T9L_0s7DQoI/AAAAAAAAB8k/LTQ94RRZrJA/s1600/helperblogger.com-purple.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
 
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
 
form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
 
form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    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(http://2.bp.blogspot.com/-upfLE67VJ48/T9L_1DEmg7I/AAAAAAAAB8s/HtdrkTY7GoI/s1600/helperblogger.com-red.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
 
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
 
form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
 
form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    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>

Finally save your search box and you are done.

Post a Comment

  1. Cool Search Boxes

    Happy Searching ...

    ReplyDelete
  2. Which tool are you using to draw arrows on images? next we expect a tutorial about synthetic hylighter. thank you. plz reply me

    ReplyDelete
    Replies
    1. I am using snagit to draw the arrows and other images,also I will post a tutorial about adding syntax highlighter soon :)

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
  4. nice, i like ur headline style, how can i use this style to my blog?
    http://premium-area.blogspot.com

    ReplyDelete
  5. link has been active in my blog.. please backlnk my site.. thanks.. :)
    http://musickpopjpop.blogspot.com/2012/11/link-my-friends-music-kpop-jpop.html
    and follback.. :) #129

    ReplyDelete
  6. Your link it's so beautiful, I like it vey much, I also bought on at Wedding Dresses
    , If you want one too. can visit this address, The backpacks are
    beautiful at there. I think you will be love it too.

    ReplyDelete
  7. Thanks bro, you are the best! :)

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top