20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

Dark Purple CSS Hover Navigation Menu Bar

Dark Purple CSS Hover effect Navigation Menu Bar for blogger blogspot,make your website attractive with css3 hover effect menu navigation menu bar
Dark Purple CSS Hover effect Navigation Menu Bar
Today I'm going to explain how to add CSS3 Dark Purple Style Hover Effect blogger navigation menu bar.Navigation bar is very important part of our website.It helps visitors to navigate our website and make easy to them find relevant content of our site.If you use some cool and attractive CSS3 hover effect menu bar for blogger it help to look your website awesome.just read this tutorial from this tutorial you will learn how to add Dark Purple CSS hover effect on your navigation bar widget.We are using CSS language for this navigation menu bar.To grab this menu bar for blogger website just follow the steps mentioned below.

How To Add Dark Purple CSS Hover Effect Navigation Menu Bar

1. Log in to blogger account
2. Now select "Template"
3. Now Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>
/* The CSS Code for the menu starts here bloggersstand.blogspot.com*/
#navigation1 { width:900px;height: 45px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibDe8eRuh8pimuImONsU95MmjmkXaKTGFDFuC4bRCk8B7dom5YhtYUMLcMYFHPgSeWgTfMDQdYJPYaGJ3mlgfItzXJXKgdpozNdJJzm2JnQPMh9dgaWIob3Oj5wmulxNM4BVf6AMxElX4/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/AVvXsEhYXJ8uyijrAbMB8-w2kuHa-tBM7_Ljz6IgAD_0GJXi_p_Urvpt7CgKYTwtXCKu4FE4MsPva1_ntmwFtfDozGGnbpM2h-2sb0-R2f6miF9dRwUpjHlasDjICbJQLknJapFFG09koRPCaJo/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>
*Change # With Your Profile/URL/username

9. Now save your HTML/Javascript'.

If you have Any Query regarding This Dark Purple CSS Navigation Menu Bar..Feel Free To Ask,Just Drop Your Comment.

Post a Comment