Best Simple Animated Navigation Bar for Blogger

Navigation Bars are very important for Blogs so that their visitors can easily navigate to other pages on your Blog or Website. But many navigation Bars are very simple, That other visitors can't notice the navigation Bar and they will be left clicking on other external links on your Blog.

NAV DEMO

So we have here the Best Simple Animated Navigation Bar for Blogger Blogs and other also for other sites.
This navigation bar is made up with pure CSS and HTML, This means that this navigation bar for Blogger is very lightweight and also very to implement on your Blog.
What are the nice Features of this Navigation Bar:

This Navigation Bar has awesome features listed below:

• Animated
• LeightWeight
• Easy to Implement
• Nice Design

Procedure on How to put Simple Animated Navigation Bar on Blogger:

• First step is to Login to your Blogger Blog.
• Go to Templates > then Edit HTML.

• Paste the Code below Above ]]></b:skin>.

/* Simple Animated Nav - tronicflow.com */
* {margin: 0; padding: 0;}
.navigation {
background: #fff;
overflow: hidden;
width: 760px;
height: 46px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);}
.navigation li {
width: 120px; border-left: 5px solid #666;
float: left;
cursor: pointer;
list-style-type: none;
padding: 10px 50px 10px 15px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;}
.navigation li h2 {
font-family: georgia;
font-weight: normal;
font-style: italic;
font-size: 14px;
margin-bottom: 5px;
line-height: 16px;}
.navigation li p{
font-size: 11px;
color: #999;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;}
.navigation li:hover {
background: #333;
border-left: 5px solid #000;}
.navigation li:hover h2 {
font-weight: bold;
color: #fff;}
.navigation li:hover p {
color: #ccc;
padding-left: 5px;}
/* Nav bar - closed - tronicflow.com */

• After that, Place the HTML code below on the place you want it to appear.

<ul class="navigation">
<li>
<a href="#"><h2>Home</h2></a>
<p>Welcome Here</p>
</li>
<li>
<a href="#"><h2>About</h2></a>
<p>Who we are</p>
</li>
<li>
<a href="#"><h2>Write for Us</h2></a>
<p>Give us Content</p>
</li>
<li>
<a href="#"><h2>Feedback</h2></a>
<p>Help us improve</p>
</li></ul>

That's it!, Just change the text and the link with your own. Please give it a try.

Final Words:

This design is from ThecodePlayer.com and we just customize some of the codes to be nicer for Blogger users!. If you have any problems with this Best simple animated Navigation Bar for Blogger. You can drop your comments below and we will try to answer it as soon as possible. Thanks!