Add Animated Style Css3 Blue Navigation Menu For Blogger
Sky Blue Beauty is pure Css Navigation Menu Bar . Its very attractive Your visitor will really love to play your Menu Bar. when visitor move mouse over menu bar they will got shutter up down & Shutter Left Right Effect .Over all its fast attractive & Stylish Navigation Menu Bar For Blogger ..
We Have largest Collection of Navigation Menu Bar Check IT .
For Demo Animated preview is Above.
Lets Start Adding This Widget On Your Blog
Step To Add Animated Blue Beauty Navigation Menu Bar Into Blog.
- Go to blogger dashboard.
- Now click on Layout tab.
- Now add html/javascript below title of blog.
- Paste the following code there and save it.
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
Now we need to add css to make it beautiful.To add css follow below steps.
- Go to blogger dashboard.
- Click on template tab.
- Click on Customize button.
- Go to Add Css and add the following code there.
For left to right
For up to down#menu li {
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
border: 1px solid #3d8bf2;
padding: 15px 20px 15px 20px;
text-decoration: none;
font-family: arial;
color:#fff;
margin-left: -5px;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEFEGjhtIshQsEefYnubIMYcOqx0bQdJIWF7cVhyphenhyphennzK7ZQ1ld1t8aDRuJNXVY76KQqxsmhoOVXxBGRwBjhKrW4-HsX6Rm1ApHLO4Y9S9LFDFDhahSze4vef9n-fmh560SHPilR57O0fdc/s1600/menubg1.PNG');
background-position: left;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}
#menu li a:hover {
background-position:right;
}
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
border: 1px solid #3d8bf2;
padding: 15px 20px 15px 20px;
text-decoration: none;
font-family: arial;
color:#fff;
margin-left: -5px;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEFEGjhtIshQsEefYnubIMYcOqx0bQdJIWF7cVhyphenhyphennzK7ZQ1ld1t8aDRuJNXVY76KQqxsmhoOVXxBGRwBjhKrW4-HsX6Rm1ApHLO4Y9S9LFDFDhahSze4vef9n-fmh560SHPilR57O0fdc/s1600/menubg1.PNG');
background-position: left;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}
#menu li a:hover {
background-position:right;
}
#menu li {
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
border: 1px solid #3d8bf2;
padding: 15px 20px 15px 20px;
text-decoration: none;
font-family: 'Acme', sans-serif;
color:#fff;
margin-left: -5px;
background-image: url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggfPoUyyZAensPv81s0I_QCujm-PI4WdBoQ4Ku69C0aiDNkthUq6XBnvyfNDEXmbggXJsj0VI9XXvr58nNR7YYTU39_C53RzEY5yTLK8VQ5DNNpQR-Tdlxoz8yEqbCs5yrGZfDTNRcqfc/s1600/menubg2.PNG ');
background-position: bottom;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
}
#menu li a:hover {
background-position:top;
}
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
border: 1px solid #3d8bf2;
padding: 15px 20px 15px 20px;
text-decoration: none;
font-family: 'Acme', sans-serif;
color:#fff;
margin-left: -5px;
background-image: url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggfPoUyyZAensPv81s0I_QCujm-PI4WdBoQ4Ku69C0aiDNkthUq6XBnvyfNDEXmbggXJsj0VI9XXvr58nNR7YYTU39_C53RzEY5yTLK8VQ5DNNpQR-Tdlxoz8yEqbCs5yrGZfDTNRcqfc/s1600/menubg2.PNG ');
background-position: bottom;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
}
#menu li a:hover {
background-position:top;
}
Now click on save button and enjoy your cool css navigation menu :))