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.
Browse More Related Posts
- How to create/convert a Drop Down Menu for Blogger Label list Categories?
As everyone aware about Blogger label gadget/widget is a default sidebar... - Add CSS Vertical Menu with Hover Effect to Blog/Wesbite
Lots of menus are available in vertical and horizontal format few of them... - Add Animated Hover Box Menu to attract readers and increase page views
First appearance makes visitors/readers to view more articles and stick to... - Stylish Round Corner Dropdown Menu for Blog/Website with CSS3 effect
Many of you aware about CSS3 effect menu styles, in this tutorial we... - Ko-Vertical Menu bar for blogger blogs with CSS3
Without Menu bar it’s difficult to maintain a blog, Menu bar occupies vital... - Yummy Horizontal Menu for Blogger with hover effect
In the earlier posts here discussed about various type of menus in vertical... - How to add Stylish Horizontal Drop down Menu for Blogs?
Whenever visitor/readers land on any blog/website they browse for more...
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.
Post a Comment Gmail ID Facebook
Do not Try to Add Spam Comments
EmoticonClick to see the code!
To insert emoticon you must added at least one space before the code.