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
- 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmR37QIIZyiZI-MFPKYHqj36tteARfY1kmdkNEEB8MqZoYSf_RM14cC3UPx923N8jFePO7O_rAuVmDEX5626h0r5MClr30ewXQLvmXPHsxam1LuTLZmjO_eTGF4r6rur-Zl0bD5i1RliY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPnsdIYM8ObPMUGaYDjcA3_Qm8vfjHMr7YI9Klt1lucVTtXS6-akCIOU5M1VkQsvmfZvEvNdLqX5SMQYfMMsvzOUKcOGX2NTE8g3NqOjGlwd-BhB1LcDvv8s29btI8Z5GSD1c5ccptC8w/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvx8jEOzTYY3JenBWvPoQHL6SKbI6YcK1TKbLSzwL-s8PwhLVrR1JjxGd1IFij9gbYhn_0RN71L4fAb96DlwnmzDK1qtI_sL4elqwZUHJoXgD8rbUfRb7ZElLCjhBLQXbfO3rtE8KdqpU/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZVrhq_q5JjmrITlKHOtW4TmmCCY3ejYw34d7tatbFnbEPr5-c9Iv8Rs1FO5tnwXK1RPLrJnvDWfMxZ3dwSrWt91lMEn396mpAaSRXQ-3cOqZR_g6AJS-TFVICP3-oEQXPPS4xDY6Bu4I/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinteDAQz8f6zL5kX03GExjz_k-DMMz_PDvgR_jyEZbxoO5jgnZE438sS2HR_yHU06ZysGctjill6YF6iRc7PEJQkGWIpfTqAuil9V3hDSzMF1UkOxLGK_XbZiqECnYQdeaCe3Hxohpugc/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.
Cool Search Boxes
ReplyDeleteHappy Searching ...
hey thanks... :)
DeleteWhich tool are you using to draw arrows on images? next we expect a tutorial about synthetic hylighter. thank you. plz reply me
ReplyDeleteI am using snagit to draw the arrows and other images,also I will post a tutorial about adding syntax highlighter soon :)
DeleteThis comment has been removed by the author.
ReplyDeletewow coll search boxes !
ReplyDeleteTech Blog
nice, i like ur headline style, how can i use this style to my blog?
ReplyDeletehttp://premium-area.blogspot.com
link has been active in my blog.. please backlnk my site.. thanks.. :)
ReplyDeletehttp://musickpopjpop.blogspot.com/2012/11/link-my-friends-music-kpop-jpop.html
and follback.. :) #129
Your link it's so beautiful, I like it vey much, I also bought on at Wedding Dresses
ReplyDelete, If you want one too. can visit this address, The backpacks are
beautiful at there. I think you will be love it too.
Thanks bro, you are the best! :)
ReplyDeleteThanks Rahul
ReplyDelete