How To Add Red & Black CSS3 Hover Effect Navigation Menu Bar For Blogger
1. Log in to blogger account2. 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 */6. Go to blogger and click Layout
#navigation { width:900px;height: 45px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgchPGNZCGQCrsyxFNLpBZqgpAMIj6k_qBP-mA873qZbhInlBgcKlKn5B6TFYXZUed9b7Y-JNszTCT-HkxW5nyS_pDxLNsBHqZr-AIBplg3QDDIUL1_yqsrrypUrXpO9dLbAnYrfWgfIz0/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; }
#navigation ul { list-style: none outside; padding: 8px 0 0 8px; }
#navigation li { float: left; display: inline; height: 29px; line-height: 29px; text-transform: uppercase; margin-right: 3px }
#navigation li.last { margin-right: 0; }
#navigation li a,
#navigation li a span { float: left; display: inline; height: 29px; padding-left: 10px; background-position: 0 0; color: #919191; }
#navigation li a span { padding-left: 0; padding-right: 10px; background-position: right 0; }
#navigation ul.sf-menu li a:hover,
#navigation ul.sf-menu li a:hover span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwsqoZ7rG2uW-_piBcMfYTuu6Inb4peqtW5htWq0apX5Je-NQ8wTvsUELTxv8h2SrkD_bQv1T_ZIohhlQ5MClAVnBISy5uueBakOSGPmRU5E-idVzZv8tHvZAmDy3iZ4rSmiS3aNCEk_0/s1600/nav-states-red.gif); text-decoration: none; color: #fff; }
#navigation li a.clicked,
#navigation li a.clicked span { background-position: 0 bottom }
#navigation li a.clicked span { background-position: right bottom; }
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.
<div id="navigation">*Change All # With Your Links.
<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>
9. Now save your HTML/Javascript'. Done!
If you have any query regarding Beautiful Red & Black CSS3 Hover Effect Navigation Menu Bar for blogger.it give amazing look to your website or blog.Feel free to ask,just drop your comment below.
