How to add Css3 Dark Blue Navigation Bar in Blogger

In my previous post I told you about a beautiful Spinny Leaf Menu Bar for Blogger. Now in this post i'll tell You about CSS Menu Bar, How to add Dark Blue Menu Bar in Blogger Blog.

ScreenShot

To install this Menu Bar Just Follow the Easy Steps:

Step 1: Login to Blogger> Template> Edit HTML

Step 2: Now find this Piece of Code ]]>

.(by pressing Ctrl + F)

Step 3: Copy the Following Code and Paste Before ]]>

.

#navigation1 { width:900px;height: 45px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKm2gAtJd9g8qGKJmcuLpNVqxiAyeZ5hNhQqPEaElZ4G7l6W21uQTXaTiWPp4LkElmzFJF21JSns6FhNKhSkDMn6G_1dB7YylBjhF-DuCdCweUFu68eRxiy6iHdQ-0lbHUV8ayGdOXN5A/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/AVvXsEhaq_FbxzFx4AtqumsEO-RkN7NmW_iArd48-2-6eysdBOdr3aGDIsypkMqTP3fHrCw_eZW9nfkHOaqkhXPvwd1sxhDxT9A1AI7kIyetkf6NueShFAdfNZXDqKYtzQwetUOkkfM1S_2xKZM/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; }

Step 4: Click on Save template.

Step 5: Now go to Layout

Step 6: Click on Add Gadget and select Add HTML/Java Script

Step 7: Paste th Following Code in Box.

<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 the # with your link and Red colored Text with your menu name as you Wish.

Now Save Gadget You are Done. If you have any problem discuss in comment below.

Please Give Us Your 1 Minute In Sharing This Post!

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Powered By: ITmaza