Add CSS Vertical Menu with Hover Effect to Blog/Wesbite

Lots of menus are available in vertical and horizontal format few of them are hover based and simple style.
In this tutorial after sharing number of menus on our blog now we bring you another wonderful stylish Vertical Menu with Hover Effect CSS coding.

This vertical menu widget is compatible with all browsers and very easy customizable, friendly to users blog/Wesbite.
Webmasters don’t need to work hard for adding this CSS vertical menu with Hover effect. Let’s begin tutorial for adding this menu.

DEMO

Browse More Related Posts

More News...
How to Install Stylish CSS Vertical Menu with Hover effect to blogger?
Sign into your blogger account
From blogger dashboard select ‘Template’ and proceed
Click on ‘Edit HTML’ link Tab and follow
Now search for tag

]]></b:skin>

After finding tag copy below code and paste above to it

 #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/AVvXsEgEkoxQhAjVmmjpch36-ocUgWGTUT1mnz7G3i8R1-eR-GgXLMdCzlAdXoRBCmu8VFVMGA63R6XmNRtzv-mThgl0zkaGGzS1cuxs6URPvJ_gP52XCVrfcu9X7RMOuOmkiGTb8a_2Hjpvxh4/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEkoxQhAjVmmjpch36-ocUgWGTUT1mnz7G3i8R1-eR-GgXLMdCzlAdXoRBCmu8VFVMGA63R6XmNRtzv-mThgl0zkaGGzS1cuxs6URPvJ_gP52XCVrfcu9X7RMOuOmkiGTb8a_2Hjpvxh4/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }

After successful pasting above code ‘Save Template’
Now Come back and Click on ‘Layout’ link tab
Click on ‘Add a Gadget’
Select ‘HTML/JavaScript’ link widget and copy below code paste in it

<div id="menu5">
<ul>
<li><a href="http://www.blogtariff.com/">Blogger Tricks</a></li>
<li><a href="http://www.blogtariff.com/">Blogging Tips</a></li>
<li><a href="http://www.blogtariff.com/">Stylish Widgets</a></li>
<li><a href="http://www.blogtariff.com/">SEO Tips</a></li>
<li><a href="http://www.blogtariff.com/">Templates</a></li>
</ul>
</div>

Code Customization:

• Replace www.blogtariff.com with your Posts or Page Link
• Replace BloggerTricks, BloggingTips, Stylish Widgets, SEO Tips, Templates with your Posts or Category Title

After successful modifying above links, names ‘Save Widget and Template’
That’s done and preview experiment.