Css3 Dark Blue Navigation Bar For Blogger

Navigation bar is very important in websites. It helps to navigate important page easily.So, your audience can find important pages.Other things is, Everyone can add navigation bar for their blogs.
But you have to add attractive menu for your blogs.It will give nice looks to your blogs and helps to attractive your audience too.In this tutorial im gonna explain how to add Css3 dark blue navigation bar for your blog.Every steps explained well to understand newbies.Just give a try to add Css3 Dark color navigation bar.

How to add Css3 Dark Blue Navigation Bar

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Find this tag by using Ctrl+F    ]]></b:skin>

5. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */

#navigation1 { width:900px;height: 45px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpxgdpHzFNaRGWrH8C6rKHbdMM8RFhENfQsF0MzXc9dU1e7vxEWhNpK9G9cfUogoRf4apO7duCNKSDUZNEGKi-PwInFZUNfFSs4OtxkRJek1IIdDz6zIkGwp2txy0sN-wtL_k4du4IWbE/s1600/nav-bg.gif) repeat-x 0 0;
border:inherit 2px #000000;
-moz-border-radius-topleft: 10px;-moz-border-radius-topright:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px; }
#navigation1 ul { list-style: none outside; padding: 8px 0 0 8px; }
#navigation1 li { float: left; display: inline; height: 29px; line-height: 29px; text-transform: uppercase; margin-right: 3px }
#navigation1 li.last { margin-right: 0; }
#navigation1 li a,
#navigation1 li a span { float: left; display: inline; height: 29px; padding-left: 10px; background-position: 0 0; color: #919191; }
#navigation1 li a span { padding-left: 0; padding-right: 10px;  background-position: right 0; }
#navigation1 ul.sf-menu li a:hover,
#navigation1 ul.sf-menu li a:hover span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOz4qO_53pYkYo4Ma8iCGvDZ0hcjY-OodQP2lbKare3LtmSYLJk3o-HLIS143AjqbG2D5yXXVmsIwRTRfJIUshN_R6w8rkchc0cYwBM6P9hNMv4xoKzvo8bA2Mdkm0HxEPG_sKaBLAKjo/s1600/bt_nav_hover.png); text-decoration: none; color: #fff; }
#navigation1 li a.clicked,
#navigation1 li a.clicked span { background-position: 0 bottom }
#navigation1 li a.clicked span { background-position: right bottom; }

6. Go to blogger and click Layout

7. Click Add Gadget and select 'HTML/Javascript

8. Paste below code.

<div id="navigation1">
<ul class="sf-menu sf-js-enabled sf-shadow">
<li class="cat-item cat-item-29"><a title="Home" href="#"><span>HOME</span></a></li>
<li class="cat-item cat-item-29"><a href="#" title="Graphics"><span>Graphics</span></a></li>
<li class="cat-item cat-item-31"><a href="#" title="Coding"><span>Coding</span></a></li>
<li class="cat-item cat-item-18"><a href="#" title="inspiration"><span>inspiration</span></a> </li>
<li class="cat-item cat-item-1"> <a href="#" title="Photography"><span>Photography</span></a></li>
<li class="cat-item cat-item-30"><a href="#" title="Freebies"><span>Blogger</span></a></li>
<li class="cat-item cat-item-19"><a href="#" title="Wordpress"><span>Wordpress</span></a></li>
<li class="cat-item cat-item-25"><a href="#" title="Logo"><span>Logo</span></a></li>
<li class="cat-item cat-item-22"><a href="#" title="Contact"><span>Contact</span></a>
</li></ul></div>

Replace # with your links.

9. Now save your HTML/Javascript'.

You are done. If you have any problem related to this Css3 Dark blue navigation bar. Just leave a comment.I will help to you.

Share this post