Ads Top

Extreme CSS3 Floating Google Search Bar for Blogger FREE..!!

Google search bar for Blogger
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
  • 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 == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' 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("http://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.

      No comments:

      Categories

      adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
      Powered by Blogger.