Mash Tricks : search bar

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 class="post-title entry-title">
</h2>
<div class="post-header">
</div>
<div dir="ltr" style="text-align: left;">
<div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
</div>
<div class="akash" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizT1IvI1Fhak2LpR8kAf9ZurBy2nsl7CjO5nrrm9EPzI6rOucAs1oVQTqVMRqoJDvi8O_czMssdqmZflMjBaT3g2NlMfRFIOmxEZY8phvTTn-dxNrdslLF96YhqXxTc2s6p_MBLMtqVjI/s1600/google-search-bar-for-blogger.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizT1IvI1Fhak2LpR8kAf9ZurBy2nsl7CjO5nrrm9EPzI6rOucAs1oVQTqVMRqoJDvi8O_czMssdqmZflMjBaT3g2NlMfRFIOmxEZY8phvTTn-dxNrdslLF96YhqXxTc2s6p_MBLMtqVjI/s1600/google-search-bar-for-blogger.jpg" /></a></div>
<span id="goog_2104566990"></span><span id="goog_2104566991"></span>All of you know about <a href="http://www.google.com/" target="_blank">Google</a> Search bar. You'd see the style of search bar used in <a href="http://www.google.com/" target="_blank">Google</a>. If you didn't see Google search bar either go to <a href="http://www.google.com/" target="_blank">Google</a> or please see the right top of  our blog, you can see a static <a href="http://www.google.com/" target="_blank">Google</a>  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 <a href="http://www.blogger.com/" target="_blank">Blogger's</a> search method. If you need <a href="http://www.google.com/" target="_blank">Google's</a> real search bar[but it can't get <a href="http://www.google.com/" target="_blank">Google's</a> search box style] go to <a href="http://www.google.co.in/cse/">http://www.google.co.in/cse.</a> Let's see how to add Google type search bar to your blog...<br />
<br />
<a href="http://www.blogger.com/null" name="more"></a><br />
<div class="demo">
<blockquote class="tr_bq" style="text-align: left;">
<span style="font-size: small;"><span style="font-family: inherit;">Demo shows in right top →</span></span><br />
<span style="font-size: small;"><span style="font-family: inherit;">Features....</span></span></blockquote>
<blockquote class="tr_bq" style="text-align: left;">
<blockquote style="text-align: left;">
<span style="font-size: small;"><span style="font-family: inherit;">Floating Static (Fixed) Search bar</span></span></blockquote>
<blockquote style="text-align: left;">
<span style="font-size: small;"><span style="font-family: inherit;">CSS3 styled search bar</span></span></blockquote>
<blockquote style="text-align: left;">
<span style="font-size: small;"><span style="font-family: inherit;">CSS3 animated</span></span></blockquote>
</blockquote>
</div>
<ul style="text-align: left;">
<li>Go to <b>Layout</b> -> Click on <b>Add a Gadget</b></li>
<li>Select <b>HTML/JavaScript</b> from the list</li>
<li>Leave the <b>Title</b> as Blank and copy paste the following code inside the <b>Content</b> portion</li>
</ul>
<div style="text-align: left;">
<blockquote class="tr_bq">
        <span style="font-size: large;">                    <span style="color: red;"><b>OR </b></span></span><br />
<ul style="text-align: left;">
<li>Sign in to Blogger Dashboard and go to <b>Template</b> -> <b>Edit HTML</b></li>
<li>Search (Ctrl+F) <span style="font-size: medium;"><b><body</b> </span></li>
<li>Copy and paste the following code after it</li>
</ul>
</blockquote>
</div>
<br />
<br />
<blockquote class="tr_bq">
<div class="code">
<br />
    <div class='noop-searchbox' id='noop-searchbox'><br />
      <form action='/search' id='noop-searchform' method='get'><br />
        <input id='s' name='q' onblur='if (this.value ==  &quot;&quot;) {this.value = &quot;Search...&quot;;}'  onfocus='if (this.value == &quot;Search...&quot;) {this.value =  &quot;&quot;}' type='text' value='Search...'/><br />
        <button id='sbutton' type='submit'><br />
          <span id='simg'/><br />
        </button><br />
      </form><br />
    </div><br />
<style type="text/css"><br />
#sbutton {<br />
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));<br />
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);<br />
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);<br />
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);<br />
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;<br />
border: 1px solid #3079ED;<br />
border-radius: 2px 2px 2px 2px;<br />
color: #FFFFFF;<br />
height: 27px;<br />
min-width: 76px;<br />
padding: 0 21px;padding-bottom: 2px;<br />
}<br />
#sbutton:hover{    background-color: #357AE8;<br />
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));<br />
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);<br />
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);<br />
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);<br />
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);<br />
border: 1px solid #2F5BB7;<br />
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}<br />
#simg {<br />
background:  url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXM2pefcG074F5jnMbbE5PY2AH2f8cdEHoZOyAhllLeleGs7VTl6sq3PmcKSrte22k0KnRa_gy0ihZ3a2jgxgKPerQMu0GVq6hb3-8kvGBMzuNombmqGZKMZW0gL4wFXcev1OECeE6Ung/s1600/searchicon.png")  no-repeat scroll 0 0 transparent;<br />
display: inline-block;<br />
height: 14px;<br />
margin: 0;<br />
width: 17px;z-index:101;<br />
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}<br />
#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;}<br />
#s:focus {width: 200px;}<br />
.noop-searchbox {<br />
display: block;<br />
position: fixed;<br />
right: 0;<br />
top: 1%;<br />
max-width: 300px;min-width: 238px;<br />
z-index: 100;<br />
}<br />
</style><br />
</div>
</blockquote>
<br />
I hope this article will help you. If any problem with this please do comment.</div>
</div>

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 sear...