Simple Css3 Drop Down Navigation Bar For Blogger

In this tutorial im gonna explicate how to add together elementary Css3 drib down  menu  bar for your  blogger  There are minor icons  on  sub  menu. This  card bar  works  alongside every internet  browsers.You can   link with  your main  pages by  using  this  navigation. Im   using  Css3  and  HTML, Just banking concern fit out demo.Its slow to add together to blogger larn my

Demo

1. Log inwards to blogger describe of piece of occupation concern human relationship together with Click drib down.

 In this tutorial im gonna explicate how to add together elementary Css Simple Css3 Drop Down Navigation Bar For Blogger

2. Now conduct “Template” Like Below.

 In this tutorial im gonna explicate how to add together elementary Css Simple Css3 Drop Down Navigation Bar For Blogger

3. Now yous tin dismiss run across Live on blog, Click EDIT HTML Button”

4. Now click Proceed button.
   
5. Find this tag yesteryear using Ctrl+F    ]]></b:skin>

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

/* The CSS Code for the card starts hither bloggertrix.com */ .btrix_menu,.btrix_menu ul,.btrix_menu li,.btrix_menu a {  margin: 0;  padding: 0;  border: none;  outline: none; } .btrix_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; } .btrix_menu li {  position: relative;  list-style: none;  float: left;  display: block;  height: 40px; } .btrix_menu li a {  display: block;  padding: 0 14px;  margin: 6px 0;  line-height: 28px;  text-decoration: none;  border-left: 1px enterprise #393942;  border-right: 1px enterprise #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; }  .btrix_menu li:first-child a { border-left: none; } .btrix_menu li:last-child a{ border-right: none; }  .btrix_menu li:hover > a { color: #8fde62; }  .btrix_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 relaxation .1s;  -moz-transition: opacity .25s relaxation .1s;  -o-transition: opacity .25s relaxation .1s;  -ms-transition: opacity .25s relaxation .1s;  transition: opacity .25s relaxation .1s; }  .btrix_menu li:hover > ul { opacity: 1; } .btrix_menu ul li {  height: 0;  overflow: hidden;  padding: 0;  -webkit-transition: peak .25s relaxation .1s;  -moz-transition: peak .25s relaxation .1s;  -o-transition: peak .25s relaxation .1s;  -ms-transition: peak .25s relaxation .1s;  transition: peak .25s relaxation .1s; } .btrix_menu li:hover > ul li {  height: 36px;  overflow: visible;  padding: 0; } .btrix_menu ul li a {  width: 100px;  padding: 4px 0 4px 40px;  margin: 0;  border: none;  border-bottom: 1px enterprise #353539; } .btrix_menu ul li:last-child a { border: none; } .btrix_menu a.documents { background: url(http://1.bp.blogspot.com/-ufTASGYhnRY/UUqTF6utFaI/AAAAAAAAAbg/mjL4RGoqGp8/s1600/docs.png) no-repeat 6px center; } .btrix_menu a.messages { background: url(http://1.bp.blogspot.com/-vPgkW1tY5Qg/UUqTF-S_CDI/AAAAAAAAAbs/oPXETufCfkc/s1600/bubble.png) no-repeat 6px center; } .btrix_menu a.signout { background: url(http://4.bp.blogspot.com/-5yd9R4gXA48/UUqTF8Zdf9I/AAAAAAAAAbo/iEWPtSKqus4/s1600/arrow.png) no-repeat 6px center; } 

7. Go to blogger together with click Layout

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

9. Paste below code.

<ul class="btrix_menu">   <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="omelto.com">Contact us</a></li> </ul>  

Replace # alongside your links.

10. Now relieve your HTML/JavaScript’.

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