Coloured CSS Vertical Menu For Blogger/Website

Posted by Lasantha Bandara on December 5th, 2009 File Under : css0 Comment

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

Coloured CSS Vertical Menu For Blogger/Website

<style type='text/css'>
#lbk-menu1 ul {
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}

#lbk-menu1 {
width: 200px;
margin: 10px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 5px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}

#lbk-menu1 li a {
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #000000;
}
#lbk-menu1 .notopbrdr0xNone {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

#lbk-menu1 li a:link, #lbk-menu1 li a:visited {
color: #000000;
display: block;
background-color: #FFFF00;
padding-top: 6px;
padding-right: 0;
padding-bottom: 6px;
padding-left: 10px;
}

#lbk-menu1 li a:hover {
color: #FFFFFF;
background: #000000;
padding-top: 6px;
padding-right: 0;
padding-bottom: 6px;
padding-left: 10px;
}

</style>

<!--[if IE]>
<style type="text/css" media="screen">
#lbk-menu1 ul,#lbk-menu1 ul li a{ height: 1%}
<![endif]-->

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id="lbk-menu1">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">Java Script</a></li>

<li><a href="#">Templates</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#" class="notopbrdr0xNone">Privacy Policy</a></li>

</ul>

</div>

You are done.

Demo

File Under : css

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.