728x90 AdSpace

  • Latest News

    Sunday, November 30, 2014

    Simple Css3 Drop Down Navigation Bar For Blogger

    Simple Css3 Drop Down Navigation Bar For Blogger



    Demo 

    LET,S START ..FIRST OF ALL LOG IN TO YOUR BLOG

    AND BACKUP YOUR TEMPLATE 

    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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy-37r0UYlv6yS8xt7lcqzVPRpNLWpxW6PzZ4OrBhImGl28cKBTsRtJO454hVubYOxNOg0TWXQGvhjHFlGy_xhfsQIcE-3LsPUhb-EcUk_od-QrneB5D1b-f69T4Wwa_6skt6nIcrD6hQ_/s1600/docs.png) no-repeat 6px center; }
    .btrix_menu a.messages { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZU9nG02mskC6tSVeNZr_9Yz8pGYV7yFgdY4b-2cCphzzgXH6oa2ZjTasVf3JbebCMVNXpC5AJ47hL1CNtANJpu6HaL5-A0hoDhvE8F5Fi1Cjh5dU_0PVjmw7-NCITGCWEbA8eJicnfWwG/s1600/bubble.png) no-repeat 6px center; }
    .btrix_menu a.signout { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdIVZNTqn5vUqSULyJ1uefNbFU_z1LqdglRyt8dnUXHoZWL3W8o0uz75B1an33yX3RBdWpTY2AOYlihmqWYTTSNssHllo26E6ZX3hC9GtXbjrujwakVGeqnnWwIY8veUaJE2vsct0tUFqK/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...

    • Blogger Comments
    • Facebook Comments

    0 comments:

    Post a Comment

    Item Reviewed: Simple Css3 Drop Down Navigation Bar For Blogger Rating: 5 Reviewed By: bisma
    Scroll to Top