Attractive Dark Style Css3 Navigation Bar for Blogger

In this tutorial im gonna explicate how to add together attractive Css3  navigation for blogger.It helps yous to brand your blog  attractive. You tin add together this Css3 Navigation Bar easily.Im using HTML together with CSS3 for this navigation.You tin take  await inwards present page.

In this tutorial im gonna explicate how to add together attractive Css Attractive Dark Style Css3 Navigation Bar for Blogger

Dark Css3 Navigation Bar for Blogger

1. Log inwards to blogger trouble organization human relationship together with Click drib down.

In this tutorial im gonna explicate how to add together attractive Css Attractive Dark Style Css3 Navigation Bar for Blogger

2. Now select “Template” Like Below.

In this tutorial im gonna explicate how to add together attractive Css Attractive Dark Style Css3 Navigation Bar for Blogger

  
3. Find this tag yesteryear using Ctrl+F    ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

/* The CSS3 Code for the card starts hither bloggertrix.com */ #btrix_navs {  background:#2c2c2c;  margin:0 auto;  height:50px;  border-bottom:5px enterprise #cd2122; }  #btrix_navs .menu-alert{  float:left;  padding:18px 0 0 10px ;  font-style:italic;  color:#FFF;  }  #top-menu-mob , #main-menu-mob{ display:none; }  #btrix_navs ul li {  text-transform: uppercase;  font-family: Oswald,arial,Georgia, serif;  font-size:16px;  position: relative;  display: inline-block;  float: left;  border:1px enterprise #222222;  border-width:0 0 0 1px;  height:50px;  }  #btrix_navs ul li:first-child,  #btrix_navs ul li:first-child a{border:0 none;}  #btrix_navs ul li:last-child a{border-right:0 none;}  #btrix_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 enterprise #383838;  }  #btrix_navs ul li a .sub-indicator{}  #btrix_navs ul li a:hover {}  #btrix_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;  }  #btrix_navs ul ul li, #btrix_navs ul ul li:first-child {  background: none !important;  z-index: 99999;  min-width: 180px;  border:0 none;  border-bottom: 1px enterprise #222;  border-top: 1px enterprise #383838;  font-size:13px;  height:auto;  margin:0;  }  #btrix_navs ul ul li:first-child ,#btrix_navs ul li.current-menu-item ul li:first-child,  #btrix_navs ul li.current-menu-parent ul li:first-child,#btrix_navs ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}  #btrix_navs ul ul ul ,#btrix_navs ul li.current-menu-item ul ul, #btrix_navs ul li.current-menu-parent ul ul, #btrix_navs ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; }  #btrix_navs ul.sub-menu a ,  #btrix_navs ul ul li.current-menu-item a,  #btrix_navs ul ul li.current-menu-parent a,  #btrix_navs ul ul li.current-page-ancestor a{  border:0 none;  background: none !important;  height: automobile !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;  }  #btrix_navs ul li.current-menu-item ul a,  #btrix_navs ul li.current-menu-parent ul a,  #btrix_navs ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}   #btrix_navs ul li:hover > a, #btrix_navs ul :hover > a { color: #FFF ;}  #btrix_navs ul ul li:hover > a,  #btrix_navs ul ul :hover > a {color: #FFF !important; padding-left:15px !important;padding-right:5px !important;}  #btrix_navs ul li:hover > ul {display: block;}  #btrix_navs ul li.current-menu-item,  #btrix_navs ul li.current-menu-parent,  #btrix_navs ul li.current-page-ancestor{  margin-top:0;  height:50px;  border-left:0 none !important;  }    #btrix_navs ul li.current-menu-item ul.sub-menu a, #btrix_navs ul li.current-menu-item ul.sub-menu a:hover,  #btrix_navs ul li.current-menu-parent ul.sub-menu a, #btrix_navs ul li.current-menu-parent ul.sub-menu a:hover  #btrix_navs ul li.current-page-ancestor ul.sub-menu a, #btrix_navs ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}   #btrix_navs ul li.current-menu-item a, #btrix_navs ul li.current-menu-item a:hover,  #btrix_navs ul li.current-menu-parent a, #btrix_navs ul li.current-menu-parent a:hover,  #btrix_navs ul li.current-page-ancestor a, #btrix_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;  }  #btrix_navs ul.sub-menu li.current-menu-item,#btrix_navs ul.sub-menu li.current-menu-item a,  #btrix_navs li.current-menu-item ul.sub-menu a,#btrix_navs ul.sub-menu li.current-menu-parent,  #btrix_navs ul.sub-menu li.current-menu-parent a,#btrix_navs li.current-menu-parent ul.sub-menu a,  #btrix_navs ul.sub-menu li.current-page-ancestor,#btrix_navs ul.sub-menu li.current-page-ancestor a,  #btrix_navs li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}  #btrix_navs ul li.menu-item-home ul li a,  #btrix_navs ul ul li.menu-item-home a,  #btrix_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;  } 

4. Go to blogger together with click Layout

5. Click Add Gadget together with select ‘HTML/Javascript

6. Paste below code.

<nav id='btrix_navs'> <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 amongst 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 together with Lists</a></li>  <li><a href='#'>Video together with Audio</a></li>  <li><a href='#'>Social</a></li>  <li><a href='#'>Tabs &amp; Toggles &amp; 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> 

7. Now salve your HTML/Javascript’.

    You are done…
Sumber http://www.bloggertrix.com/