Extreme CSS3 Floating Google Search Bar for Blogger FREE..!!
All of you know about Google Search bar. You’d see the style of search bar used in Google. If you didn’t see Google search bar either go to Google or please see the right top of our blog, you can see a static Google search bar. Here is a trick to add this Google search bar to your blog. This is not the real Google search bar, instead this is a CSS3 styled search bar using Blogger’s search method. If you need Google’s real search bar[but it can’t get Google’s search box style] go to http://www.google.co.in/cse. Let’s see how to add Google type search bar to your blog…
Demo shows in right top →
Features
Features
- Floating Static (Fixed) Search bar
- CSS3 styled search bar
- CSS3 animated
- Go to Layout -> Click on Add a Gadget
- Select HTML/JavaScript from the list
- Leave the Title as Blank and copy paste the following code inside the Content portion
OR
- Sign in to Blogger Dashboard and go to Template -> Edit HTML
- Search (Ctrl+F) <body
- Copy and paste the following code after it
<!– Noop Google search box –>
<div class=’noop-searchbox’ id=’noop-searchbox’>
<form action=’/search’ id=’noop-searchform’ method=’get’>
<input id=’s’ name=’q’ onblur=’if (this.value == "") {this.value = "Search…";}’ onfocus=’if (this.value == "Search…") {this.value = ""}’ type=’text’ value=’Search…’/>
<button id=’sbutton’ type=’submit’>
<span id=’simg’/>
</button>
</form>
</div>
<style type=”text/css”>
#sbutton {
background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
border: 1px solid #3079ED;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
height: 27px;
min-width: 76px;
padding: 0 21px;padding-bottom: 2px;
}
#sbutton:hover{ background-color: #357AE8;
background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#simg {
background: url(“https://4.bp.blogspot.com/-gAHYfEEtPjg/T0t5-AtLCmI/AAAAAAAAAJ8/w87kGhEAYyQ/s1600/searchicon.png”) no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.noop-searchbox {
display: block;
position: fixed;
right: 0;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
</style>
<!– Noop Google search box –>
<div class=’noop-searchbox’ id=’noop-searchbox’>
<form action=’/search’ id=’noop-searchform’ method=’get’>
<input id=’s’ name=’q’ onblur=’if (this.value == "") {this.value = "Search…";}’ onfocus=’if (this.value == "Search…") {this.value = ""}’ type=’text’ value=’Search…’/>
<button id=’sbutton’ type=’submit’>
<span id=’simg’/>
</button>
</form>
</div>
<style type=”text/css”>
#sbutton {
background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
border: 1px solid #3079ED;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
height: 27px;
min-width: 76px;
padding: 0 21px;padding-bottom: 2px;
}
#sbutton:hover{ background-color: #357AE8;
background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#simg {
background: url(“https://4.bp.blogspot.com/-gAHYfEEtPjg/T0t5-AtLCmI/AAAAAAAAAJ8/w87kGhEAYyQ/s1600/searchicon.png”) no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.noop-searchbox {
display: block;
position: fixed;
right: 0;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
</style>
<!– Noop Google search box –>
I hope this article will help you. If any problem with this please do comment.
Next Post
Awesome search box,I have applied on my blog : http://computer-trikz.blogspot.com/
Thank you :))))))
Thanks 🙂
wow nice , its really helpfull
Try this HTML Tutorials http://mkmovietrailer.blogspot.com/2013/09/html-tutorials.html
Awesome! Immense information there.
Get more about Mac Kinac News
really nice tuts
Can I change it's position to bottom??
http://ulinker.blogspot.com
great job! thanks for the script i applied on my blog >> dipikir-karo-menthil
I love everything you have shared with us. I appreciate it all. I'm still working on it and it's NO where close to your amazing blog. But take a look and feel free to help me improve my old blog page 🙂
http://jackcasarez.blogspot.com/