1. Login to blogger, go to "Layout -> Edit HTML"2. Find the code </ head> and enter the following eighth before the code </ head>
<script src='http://blog.superinhost.com/vertical/verticalmenu.js' type='text/javascript'/>
3. Then find this code ]]></ b: skin> insert the following code before ]]></ b: skin> or before the code </ style>. Place in the line CSS code.
. Glossymenu,. Glossymenu ul li {
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; / * WIDTH OF MAIN MENU ITEMS * /
border: 1px solid black;
}
. Glossymenu li {
position: relative;
}
. Glossymenu li a {
background: white url ('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
. Glossymenu ul li {
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
. Glossymenu li ul li {
float: left;
}
. Glossymenu ul li a {
width: 180px;
}
. Glossymenu li a: visited,. Glossymenu li a: active {
color: white;
}
. Glossymenu li a: hover {
background-image: url ('http://blog.superinhost.com/vertical/blue2.gif');
}
* Html. Glossymenu li {float: left; height: 1%;}* Html. Glossymenu li a {height: 1%;}
To select the color menu, note the red codes (blue1.gif and blue2.gif). Replace the code with the color choices below. For example if you want to choose the color red menu then the code becomes like this:
. Glossymenu li a {
background: white url ('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;
and
. Glossymenu li a: hover {background-image: url ('http://blog.superinhost.com/vertical/red.gif');
Colors vertical menu:
blue1.gif
blue2.gif
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gifblack2.gif
4. Then in the save.
5. Then to menu "Page Elements"
6. Select "Add Page Elements -> HTML / JavaScript" then enter the following code into it:
<ul id="verticalmenu" class="glossymenu">
<a href="http://yusron-news.blogspot.com/"> Home </ a> </ li>
<a href="http://yusron-news.blogspot.com/">Health</ a> </ li>
<a href="http://yusron-news.blogspot.com/"> Free Templates </ a> </ li>
<a href="http://getebook.co.cc"> Free Ebook </ a> </ li>
</ Li>
</ Ul>
The color code green is the color blue link and who is the text displayed. If you want to add a menu to stay for longer code like that and so on.
Good luck!!!
0 comments
Post a Comment