How To Add Awesome Dark Style 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 CSS3 Code for the menu starts here bloggersstand.blogspot.com */6. Go to blogger and click Layout
#bloggersstand_navs {
background:#2c2c2c;
margin:0 auto;
height:50px;
border-bottom:5px solid #cd2122;
}
#bloggersstand_navs .menu-alert{
float:left;
padding:18px 0 0 10px ;
font-style:italic;
color:#FFF;
}
#top-menu-mob , #main-menu-mob{ display:none; }
#bloggersstand_navs ul li {
text-transform: uppercase;
font-family: Oswald,arial,Georgia, serif;
font-size:16px;
position: relative;
display: inline-block;
float: left;
border:1px solid #222222;
border-width:0 0 0 1px;
height:50px;
}
#bloggersstand_navs ul li:first-child,
#bloggersstand_navs ul li:first-child a{border:0 none;}
#bloggersstand_navs ul li:last-child a{border-right:0 none;}
#bloggersstand_navs ul li a {
display: inline-block;
height: 50px;
line-height: 50px;
color: #ddd;
padding:0 14px;
text-shadow:0 1px 1px #000;
border-left:1px solid #383838;
}
#bloggersstand_navs ul li a .sub-indicator{}
#bloggersstand_navs ul li a:hover {}
#bloggersstand_navs ul ul{
display: none;
padding:0;
position: absolute;
top: 50px;
width: 180px;
z-index: 99999;
float: left;
background: #2d2d2d !important;
-webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
#bloggersstand_navs ul ul li, #bloggersstand_navs ul ul li:first-child {
background: none !important;
z-index: 99999;
min-width: 180px;
border:0 none;
border-bottom: 1px solid #222;
border-top: 1px solid #383838;
font-size:13px;
height:auto;
margin:0;
}
#bloggersstand_navs ul ul li:first-child ,#bloggersstand_navs ul li.current-menu-item ul li:first-child,
#bloggersstand_navs ul li.current-menu-parent ul li:first-child,#bloggersstand_navs ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
#bloggersstand_navs ul ul ul ,#bloggersstand_navs ul li.current-menu-item ul ul, #bloggersstand_navs ul li.current-menu-parent ul ul, #bloggersstand_navs ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; }
#bloggersstand_navs ul.sub-menu a ,
#bloggersstand_navs ul ul li.current-menu-item a,
#bloggersstand_navs ul ul li.current-menu-parent a,
#bloggersstand_navs ul ul li.current-page-ancestor a{
border:0 none;
background: none !important;
height: auto !important;
line-height: 1em;
padding: 10px 10px;
width: 160px;
display: block !important;
margin-right: 0 !important;
z-index: 99999;
color: #ccc !important;
text-shadow:0 1px 1px #000 !important;
}
#bloggersstand_navs ul li.current-menu-item ul a,
#bloggersstand_navs ul li.current-menu-parent ul a,
#bloggersstand_navs ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
#bloggersstand_navs ul li:hover > a, #bloggersstand_navs ul :hover > a { color: #FFF ;}
#bloggersstand_navs ul ul li:hover > a,
#bloggersstand_navs ul ul :hover > a {color: #FFF !important; padding-left:15px !important;padding-right:5px !important;}
#bloggersstand_navs ul li:hover > ul {display: block;}
#bloggersstand_navs ul li.current-menu-item,
#bloggersstand_navs ul li.current-menu-parent,
#bloggersstand_navs ul li.current-page-ancestor{
margin-top:0;
height:50px;
border-left:0 none !important;
}
#bloggersstand_navs ul li.current-menu-item ul.sub-menu a, #bloggersstand_navs ul li.current-menu-item ul.sub-menu a:hover,
#bloggersstand_navs ul li.current-menu-parent ul.sub-menu a, #bloggersstand_navs ul li.current-menu-parent ul.sub-menu a:hover
#bloggersstand_navs ul li.current-page-ancestor ul.sub-menu a, #bloggersstand_navs ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
#bloggersstand_navs ul li.current-menu-item a, #bloggersstand_navs ul li.current-menu-item a:hover,
#bloggersstand_navs ul li.current-menu-parent a, #bloggersstand_navs ul li.current-menu-parent a:hover,
#bloggersstand_navs ul li.current-page-ancestor a, #bloggersstand_navs ul li.current-page-ancestor a:hover{
background:#cd2122;
text-shadow:0 1px 1px #b43300;
color:#FFF;
height:50px;
line-height:50px;
border-left:0 none !important;
}
#bloggersstand_navs ul.sub-menu li.current-menu-item,#bloggersstand_navs ul.sub-menu li.current-menu-item a,
#bloggersstand_navs li.current-menu-item ul.sub-menu a,#bloggersstand_navs ul.sub-menu li.current-menu-parent,
#bloggersstand_navs ul.sub-menu li.current-menu-parent a,#bloggersstand_navs li.current-menu-parent ul.sub-menu a,
#bloggersstand_navs ul.sub-menu li.current-page-ancestor,#bloggersstand_navs ul.sub-menu li.current-page-ancestor a,
#bloggersstand_navs li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
#bloggersstand_navs ul li.menu-item-home ul li a,
#bloggersstand_navs ul ul li.menu-item-home a,
#bloggersstand_navs ul li.menu-item-home ul li a:hover{
background-color:transparent !important;
text-indent:0;
background-image:none !important;
height:auto !important;
width:auto;
}
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.
<nav id='bloggersstand_navs'>*Change All # With Your Links.
<div class='container'>
<div class='main-menu'><ul class='menu' id='menu-main'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Modes</a>
<ul class='sub-menu'>
<li><a href='#'>Post With Featured Image</a></li>
<li><a href='#'>Post With Slider</a></li>
<li><a href='#'>Post with SoundCloud</a></li>
<li><a href='#'>Post With Video</a></li>
</ul>
</li>
<li><a href='#'>Downloads</a>
<ul class='sub-menu'>
<li><a href='#'>Text and Lists</a></li>
<li><a href='#'>Video and Audio</a></li>
<li><a href='#'>Social</a></li>
<li><a href='#'>Tabs & Toggles & Author</a></li>
</ul>
</li>
<li><a href='#'>Templates</a>
<ul class='sub-menu'>
<li><a href='#'>Authors</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Tags</a></li>
<li><a href='#'>Timeline</a></li>
</ul>
</li>
<li><a href='#'>Categories</a>
<ul class='sub-menu'>
<li><a href='#'>World</a></li>
<li><a href='#'>Technology</a></li>
<li><a href='#'>Sports</a></li>
</ul>
</li>
<li><a href='#'>Layout</a>
<ul class='sub-menu'>
<li><a href='#'>Full Width</a></li>
<li><a href='#'>Right Sidebar</a></li>
<li><a href='#'>Left SIdebar</a></li>
</ul>
</li>
<li><a href='#'>Reviews</a>
<ul class='sub-menu'>
<li><a href='#'>Stars</a></li>
<li><a href='#'>Points</a></li>
<li><a href='#'>Percent</a></li>
<li><a href='#'>in The Top</a></li>
</ul>
</li>
</ul></div>
</div>
</nav>
9. Now save your HTML/Javascript'. Done!
If you have any query regarding Attractive Dark Style CSS3 Navigation Menu Bar for blogger/blogspot.it give amazing look to your website or blog.Feel free to ask,just drop your comment below.