Beautiful And Sleek Search Boxes For Blogger ~ Shiraz Shakeel

Wednesday 23 January 2013

Beautiful And Sleek Search Boxes For Blogger

Unknown Blogger Tutorials, Tutorials No comments

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(http://4.bp.blogspot.com/-UtxWX5Joe6s/UP_4_caFYaI/AAAAAAAAAFU/vnMeKpzmjYI/s1600/www.shirazshakeel.blogspot.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(http://4.bp.blogspot.com/-8pI4TuCPwPY/UP_48bJDwmI/AAAAAAAAAFA/6dQuHmt9COY/s1600/www.shirazshakeel.blogspot.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(http://4.bp.blogspot.com/-0MrsWrTixVE/UP_4-bspyCI/AAAAAAAAAFM/wXqXD5qLPh8/s1600/www.shirazshakeel.blogspot.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(http://3.bp.blogspot.com/-P2Bu-v_Y1BE/UP_46oL8syI/AAAAAAAAAE0/aS4p0tkwqLg/s1600/www.shirazshakeel.blogspot.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(http://1.bp.blogspot.com/-EOEI1jJObs8/UP_47ozfJMI/AAAAAAAAAE8/sFzbfoEqUTw/s1600/www.shirazshakeel.blogspot.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>

I hope you have enjoyed this all search boxes :)

Peace Buddies :)

Socializer Widget By Blogger Yard

SOCIALIZE IT →

FOLLOW US →

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Copyright © 2013 Shiraz Shakeel.