DISCLAIMER:
This guideline/tutorial is referring to: Trick Blog: Create Vertical Menu. The below copied text is strictly from Trick Blog. Jeff & Tan is only providing improvements on the referred tips. We will highlight the part suggested by Jeff & Tan.
----------------------http://trick-blog.blogspot.com/--------------------------
We have learned how to createhorizontal menu before. Now we will try to make a vertical menu. We will make a vertical menu like the image. Ok let's do it1. Login to blogger then choose"Layout-->Edit HTML"
2. Put the script below before this code ]]></b:skin> or put it in CSS code area.
.glossymenu, .glossymenu li ul{
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 li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul 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%; }
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 li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul 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%; }
You can change the menu color, look at the red text (blue1.gif and blue2.gif). Change it with some color menu below. For example, if you want to choose red color, then the code would be like this :
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;
dan
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');
background-image: url('http://blog.superinhost.com/vertical/red.gif');
3. Save your template.
4. Then go to "Page Elements" menu
5. choose "Add a Gadget -->HTML/JavaScript" the insert the code below.
<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
</li>
</ul>
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
</li>
</ul>
Note :
- The red code is the links.
- The Blue code is anchor text.
- If you want to add menu, just copy the blink code and paste it.
6. Then click "Save"
-----------------http://trick-blog.blogspot.com/-------------------------------
The above tips is proved to be workable, but there are some parts Jeff & Tan found not functioning. Therefore, this tips is improved by Jeff & Tan through our trial & error.
Suggestion 1: Background Color
The color background link can be changed to the link provided below:
The link is to be replaced to these links in the above tutorial: http://blog.superinhost.com/vertical/blue1.gif
& http://blog.superinhost.com/vertical/blue2.gif. To get more colors, please visit: http://junxian926-20.blogspot.com/p/colors.html for more colors. Links can be obtained through clicking on the color that you want and then replace them accordingly. Colors that are not available can be requested by leaving comments in this post.
Suggestion 2: Removing Borders
You can remove the border if you feel that it is annoying or unwanted by putting a zero at the row of "border" instead of "1px solid black". By looking at the part to be changed, you actually can modify the thickness of the border too. Just change the figure besides the part "px solid black".
Suggestion 3: Changing Color of the Wordings in the Menu
If you wanna change the color of the words inside your menu, change this part:
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
color: white;
Change "color: white;" into "color: <your preferred color>;" eg. "color: black;", then you will get the color that you want.
Suggestion 4: Changing Font of the Wordings in the Menu
You can change the font of the words inside your menu by changing the following part:
bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
Change "font: bold 12px Verdana, Helvetica, sans-serif;" into "font: bold 12px <your preferred font>;" eg. "font: bold 12px Times New Roman, Helvetica, sans-serif;". Make sure you know the name of the font that you guys want. >.^ Looking at the part shown above, you actually can modify whether the words are to be bold, italic or underlined. Besides, you can also change the size of the words by changing the figure beside the "px".
After taking into account the following changes,
- Correcting the error relating to the background color of the menu to Turquoise;
- Removing the border of the menu; and
- Changing the font of the words inside the menu to Times New Roman.
the code is amended into as follows:
---------------------------------------------code------------------------------------------
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 0;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitRWxWHxIZQ65LiwC4WPRz4ZBOpByAWiSb0mnGJzD9wz-bB0OIrT23rI8XHYsa1DnW1-obUiWtZUmdXL3KWFEYdYSXaxVtSxzlo9_6v_Stp-rB52pn1byelnz4rACpkO6sxwsvrjhBiA/s1600/Turquoise.png') repeat-x bottom left;
font: bold 12px Times New Roman, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitRWxWHxIZQ65LiwC4WPRz4ZBOpByAWiSb0mnGJzD9wz-bB0OIrT23rI8XHYsa1DnW1-obUiWtZUmdXL3KWFEYdYSXaxVtSxzlo9_6v_Stp-rB52pn1byelnz4rACpkO6sxwsvrjhBiA/s1600/Turquoise.png');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 0;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitRWxWHxIZQ65LiwC4WPRz4ZBOpByAWiSb0mnGJzD9wz-bB0OIrT23rI8XHYsa1DnW1-obUiWtZUmdXL3KWFEYdYSXaxVtSxzlo9_6v_Stp-rB52pn1byelnz4rACpkO6sxwsvrjhBiA/s1600/Turquoise.png') repeat-x bottom left;
font: bold 12px Times New Roman, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitRWxWHxIZQ65LiwC4WPRz4ZBOpByAWiSb0mnGJzD9wz-bB0OIrT23rI8XHYsa1DnW1-obUiWtZUmdXL3KWFEYdYSXaxVtSxzlo9_6v_Stp-rB52pn1byelnz4rACpkO6sxwsvrjhBiA/s1600/Turquoise.png');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
-----------------------------------------------------code---------------------------------------------------
Now, we provide a little guide on setting the items in the menu:
Code as provided by Trick Blog:
-----------------------------------------http://trick-blog.blogspot.com/----------------------------------
<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
</li>
</ul>
-----------------------------------------http://trick-blog.blogspot.com/----------------------------------<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
</li>
</ul>
Try to notice an Italic row there. An item is included inside this "<li>", so if you wanna add new item into the menu, copy any line that is easy to be identified and just replace the URL in the code and the text to be displayed.
That's all for the guideline today. Do leave a comment under this post if you have any enquiry. We will reply you as soon as possible. Have a nice day. =)
Signed off by,
Jeffery
Signed off by,
Jeffery
