Css Vertical Menu with hover effect for Blogger

Not all menus should be horizontal nor labels must be a cloud, a vertical menu also helps us keep our area tidy.

Links go to taste and need of every one if we have too many labels vertical menu is a colorful way to display them. Although, as usual is that our menu is simply a business card that will hold our mail, profile, portfolio.

And why not? to locate sites or in other words the essential and social networks.

I'm not saying that it is a new or spectacular but it's a very simple, simple menu that will add all in one gadget HTML and CSS,

It is a Nice vertical menu with hover effect you can add to Your blog.

You have to do it Just in some simple steps

go to your blogger dashboard >> Layout
Add a Gadget >> HTML/JavaScript
paste the below given code in that and Click save.

<style>#gpmenu{
background:#fff;
width:140px;
}
#gpmenu ul{
list-style:none;
}
#gpmenu li{
list-style:none;
margin:3px 0;
}
#gpmenu li a{
list-style:none;
background:#8faf39 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixbIJ0wkiiC6-7MtGh1qeQPIJJj7lhvZJqyNCvDt4Fbm54tDTnp0TFLAk_KLI2cQhNUc6Y9x2_3NajK514nXKDmMIVPjYz0shnZKwBABELePhKQ3UeGNi19Cx10ST6kdjsKqPh4jqgnFU/s1600/menu_033_bg.gif) no-repeat;
color:#fff;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
text-decoration:none;
display:block;
height:35px;
line-height:35px;
padding:0 0 0 20px;
}
#gpmenu li a:hover{
background:#da4a70 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpuaMSQGOOdTaMYc07JPlOOm5LJkYuAzKS19hcKhNemnNcL1qxxdulFpUuvxr-Zi6UX48EsfF0f9dRpb00EHg9N84xhLksyTFLGcxwdQkIGfc4H1pOlgR8SYNoNWVKZtbZ-HGqFZaLx7U/s1600/mytechblogging1.gif) no-repeat;
color:#fff;
text-decoration:none;
}
}</style>
<ul id="gpmenu">
<li>
<span>
<a href="Your-Link">Home
</a>
</span>
</li>
<li>
<span>
<a href="Your-Link">About
</a>
</span>
</li>
<li>
<span>
<a href="Your-Link">Contact
</a>
</span>
</li>
<li>
<span>
<a href="Your-Link">Feed</a>
</span>
</li>
</ul>

Note:

Replace Red Your-Link to your Desired Links and Red Text to your Desired page name, and you can also remove or add more tags.

Your Turn!

So, this was all about the Vertical Menu with hover effect. I am sure you have liked and understood this. If you have any questions or queries please use the comment box below.