How To Add Horizontal Tab menu with Search Form

Horizontal tab menu has been equipped with an integrated search form. The position of the search form on the sidelines for the right and the search form is built using CSS3 code that serves to form a transition animation when the search form at the click. To do a search enter the words related to the topic you are going to look and then proceed to click “enter”.

[button link=”http://bloggerherodemo.blogspot.com/2012/11/blockquote.html” newwindow=”yes”] LIVE DEMO[/button]

Adding Tab Menu To Blogger

  • Login to blogger
  • Click on layout
  • Add a Gadget
  • Html/ Javascript
  • Enter the following code in it
<style>form#GRsf{
      padding:0 0 0 10px;
      margin:0 auto;
      width:95%;
      height:45px;
      background:#000;
      font-family: arial, sans-serif;
      background:#000;
      background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
      background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
      background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
      background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
      border-radius:8px;
      box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
}
form#GRsf input{
      width:80px;
      height:20px;
      float:right;
      margin:10px 12px 0 0;
      border:0;
      background:#aaa url(https://lh4.googleusercontent.com/-VXfIR2i06Fs/ULBk6qutBLI/AAAAAAAAG_I/WFFZUz8Z728/s12/blogger-heroe-search.png) no-repeat 3px center;
      border-radius:10px;
      padding-left:20px;
      outline:none;
      -webkit-transition: 0.5s;
      -moz-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s;
}
form#GRsf input:focus {
      width:200px;
      background-color:#fff;
}
form a{
      display:block;
      float:left;
      height:34px;
      width:100px;
      text-align:center;
      color:#fff;
      line-height:35px;
      text-decoration:none;
      text-shadow:0 1px 5px rgba(0, 0, 0, 0.5);
      margin:5px 3px 0;
      background:#900;
      border-radius:6px 6px 4px 4px;
      -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
      -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
      -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
      box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
      -webkit-transition: 0.5s;
      -moz-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s;
}
form#GRsf input:focus ~ a {width:80px;}
form#GRsf a:hover{background:#333;
      background:#09c;
      border-radius:8px 8px 0 0;
      -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
      -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
      -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
      box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
      text-decoration:none;
}
</style>  <form id="GRsf"  action="http://bloggers-hero.blogspot.com/search" method="get">
<input name="q" type="text" value="Search..." onfocus="if (this.value=='Search...') {this.value='';}" onblur="if (this.value=='') {this.value='Search...';}" />
 <a href="#url"><span>iHome</span></a>
 <a href="#url"><span>iProd</span></a>
 <a href="#url"><span>iServe</span></a>
 <a href="#url"><span>iContact</span></a>
 <a href="#url"><span>iBet</span></a>
 <a href="#url"><span>iKnow</span></a>
</form>
  • Change http://bloggers-hero.blogspot.com/search whith your own url.
  • That’s it!
  • If You Enjoy This Post! Please Take 5 Seconds To Share It.

Be sure to subscribe to the Blogger Heroe newsletter and get regular updates about awesome posts just like this one and more!

About kasper

Hey Guys I am Avinash a.k.a Kasper.I am one of the founder of this blog.I love blogging,gaming and other fitness activities.Blogging has taught me many things in my life and made me different from others.The only thing I believe is that if you ain't First your Last!

Speak Your Mind

*


*