Thursday, March 21, 2013

Simple Css3 Drop Down Navigation Bar For Blogger

In this tutorial im gonna explain how to add simple Css3 drop down  menu  bar for your  blogger  There are small icons  on  sub  menu. This  menu bar  works  with every internet  browsers.You can   link with  your main  pages by  using  this  navigation. Im   using  Css3  and  HTML, Just check out demo.Its easy to add to blogger get my


Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

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

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

/* The CSS Code for the menu starts here 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 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;
}

.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 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;
}

.btrix_menu li:hover > ul { opacity: 1; }
.btrix_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;
}
.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 solid #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 and click Layout

8. Click Add Gadget and 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="http://www.bloggertrix.com/">Contact us</a></li>
</ul>

Replace # with your links.

10. Now save your HTML/JavaScript'.

    You are done...

20 comments:

  1. Nice one dude.
    thanks you..

    ReplyDelete
  2. Assalam o Alikum : Ma na is Menu ko add kiya hai apnya blog ma magar sub menu nahe ata please koi tareeka batawo.

    http://samimomin.blogspot.com

    ReplyDelete
  3. Cool one! it looks like the horizontal menu is limited to only 7 items. Any thing beyond will wrap to a second line (and the second line doesn't get the CSS style). How do I configure it so that I can show all menu items (move than 7) in one single line

    thanks

    ReplyDelete
  4. Nice info, but don't forget to compress the css to make the loading fast

    ReplyDelete
  5. thank u this is nice information
    visit my blog http://desihungamaj.blogspot.in/

    ReplyDelete
  6. doesn't work :(
    www.novaibnu.com

    ReplyDelete
  7. That is very nice, it really works fine

    thanks
    http://pakistanlearningcenter.blogspot.com/

    ReplyDelete
  8. Entire nav menu looks awesome and i would like to add it but i have one query from you that how can i add search box at the tail of this navigation menu. Is it possible . Please provide your suggestions.

    ReplyDelete
  9. The Menu Bar is working. but the dropdown is not droping. please what do i do?

    dopestjamz.blogspot.com.ng

    ReplyDelete
  10. Please Sohan This is very urgent for me. What do i do for the dropdown path to wwork?

    dopestjamz.blogspot.com.ng

    ReplyDelete
  11. The look and feel of menu bar is quite cool, but the drop down menu is not working properly. Please fix it as soon as possible, so others can use it freely.. thanks :)

    ReplyDelete