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.
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/AVvXsEhGq9IAuzXuDRswxoqCCpmnuTEj-sIcLgtz9UBytege1Qoj2i4_KjkV3p9rb8Mim3qYbQjZL6TnwdAIQwiKXindpKlOANqYdy_i-GrRZz5c0SieQNIAf-bMnmAiqzBSsU5g3H0riZrv_xw/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/AVvXsEhGq9IAuzXuDRswxoqCCpmnuTEj-sIcLgtz9UBytege1Qoj2i4_KjkV3p9rb8Mim3qYbQjZL6TnwdAIQwiKXindpKlOANqYdy_i-GrRZz5c0SieQNIAf-bMnmAiqzBSsU5g3H0riZrv_xw/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/AVvXsEhnRf0R9q_KKrt8KpfSzQs0yKgv-fBSJguEshzMkRxIaAPmfycoiI_-EM6fY-jevPLAIgWK7RIsXHbbmz5TNAWf7uLeqdvhzS1jxQkjTfiK9uCmsh3B11Np4wTeZSWp-jjCtdAKNHK8w3M/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/AVvXsEhnRf0R9q_KKrt8KpfSzQs0yKgv-fBSJguEshzMkRxIaAPmfycoiI_-EM6fY-jevPLAIgWK7RIsXHbbmz5TNAWf7uLeqdvhzS1jxQkjTfiK9uCmsh3B11Np4wTeZSWp-jjCtdAKNHK8w3M/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 :))