Ko-Vertical Menu bar for blogger blogs with CSS3

Without Menu bar it’s difficult to maintain a blog, Menu bar occupies vital space on blogs.
In the earlier posts on this blog discussed about various Horizontal menu bar with simple, stylish, hover effect, drop down menu, ect..
Now in this article BlogTariff educate you “How to Add stylish Sliding on mouse over and Hover effect Vertical Menu bar for blogs.
This Ko-Vertical Menu really helps in tracking visitors to browse more content on blogs.
Webmaster don’t need to work hard for adding this code for blogs its simple to add with out easiest tutorials helps without any difficult for spicing blog with Vertical Menu. Le’t s begin the tutorials for adding menu.

How to Add Ko-Vertical Menu for Blogger?

Sign into your blogger account
Click on “Template” link tab
Click on “Edit HTML” link tab and proceed
Search for code

]]></b:skin>

After finding code copy the below code and paste above to it

/* The CSS Code for the menu starts here blogtariff.com */

ul.kovertical{
width: 180px; /* width of menu */
overflow: auto;
background:white;/* background of menu */
margin: 0;
padding: 0;
padding-top: 7px; /* top padding */
list-style-type: none;
}

ul.kovertical li{
text-align: right; /* right align menu links */
}
ul.kovertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background:#35BEFF; /* initial background color of links */
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
margin-bottom: 7px; /* spacing between links */
color: black;
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-moz-transition: all 0.2s ease-in-out; /* CSS3 transition of hover properties */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul.kovertical li a:hover{
padding-right: 30px; /* add right padding to expand link horizontally to the left */
color: black;
background: #0B55F1;
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}
ul.kovertical li a:before{ /* CSS generated content: slanted right edge */
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-width: 70px 0 0 20px; /* Play around with 1st and 4th value to change slant degree */
border-color: transparent transparent transparent white; /* change black to match the background color of the menu UL */
}
/* The CSS Code for the menu ENDS here blogtariff.com */

• After successful pasting above code “Save Template”

Step Two:

Now Click on “Layout” link tab
Click on “HTML/Javascript” widget link
Copy the below code and paste in it

<ul class="kovertical">
<li><a href="http://www.blogtariff.com/">Blog Tariff</a></li>
<li><a href="http://www.blogtariff.com/">HTML Tricks</a></li>
<li><a href="http://www.blogtariff.com/">CSS Tricks</a></li>
<li><a href="http://www.blogtariff.com/">Hover Effects</a></li>
<li><a href="http://www.blogtariff.com/">Javascript Tips</a></li>
<li><a href="http://www.blogtariff.com/">Forums</a></li>
</ul>

Customization:-

• Replace ‘BlogTariff’ word with your Page URLs as high lighted in RED COLOR
• Replace ‘ULR Names’ with your URL names as highlighted in BLUE COLOR

After customization “Save the Widget”, now its ready to preview your menu bar.

Authors Note:

If you really enjoyed our article let’s know your views and suggestion via comments.
Don’t forget to subscribe to us, Like our Facebook page and following us via below links.
Thanks.