Tuesday, January 15, 2013

Animated Drop Down Vertical Menu Bar For Blogger

Today im  gonna  explain, how to add drop down vertical  menu bar  for  blogger.  Its include  with icons.you can check it demo link below.Im using Css3 and   HTML for this tutorial.You can get my
all vertical here

Animated+Drop+Down+Vertical+Menu+Bar+For+Blogger
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>
D
6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */
.container {
    background: url("../images/robot.png") no-repeat scroll 90px 35px rgba(255, 255, 255, 0.6);
    border: 1px solid #FFFFFF;
    height:400px;
    margin:20px auto;
    padding:10px;
    position:relative;
    width:715px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
#nav {
    border:3px solid #3e4547;

    box-shadow:2px 2px 8px #000000;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
#nav, #nav ul {
    list-style:none;
    padding:0;
    width:200px;
}
#nav ul {
    position:relative;
    z-index:-1;
}
#nav li {
    position:relative;
    z-index:100;
}
#nav ul li {
    margin-top:-23px;

    -moz-transition:  0.4s linear 0.4s;
    -ms-transition: 0.4s linear 0.4s;
    -o-transition: 0.4s linear 0.4s;
    -webkit-transition: 0.4s linear 0.4s;
    transition: 0.4s linear 0.4s;
}
#nav li a {
    background-color:#d4d5d8;
    color:#000;
    display:block;
    font-size:12px;
    font-weight:bold;
    line-height:28px;
    outline:0;
    padding-left:15px;
    text-decoration:none;
}
#nav li a.sub {
    background:#d4d5d8 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYValHfpH1LX_RoWszHUisOtEjeTAbS-JWs5W9adWFv-9SAospN9cLgvtQCelvVeBjZ5H7GNvIkiiR8P56aEClH0MQdN7GG6q_MdOkIFUcy-MpI-Swam_kgxwSSUmIlQRvszgR_xYZIj-9/s1600/down.gif") no-repeat;
}
#nav li a + img {
    cursor:pointer;
    display:none;
    height:28px;
    left:0;
    position:absolute;
    top:0;
    width:200px;
}
#nav li a img {
    border-width:0px;
    height:24px;
    line-height:28px;
    margin-right:8px;
    vertical-align:middle;
    width:24px;
}
#nav li a:hover {
    background-color:#bcbdc1;
}
#nav ul li a {
    background-color:#eee;
    border-bottom:1px solid #ccc;
    color:#000;
    font-size:11px;
    line-height:22px;
}
#nav ul li a:hover {
    background-color:#ddd;
    color:#444;
}
#nav ul li a img {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9qk7VJunHtroS4qLonIUXDsfp8VmmnzXqeCn7mcMTIZuus3wpAMsxm2PCcSvCW07Ltgqu61OSLh3LEjZr39vy5RFjLcMmlqp7HGSfZflzlo8m_wlq2VMSvXUG1whpPCpkhFSXnwSDuFDf/s1600/bulb.png") no-repeat;
    border-width:0px;
    height:16px;
    line-height:22px;
    margin-right:5px;
    vertical-align:middle;
    width:16px;
}
#nav ul li:nth-child(odd) a img {
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bAyyFKCTPTIJ6NlwgbhtWXJaRlT_wj8adfTj-ptt_iJpxOBZRp2l0eQFJFAottdpPHVXkzZm0PHKWFjDpV1ZEq-gir0g13IYrn8gunO-_cyc85MPn_INrab5RCo1qjAHTqOOu0PI7Exj/s1600/bulb2.png") no-repeat;
}
#nav a.sub:focus {
    background:#bcbdc1;
    outline:0;
}
#nav a:focus ~ ul li {
    margin-top:0;
    -moz-transition:  0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linears;
    -webkit-transition: 0.4s linears;
    transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
    display:block;
}
#nav a.sub:active {
    background:#bcbdc1;
    outline:0;
}
#nav a:active ~ ul li {
    margin-top:0;
}
#nav ul:hover li {
    margin-top:0;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<div class="container">

            <ul id="nav">
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjepRc9KSL8MeXAYuisSueyw9vZSv9p96MyTbRKcQNB9iottpL0el0cg3g4ChVRAUsUqK_ONt_BHqv-Xbx8FDB_elUxzuB9qNvp-OUplzAe3s1Ux-kcOkvJIXTE4Us-ANuZXF89AD02a6bd/s1600/arrow.png" /> Home</a></li>
                <li><a href="#" class="sub" tabindex="1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjepRc9KSL8MeXAYuisSueyw9vZSv9p96MyTbRKcQNB9iottpL0el0cg3g4ChVRAUsUqK_ONt_BHqv-Xbx8FDB_elUxzuB9qNvp-OUplzAe3s1Ux-kcOkvJIXTE4Us-ANuZXF89AD02a6bd/s1600/arrow.png" />HTML</a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7urX_iHaPAfJNTbJS5yZ75faErFsUaKoETka8by_qlZhUqPk1p7gtb_xqKak8pANqIxYlwI-g-rvwJdTae6ym49y08jj7z0sBiTZ47TDBCFmzHCGPE4ztijQ9YF2mkNF60DA0lnvJIWoB/s1600/up.gif" alt="" />
                    <ul>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipyCEwtaAgB-U8lZN1HmZ9Oa-YmBjVtlHjJtXtS2uxtBf_OJYu0u1aKz3Onv3UFjh1JcZas4naT_HR75vr1U8_xwmTsM-jUgdPwX831XjNReXwfzLAsRmtEthpQwJoqG1WBHa_4W5jfs7s/s1600/empty.gif" />Link 1</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipyCEwtaAgB-U8lZN1HmZ9Oa-YmBjVtlHjJtXtS2uxtBf_OJYu0u1aKz3Onv3UFjh1JcZas4naT_HR75vr1U8_xwmTsM-jUgdPwX831XjNReXwfzLAsRmtEthpQwJoqG1WBHa_4W5jfs7s/s1600/empty.gif" />Link 2</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipyCEwtaAgB-U8lZN1HmZ9Oa-YmBjVtlHjJtXtS2uxtBf_OJYu0u1aKz3Onv3UFjh1JcZas4naT_HR75vr1U8_xwmTsM-jUgdPwX831XjNReXwfzLAsRmtEthpQwJoqG1WBHa_4W5jfs7s/s1600/empty.gif" />Link 3</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipyCEwtaAgB-U8lZN1HmZ9Oa-YmBjVtlHjJtXtS2uxtBf_OJYu0u1aKz3Onv3UFjh1JcZas4naT_HR75vr1U8_xwmTsM-jUgdPwX831XjNReXwfzLAsRmtEthpQwJoqG1WBHa_4W5jfs7s/s1600/empty.gif" />Link 4</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipyCEwtaAgB-U8lZN1HmZ9Oa-YmBjVtlHjJtXtS2uxtBf_OJYu0u1aKz3Onv3UFjh1JcZas4naT_HR75vr1U8_xwmTsM-jUgdPwX831XjNReXwfzLAsRmtEthpQwJoqG1WBHa_4W5jfs7s/s1600/empty.gif" />Link 5</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sub" tabindex="1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjepRc9KSL8MeXAYuisSueyw9vZSv9p96MyTbRKcQNB9iottpL0el0cg3g4ChVRAUsUqK_ONt_BHqv-Xbx8FDB_elUxzuB9qNvp-OUplzAe3s1Ux-kcOkvJIXTE4Us-ANuZXF89AD02a6bd/s1600/arrow.png" />jQuery</a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipyCEwtaAgB-U8lZN1HmZ9Oa-YmBjVtlHjJtXtS2uxtBf_OJYu0u1aKz3Onv3UFjh1JcZas4naT_HR75vr1U8_xwmTsM-jUgdPwX831XjNReXwfzLAsRmtEthpQwJoqG1WBHa_4W5jfs7s/s1600/empty.gif" alt="" />
                    <ul>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipyCEwtaAgB-U8lZN1HmZ9Oa-YmBjVtlHjJtXtS2uxtBf_OJYu0u1aKz3Onv3UFjh1JcZas4naT_HR75vr1U8_xwmTsM-jUgdPwX831XjNReXwfzLAsRmtEthpQwJoqG1WBHa_4W5jfs7s/s1600/empty.gif" />Link 6</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipyCEwtaAgB-U8lZN1HmZ9Oa-YmBjVtlHjJtXtS2uxtBf_OJYu0u1aKz3Onv3UFjh1JcZas4naT_HR75vr1U8_xwmTsM-jUgdPwX831XjNReXwfzLAsRmtEthpQwJoqG1WBHa_4W5jfs7s/s1600/empty.gif" />Link 7</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipyCEwtaAgB-U8lZN1HmZ9Oa-YmBjVtlHjJtXtS2uxtBf_OJYu0u1aKz3Onv3UFjh1JcZas4naT_HR75vr1U8_xwmTsM-jUgdPwX831XjNReXwfzLAsRmtEthpQwJoqG1WBHa_4W5jfs7s/s1600/empty.gif" />Link 8</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipyCEwtaAgB-U8lZN1HmZ9Oa-YmBjVtlHjJtXtS2uxtBf_OJYu0u1aKz3Onv3UFjh1JcZas4naT_HR75vr1U8_xwmTsM-jUgdPwX831XjNReXwfzLAsRmtEthpQwJoqG1WBHa_4W5jfs7s/s1600/empty.gif" />Link 9</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipyCEwtaAgB-U8lZN1HmZ9Oa-YmBjVtlHjJtXtS2uxtBf_OJYu0u1aKz3Onv3UFjh1JcZas4naT_HR75vr1U8_xwmTsM-jUgdPwX831XjNReXwfzLAsRmtEthpQwJoqG1WBHa_4W5jfs7s/s1600/empty.gif" />Link 10</a></li>
                    </ul>
                </li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjepRc9KSL8MeXAYuisSueyw9vZSv9p96MyTbRKcQNB9iottpL0el0cg3g4ChVRAUsUqK_ONt_BHqv-Xbx8FDB_elUxzuB9qNvp-OUplzAe3s1Ux-kcOkvJIXTE4Us-ANuZXF89AD02a6bd/s1600/arrow.png" />PHP</a></li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjepRc9KSL8MeXAYuisSueyw9vZSv9p96MyTbRKcQNB9iottpL0el0cg3g4ChVRAUsUqK_ONt_BHqv-Xbx8FDB_elUxzuB9qNvp-OUplzAe3s1Ux-kcOkvJIXTE4Us-ANuZXF89AD02a6bd/s1600/arrow.png" />MySQL</a></li>
                <li><a href="http://www.bloggertrix.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjepRc9KSL8MeXAYuisSueyw9vZSv9p96MyTbRKcQNB9iottpL0el0cg3g4ChVRAUsUqK_ONt_BHqv-Xbx8FDB_elUxzuB9qNvp-OUplzAe3s1Ux-kcOkvJIXTE4Us-ANuZXF89AD02a6bd/s1600/arrow.png" />XSLT</a></li>
            </ul>

        </div>
Replace # with your links.

10. Now save your HTML/Javascript'.

    You are done...




Dont Miss Another Post Connect With Us

Get informed when we publish the new post.So, you have to subscribe below

3 comments:

  1. Hasbi HtcJanuary 16, 2013 at 4:29 AM

    Thanks for the tutorial very helpful to me that it still took sail and learn about css in my blogspot be a frequent visitor to this blog to see the next update

    ReplyDelete
  2. latest urdu hindi english poetry and sms collectionJanuary 16, 2013 at 8:58 PM

    hello sir thanks for sharing this information sir please tell me how can i create header in right side bar with blue color. i am waiting your reply

    ReplyDelete
  3. UnknownJanuary 16, 2013 at 9:33 PM

    An other menubar code. I think you only concentrate on css. But it is great.

    I have written an article on: Why Title Is So Important For A Blog

    ReplyDelete