• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

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

Posted by Mohsin On 8/17/2013 06:12:00 AM No comments

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.

      0 comments:

      Post a Comment

      All types of Comments are welcome