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

View Demo

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDQou9WBukSlUJGixKdgwawo6byWpnAe68pHTwOfiNoCD_somZECDrMbKYWJblV3-Xv06h7eXMQEg3KunO2IoR9bdfqvdDEp6k1g38UpJLxydgpCHv1EFtS3mbD5wU9ELdq99vw9xwzSBr/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. 

Share it Please

Tweet