Guideline: Create Vertical Menu

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,

1. Correcting the error relating to the background color of the menu to Turquoise;
2. Removing the border of the menu; and
3. 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

Guideline: Placement on Nuffnang Ads Unit on Your Blog

Guideline: Placement on Nuffnang Ads Unit on Your Blog


Language of Guideline: Bi-language (English & Mandarin)

Bloggers who have just registered themselves with Nuffnang, you yourself are called Nuffnangers. =)

剛與Nuffnang申請為會員的博客們，你們有一個通用稱呼，叫Nuffnangers。

Disclaimer: We are not acting on behalf on Nuffnang to provide these guidelines on the internet and our guideline provided is solely based on our experience and with the aid of instructions posted on Nuffnang.com. Although the below guideline has been tested and proved to be work, we disclaim 100% accuracy on the guideline as every computer has its own situation. We welcome any feedback from you, in any form available to you.

First of all, there are 3 types of ads units that are available for all bloggers to place in different parts of their blog. There are Header (Leaderboard), Sidebar (Skyscrapper) & Between contents (Large Rectangle).

首先，那裡有三種不同的廣告單位提供給所有博客以便放在你們部落格裡不同的位置上。那三種廣告單位是：Header (Leaderboard), Sidebar (Skyscrapper) & Between contents (Large Rectangle)。

     Please do ensure that you've added your blog address in Blog Manager first.
     請確保你先在Blog Manager註冊你的部落格。

Step 1: / 步驟一: Login to Blogger & Go to "Design" / 登錄Blogger及前進“Design”


First step to start placing your ads units. Login to your Blogger account and click on the "Design" button in your dashboard. You will be in your dashboard just after you've logged into your account.

第一個步驟就是先登錄自己的Blogger戶口然後在儀表板或者是dashboard裡按設計或者是"Design"這個扭。當你一登錄你的戶口，你就會在你戶口的儀表板了。

Step 1: Login to Blogger Account & Go to Design

Steps 2 to 4 are for Header (Leaderboard) & Between contents (Large Rectangle).
步驟二至步驟四是用於Header (Leaderboard) & Between contents (Large Rectangle)。




Step 2: / 步驟二: Go to "Edit HTML" and Tick "Expand Widget Templates" / 前進“Edit HTML”及將"Expand Widget Templates"旁的格子打勾


Under the "Design" tab, click on "Edit HTML" and when it comes to "Edit HTML" tick the box beside the "Expand Widget Templates".

在"Design"之下，按"Edit HTML"然後把"Expand Widget Template"旁的格子給打勾。

Step 2: Tick Expand Widget Template

Step 3: / 步驟三: Adding Leaderboard Unit / 加入Leaderboard單位

Click "Ctrl+F" and type "<body" to get to the line highlighted in the diagram. Insert the code provided from Nuffnang after the highlighted line as shown in the diagram.

在界面按"Ctrl+F"然後輸入"<body"以便尋到畫面裡的那行字。過後把編碼置入在那行字以後。

Step 3: Adding Leaderboard Unit

Step 4: / 步驟四: Adding Large Rectangle Unit / 加入Large Rectangle單位

Find "post-footer-line-2" in HTML template editor by using "Ctrl+F" and look for </b:includable> element nearby to insert the ads code provided above it.

在HTML編輯框格裡，運用"Ctrl+F"來尋找"post-footer-line-2"。然後尋找附近的</b:includable>元素以便將廣告編碼置入</b:includable>之上。

Step 4.1: Find the line "post-footer-line-2" using "Ctrl+F"

Step 4.2: Look for </b:includable> & Insert the ads code.

Step 5: / 步驟五: Adding Skyscrapper Unit / 加入Skyscrapper單位


It's easier to add Skyscrapper compared to the other two. Click on the "Page Elements" in "Design". Click on the "Add a Gadget", then "HTML/Java Script". After you've clicked on "HTML/Java Script", paste the ads code for Skyscrapper unit in the content area. You can give whatever name to the gadget name in the title column. =)

比起其他兩個，Skyscrapper單位是比較容易添加。在"Design"界面裡按"Page Elements"，然後再按"Add a Gadget"。過後尋找"HTML/Java Script"來添加。按了"HTML/Java Script"，把所提供的編碼置入內容框格內。你可以在題目框格內添加任何名字於那個廣告編碼。=)

Step 5.1: Go to Page Elements and adding a gadget

Step 5.2: Click on HTML/Java Script

Step 5.3: Adding the ads code for Skyscrapper

And that's it. It's done! ^^ You can check out your blog for the advertisements unit placement. If there are advertisements available at the moment, it will appear in your blog, or else, the area will only show Nuffnang Logo.

就這樣完成啦!^^ 你可以立刻查看你部落格裡廣告的位置。如果目前有任何廣告分配於你，你部落格裡的廣告單位才會出現該廣告。不然，那些位置只會顯示Nuffnang標誌。

Signed off by,
Jeffrey