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/AVvXsEhckT67Wnal3E_7EfppAps5qQ2C4z4-5HjquPBF8CZtlk_GJWJT0dQlVl4jaxkGk0vMBDXyxw57tqpb6tqmnUM0pavMAQuA-UWLOL60AUvMQhSD9Ll5qCN3YAImaIkcQk77eiTRo9552OUe/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.

Note:- Hello There!Happy for reading the article and don't forget share this article on your social network.Thanks You ^_^

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Admin ID-Netblog, Published at 10:05 PM and have 0 comments

Writed by : Admin ID-Netblog

My friend was reading the article onHow To Add Horizontal Tab menu with Search Form. Admin, buddy permitted copying and pasting or disseminate this article, but do not forget to put the source link below.

<a href="https://bloggerheroe.blogspot.com/2012/11/how-to-add-horizontal-tab-menu-with.html" target="_blank">How To Add Horizontal Tab menu with Search Form</a>