How To Add CSS Vertical Menu To Blogger Template

This is a CSS technique that could be useful if you want to give users accessible added content such as tool-tips, notifications, or alerts, without adding unnecessary clutter to your page. And since it doesn’t rely of JavaScript, it should be useful to everyone, even disabled users. This Widget is Simple, Supercool And The Main Part is that It Doesn’t Needs Any jQuery or JavaScript. It uses no images at all and loads extremely fast.

Vertical css menu

Finding The Menu Class And ID

In CSS every HTML tag is styled using either a class that starts with a dot(.) or an ID that starts with a hash (#). The only difference between a class and ID is that a class can be used multiple times but an ID can be used only once.

Note: You don’t need to learn Code structure just give it a quick view to understand the basics. Your job is to look at your Menu code inside your blog or website and find out its class name. This is all you need to do. Your Menu will consist of two parts i.e CSS (stylesheet) and HTML. Since we are designing a Menu so its structure would look slightly similar to this one:

How To Install It On Blogger?

  1. Log in to your dashboard–> Design- -> Edit HTML
  2. Click on “Expand Widget Templates”
  3. Search “Ctrl+F” and find ]]></b:skin>.Right before it paste the next code:

<style type=”text/css”>

width: 190px; /*width of menu*/

.mbw_menu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url( no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/

.mbw_menu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/

.mbw_menu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/

.mbw_menu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;

.mbw_menu ul li a:visited{
color: black;

.mbw_menu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;


  1. Now go to Layout–>Page Element and click on “Add a gadget”.

Select “html/java script” and add the code given below and click save.

<div class=”mbw_menu”><h3 class=”headerbar”>CSS Menu</h3><ul><li><a href=”#”>Horizontal CSS Menus</a></li><li><a href=”#”>Vertical CSS Menus</a></li><li><a href=”#”>Image CSS</a></li><li><a href=”#”>Form CSS</a></li><li><a href=”#”>DIVs and containers</a></li><li><a href=”#”>Links & Buttons</a></li><li><a href=”#”>Other</a></li><li><a href=”#>Free JavaScripts</a></li></ul> </div>

If you get any problem in Installing then please leave comment Below.

Leave a Comment