How To Add Cool Vertical Drop Down Menu For Blogger

Horizontal bar is most important part of blogger.
But, vertical bar also really helpful when we need
to add some menu link on side bar.So, in this
tutorial im going to explain, how to add drop down
clever bar to blogger.Earlier i posted about more
vertical bars with different styles.
Vertical bar Style 1
Vertical bar Style 2
Vertical bar Style 3
Vertical bar Style 4
Vertical bar Style 5
You can follow this easy steps to add it to
your blog.

1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Paste below code.

<style>
/*By Bloggertrix ========= */
.ddsmoothmenu-v ul {
    margin: 0;
    padding: 0;
    width: 250px;
 /* Main Menu Item widths */
    list-style-type: none;
    font: bold 12px Verdana;
    border-bottom: 0px solid #ccc;}
.ddsmoothmenu-v ul li {
    position: relative;}
.downarrowclass {
    position: absolute;
    top: 12px;
    right: 7px;}
.rightarrowclass {
    position: absolute;
    top: 10px;
    right: 5px;
}
    /* Top level menu links style */
.ddsmoothmenu-v ul li a {
    display: block;
    overflow: auto;
        /*force hasLayout in IE7 */
    height: 32px;
    color: white;
    text-decoration: none;
    padding: 5px 5px 5px 25px;
    border-bottom: 0px solid #778;
    border-right: 0px solid #778;}
.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active {
    color: white;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd1NfWaEzdmrRnxvh8NmQGyoZod3H4dfJOq3GLnqbMk6KiNH2qC7Thyphenhyphen7BIpUmDHmkeSDjt9qgFmAZjTQaARn1LckfXl8XzSBXkKdtgnRlj0OePcZj6Ot3_zDziduFysvYotutbhWGR1XU/s1600/tab_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;
    margin-bottom: 1px;}
.ddsmoothmenu-v ul li a.selected {
        /*CSS class that's dynamically added to the currently active menu items' LI A element*/
    color: white;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRoDDCFtDNUD5fjEHtN-CliLvCBniwobgddoLtugxZLY224MDs2AIA5sm1Y0DNFGyAhWy1hQwu_V5pYkR_ZHR6RaumbhHRrf8X3nVDhCLf5zUbZmB2y8e_PzOIjd0Vw1EOzl7xkwVloxE/s1600/tabhover_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;}
.ddsmoothmenu-v ul li a:hover {
    color: white;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRoDDCFtDNUD5fjEHtN-CliLvCBniwobgddoLtugxZLY224MDs2AIA5sm1Y0DNFGyAhWy1hQwu_V5pYkR_ZHR6RaumbhHRrf8X3nVDhCLf5zUbZmB2y8e_PzOIjd0Vw1EOzl7xkwVloxE/s1600/tabhover_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;
}   /*Sub level menu items */
.ddsmoothmenu-v ul li ul {
    position: absolute;
    width: 170px;
        /*Sub Menu Items width */
    height: 22px;
    top: 0;
    font-weight: normal;
    visibility: hidden;
}
    /* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li {
    float: left;
    height: 1%;
}* html .ddsmoothmenu-v ul li a {
    height: 1%;
}
/*======= Vertical Drop Down Menu By Helper Blogger ========= */
</style>
<script src="http://bloggertrix.googlecode.com/files/jquery.js" type="text/javascript">
</script>
<script src="http://bloggertrix.googlecode.com/files/menubar.js" type="text/javascript">
</script>
<script type="text/javascript">
    })
</script>
<script type="text/javascript">
    ddsmoothmenu.init({

        mainmenuid: "smoothmenu2",
        //Menu DIV id
        orientation: 'v',
        //Horizontal or vertical menu: Set to "h" or "v"
        classname: 'ddsmoothmenu-v',
        //class added to menu's outer DIV

        //customtheme: ["#804000", "#482400"],
        contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })
</script>
<div class="ddsmoothmenu-v" id="smoothmenu2">
<ul>
<li>
<a href="http://www.bloggertrix.com/">Home</a>
</li>
<li>
<a href="#">Download</a>
<ul>
<li>
<a href="#">Sub Item 1.1</a>
</li>
<li>
<a href="#">Sub Item 1.2</a>
</li>
</ul>
</li>
<li>
<a href="#">Cart</a>
<ul>
<li>
<a href="#">Sub Item 1.1</a>
</li>
<li>
<a href="#">Sub Item 1.2</a>
</li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
</li>
<li>
<a href="#">About</a>
<ul>
<li>
<a href="#">Sub Item 2.1</a>
</li>
</ul>
</li>
<li>
<a href="http://www.bloggertrix.com/">Add This</a>
</li>
</ul></div>

Replace # with your Links
Replace Links name with your any name.

4. Now save your HTML/Javascript'.

    You are done...