How To Add Black Colour CSS3 Navigation Menu Bar For Blogger
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 */6. Go to blogger and click Layout
.bloggersstand_menu,.bloggersstand_menu ul,.bloggersstand_menu li,.bloggersstand_menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.bloggersstand_menu {
height: 40px;
width: 525px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.bloggersstand_menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.bloggersstand_menu li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.bloggersstand_menu li:first-child a { border-left: none; }
.bloggersstand_menu li:last-child a{ border-right: none; }
.bloggersstand_menu li:hover > a { color: #8fde62; }
.bloggersstand_menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.bloggersstand_menu li:hover > ul { opacity: 1; }
.bloggersstand_menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.bloggersstand_menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.bloggersstand_menu ul li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.bloggersstand_menu ul li:last-child a { border: none; }
.bloggersstand_menu a.documents { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMJ8TumYImeCUebh43eoK7zmu_wAKBfXwgI9f-ysizsFxrL9hew7NhsIIkUT1WS6MxjrLpLt_ymy_LHxxD6J9KwXgPqEMpyfroqF26Kxz9no9Ire-Fvx1AgDoRAuWYozDXQ9aTnXnbacws/s1600/docs.png) no-repeat 6px center; }
.bloggersstand_menu a.messages { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh05D52a_9qV8fbkcygqxz7HzPHpJaXZ7iANAcxhG_-Aoce1TVoTWRsYOFVKFaCbwobvQb1dMiJRTSA92KgpD-NHUHOiYW0rm_Wt2Gj5BCf3et5Yqf9P_BzX1cWcLQoGXJH0q0C56c7tJnh/s1600/bubble.png) no-repeat 6px center; }
.bloggersstand_menu a.signout { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqpEJMXNkJeEjJsEu6W60kbTC4p1wlTZ31zpgbko8Jii7XClAP1saLYZT7u1so7kAd6om4LKLlPkoGwX-HWMkjSzk9FkNlPCDyu-JE0-FXi9xHxp31iPLntWCHw79S9yORqQ35v5Psz-D2/s1600/arrow.png) no-repeat 6px center; }
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.
<ul class="bloggersstand_menu">*Change All # With Your Links.
<li><a href="#">Home</a></li>
<li><a href="#">Likes</a></li>
<li><a href="#">Views</a>
<ul>
<li><a href="#" class="documents">Documents</a></li>
<li><a href="#" class="messages">Messages</a></li>
<li><a href="#" class="signout">Sign Out</a></li>
</ul>
</li>
<li><a href="#">Uploads</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact us</a></li>
</ul>
9. Now save your HTML/Javascript'. Done!
