Jeff & Tan: February 2011

Guideline: Create Vertical Menu

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 it

1. 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%; }

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;

dan

.glossymenu li a:hover{
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><a href="http://getebook.co.cc">Free Ebook</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:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitRWxWHxIZQ65LiwC4WPRz4ZBOpByAWiSb0mnGJzD9wz-bB0OIrT23rI8XHYsa1DnW1-obUiWtZUmdXL3KWFEYdYSXaxVtSxzlo9_6v_Stp-rB52pn1byelnz4rACpkO6sxwsvrjhBiA/s1600/Turquoise.png

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;

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;

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%; }

-----------------------------------------------------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><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

-----------------------------------------http://trick-blog.blogspot.com/----------------------------------

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

Review: I Love Hong Kong [Cantonese] (U)

Category: Movie
Genre: Comedy
Duration: 101 mins
Watched at: MBO @ Tanjung Village Manjalara Tesco
Timing: 4.40 p.m.

Rating: 4.25 / 5.00

Overall

*I LOVE HONG KONG* POSTER

It's from the producer of 72 Tenants of Prosperity, if you guys do remember which movie is this. =) This movie, I Love Hong Kong is meant to be a comedy, thus, we expect the quality of the jokes to be high. You will not feel like being in the box for that long (1 hour and 41 minutes) as this movie is really a funny one. How funny it is? Hmmm, I can't use any words to describe this for the time being as it is super-duper funny to me. There are a few scenes that are so funny and that I can't help stop laughing at. You will know the feel when you watch it. For example, the part where Tony Leung was so unfortunate that he went into the "Dinosaur" twin sister's house at night just to avoid the misunderstanding between him and his wife. You will laugh at his unfortunate as the twin sister is so horrible. Hoho!

Young Tony Leung, Bosco Wong encountering with the Young Beauty Twin Sister (who turned into "Dinosaur" older)

Other sub-themes

You can't say it's only meant for comedy, as there're other sub-themes present in the movie. Which theme did u notice after watching the movie? Family? Love & Relationship? Justice? I'll elaborate some in here.

Bosco (Young Tong Leung) & Wong Cho Lam (Young Eric Tsang)

The whole group of the artistes singing together in the end

FAMILY: You can find this from the interactions between Tony Leung and Sandra Ng as they are the one who showed the message of how important a family member is in the movie. Sandra Ng supported his husband in the market and helped him to market the leftover toys that he had after the wind up of his toy factory.

Tony Leung & Sandra Ng

JUSTICE: It's just all about the scene where Aarif Lee helped Fala Chen's father to speak to the police officer, telling the reasoning behind to let them go. It's so true that I also agree. Those police (don't think they are police, maybe DBKL) should be considerate but not work to meet the quota.

Aarif Lee & Fala Chen

I believe this will be a great movie for all and a movie that everyone will enjoy watching. Any feedback or comment, you guys can just leave your comment here or our facebook page. Have a nice day. =)