Set Of Beautiful And Fresh Search Boxes For Blogger ~ Shiraz Shakeel

Wednesday 23 January 2013

Set Of Beautiful And Fresh Search Boxes For Blogger

Unknown Blogger Tutorials, Tutorials No comments

How To Add These 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/-M7xGb8HpXXA/UP_zcDGxuhI/AAAAAAAAAD4/eyqSOtukhzk/s1600/www.shirazshakeel.blogspot.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">
#shirazshakeel-searchbox {
    border-radius: 5px;
    background: URL(http://4.bp.blogspot.com/-PFZzamhZBL0/UP_zbcn37uI/AAAAAAAAAD0/BNJxXe93OA0/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: 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">
#shirazshakeel-searchbox {
    border-radius: 5px;
    background: URL(http://3.bp.blogspot.com/-0ihEYAJcoXk/UP_zc_ZusKI/AAAAAAAAAEE/g8reKbol28Y/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: 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">
#shirazshakeel-searchbox {
    border-radius: 5px;
    background: URL(http://1.bp.blogspot.com/-c1fWba_KM9Q/UP_zfZ4i7mI/AAAAAAAAAEU/le8XCCShYQo/s1600/www.shirazshakeel.blogspot.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="shirazshakeel-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">
#shirazshakeel-searchbox {
    border-radius: 5px;
    background: URL(http://1.bp.blogspot.com/-cGKiYfi5bGY/UP_zd3VK7eI/AAAAAAAAAEM/q5wxyQaoVow/s1600/www.shirazshakeel.blogspot.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.

Socializer Widget By Blogger Yard

SOCIALIZE IT →

FOLLOW US →

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Copyright © 2013 Shiraz Shakeel.