Customized Stylish Vertical Menu widget For Blogger

Tweet

Vertical Menu For Blogger:

By default Blogger offers only Horizontal menu for Blogger. some time you need to have a menu in the sidebar too.

It may be some time because your menu is full at the Top or you want to stylish Your Blog. 

To navigate your users easily to the correct pages or posts. 

There are some posts or some pages which are most popular in your Blog. and you want to have easy way for the user to go to their desired post easily.
In the Sidebar when you have a menu so it look a little different and nice.

How To Add it To Blogger:

1.Go To your Blogger Template>Edit Html>procced and Ctrl+f and search for ]]></b:skin>   Paste the CSS code  just above ]]></b:skin>

    2.  Put HTML code in the Sidebar widget.
i.e. Add gadget then select Html/javaScript and paste the Below Html Code.


Css Code:

          #menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4uZzPq4CfC14eBFfFMSMggumUaJFVqwEu1DOu1Aj5EuzkhW2Wo5ZKlHGsVpZdjSrA89qdXmq2t_3Tl2JbsioZ6MCZaaBro0Gdtc7vDHWK_l1yU3TpKals1Mf1yPZrCuHC1M5vVncErPU/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4uZzPq4CfC14eBFfFMSMggumUaJFVqwEu1DOu1Aj5EuzkhW2Wo5ZKlHGsVpZdjSrA89qdXmq2t_3Tl2JbsioZ6MCZaaBro0Gdtc7vDHWK_l1yU3TpKals1Mf1yPZrCuHC1M5vVncErPU/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }

HTML Code:

            <div id="menu5">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="http://Trixking.com">How to Blog traffic</a></li>
</ul>
</div>

Customizing Menu:

Now you Done the Step 1 and 2.
Now get ready to customize it and edit it.
You do'nt need to edit/modify the Css code if you don't know much about Css.
You have to edit The Html Code.

The #1 refers to your first link, so paste your Link.
and the Link 1 refers to the text to be appears on the menu!
And So on.

Please Share it! :)