Add Animated Shutter Style Css3 Navigation Menu For Blogger

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

#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/AVvXsEhyFqbn65WDNAdxQAT0uLDJ4BmffAJz-RjwW4tcHFCAv_olwnCDUqRoQpd2HxF0Z3qbSxDhdG0RSj2z4wyURrI6LH0vQceJ4iqiGlFrRdB7ixt2UK5UYOKkv8W_EYmHn3mn2eH5BWyFU5E/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;          
}

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: 'Acme', sans-serif;
color:#fff;
margin-left: -5px;
background-image: url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhElBtOJlNGC7MVYyKwqwsdtpOmnNu6GbN9zQmgfqpYR8sV3AGpwrTefQwZfj7rEaAnOdkCh3F8hPr_aAS9PaqISWdVDTlSgH8OEu0scw5rHQSuw4ZxXGGhDNBV750vbQyoU8Ya6-qb67c/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 :))