Create Vertical Menu

We have learned how to create horizontal 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');

Vertical Menu Color :

	blue1.gif blue2.gif
	green1.gif green2.gif
	red1.gif red2.gif
	pink1.gif pink2.gif
	black1.gif black2.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"

Create Vertical Menu

We have learned how to create horizontal 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');

Vertical Menu Color :

	blue1.gif blue2.gif
	green1.gif green2.gif
	red1.gif red2.gif
	pink1.gif pink2.gif
	black1.gif black2.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"

Create Tab View

Tab View is very usefull box. We can fill it with many contain. It will save our blogs area. (See Image Below)


Here is Tutorial how to create a tab view:

1. Login to blogger, go to "Layout --> Edit HTML"
2. Then find this code ]]></b:skin>
3. Insert the below code before ]]></b:skin> or in CSS tag.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width top main menu */
text-align: center;
height: 24px; /* Height top main menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Main menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Top main menu font */
font-weight: 900;
color: #000; /* Top main menu font color */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Top main menu background color */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Content Border color */
overflow: hidden;
background-color: #FF9900; /* Content background color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. You can change the code according to the red text explanation. To get html color code see HERE
5. The next step is put the code below before </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Then "save" it.
7. Go to "Page Elements" menu
8. Chose "Add Page Element" --> "HTML/Javascript" in place where you want to put this tab.
9. Insert this code :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Note :
- The number or the blue text(350px) Is size of the tabview.
- The green code is the main menu text
- The red code is the content of tabview. you can fill it with links, banner, widget, comment or anything.
- To add more menu, see on the blink code. Add the code under it.

Good luck every body.

Create Tab View

Tab View is very usefull box. We can fill it with many contain. It will save our blogs area. (See Image Below)


Here is Tutorial how to create a tab view:

1. Login to blogger, go to "Layout --> Edit HTML"
2. Then find this code ]]></b:skin>
3. Insert the below code before ]]></b:skin> or in CSS tag.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width top main menu */
text-align: center;
height: 24px; /* Height top main menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Main menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Top main menu font */
font-weight: 900;
color: #000; /* Top main menu font color */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Top main menu background color */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Content Border color */
overflow: hidden;
background-color: #FF9900; /* Content background color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. You can change the code according to the red text explanation. To get html color code see HERE
5. The next step is put the code below before </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Then "save" it.
7. Go to "Page Elements" menu
8. Chose "Add Page Element" --> "HTML/Javascript" in place where you want to put this tab.
9. Insert this code :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Note :
- The number or the blue text(350px) Is size of the tabview.
- The green code is the main menu text
- The red code is the content of tabview. you can fill it with links, banner, widget, comment or anything.
- To add more menu, see on the blink code. Add the code under it.

Good luck every body.

How to Create Dropdown Menu

What is dropdown menu?
Dropdown menu is like this :

Blog Archive How To Create Dtree Menu How to Create Search Engine

Here is the trick how to create dropdown menu :

Copy the code below and put it on your page elements.


<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Blog Archive</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

The red text is links, change it with your links.
The blue text is Anchor text. Yau must change it.

For example :


<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Blog Archive</option>
<option value="http://trick-blog.blogspot.com/2008/02/tutorial-to-create-dtree-menu.htmll"> How to Create Dtree Menul </option>
<option value="http://trick-blog.blogspot.com/2008/01/how-to-create-search-engine-in-blogger.html"> How to Create Search Engine </option>
</select>

The result would be like this:

Blog Archive How to Create Dtree Menu How to Create Search Engine

To add more menu/item, put a code like below

<option value="Links 3">Text 3</option>

before this code </select>

If you want the links opened in new window, change the code below

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

with this code ::

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

The resul would be like this:

Dropdown New Window How to Create Dtree Menul How to Create Search Engine

How to Create Dropdown Menu

What is dropdown menu?
Dropdown menu is like this :

Blog Archive How To Create Dtree Menu How to Create Search Engine

Here is the trick how to create dropdown menu :

Copy the code below and put it on your page elements.


<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Blog Archive</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

The red text is links, change it with your links.
The blue text is Anchor text. Yau must change it.

For example :


<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Blog Archive</option>
<option value="http://trick-blog.blogspot.com/2008/02/tutorial-to-create-dtree-menu.htmll"> How to Create Dtree Menul </option>
<option value="http://trick-blog.blogspot.com/2008/01/how-to-create-search-engine-in-blogger.html"> How to Create Search Engine </option>
</select>

The result would be like this:

Blog Archive How to Create Dtree Menu How to Create Search Engine

To add more menu/item, put a code like below

<option value="Links 3">Text 3</option>

before this code </select>

If you want the links opened in new window, change the code below

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

with this code ::

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

The resul would be like this:

Dropdown New Window How to Create Dtree Menul How to Create Search Engine

Tutorial to Create DTree Menu

DTree is a menu that be arranged like a tree. It will be like menu when you open "windows Explorer". It's very usefull if you have many posting (articel) in your blog. It can contain many link in small space. It will be like the below image :



Here's the step by step tutorial to create "DTree Menu" in blogger:

1. Login to Blogger, go to "Layout --> Edit HTML"
2. Put the code below over <head>

<link rel="StyleSheet" href="http://blogoholic.info/files/dtree/dtree.css" type="text/css" />
<script type="text/javascript" src="http://blogoholic.info/files/dtree/dtree.js"></script>

3. Save your editting.

4. Now edit end copy the below code then put on your sidebar.

<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->
</script>
</div>

Change "link.html" with your own link.
The first number must be unique (d.add(1,0,'Node 1','link.html');
The second number is child of the number (look at the color).

You can add the below code to add a new node with your own image

d.add(10,0,'Profile','link.html','','','http://blogoholic.info/files/dtree/trash.gif');

change "http://blogoholic.info/files/dtree/trash.gif" with your own image.
it will be like this :

Tutorial to Create DTree Menu

DTree is a menu that be arranged like a tree. It will be like menu when you open "windows Explorer". It's very usefull if you have many posting (articel) in your blog. It can contain many link in small space. It will be like the below image :



Here's the step by step tutorial to create "DTree Menu" in blogger:

1. Login to Blogger, go to "Layout --> Edit HTML"
2. Put the code below over <head>

<link rel="StyleSheet" href="http://blogoholic.info/files/dtree/dtree.css" type="text/css" />
<script type="text/javascript" src="http://blogoholic.info/files/dtree/dtree.js"></script>

3. Save your editting.

4. Now edit end copy the below code then put on your sidebar.

<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->
</script>
</div>

Change "link.html" with your own link.
The first number must be unique (d.add(1,0,'Node 1','link.html');
The second number is child of the number (look at the color).

You can add the below code to add a new node with your own image

d.add(10,0,'Profile','link.html','','','http://blogoholic.info/files/dtree/trash.gif');

change "http://blogoholic.info/files/dtree/trash.gif" with your own image.
it will be like this :

How to Create Horizontal Tabs Menu

What is horizontal tabs menu? horizontal tabs menu is bla..bla..bla... I can't explain anymore, he..he., it's look like this:



To create it is not as simple as it's look, it's complicated. You have to design button, you have to create CSS and HTML code. Now I will show you how to create "Horizontal tabs menu" in blogger.


The first thing you have to di is create an image like this:

and

If you can't to create it, you can use my below images:

blackleft.gif	blackright.gif
greenleft.gif	greenright.gif
redleft.gif	redright.gif
unguleft.gif	unguright.gif
yellowleft.gif	yellowright.gif
blueleft.gif	blueright.gif
whiteleft.gif	whiteright.gif

Ok, let's begin

1. Login to Blogger, chose "Lay out --> Template --> Edit HTML"
2. Don't forget to backup your template first.
3. Check the "Expand Widget Templates" checkbox.
4. Try to find this code ]]></b:skin>, if you found it then put the code below above it

/*credits : http://trick-blog.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /*Under Line, you can change or delete it */
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /* Menu position*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("http://blogoholic.info/files/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("http://blogoholic.info/files/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E; /*Text menu color*/
}
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

you can change the bold text with other image, for example, if you want to chose my red menu image the code will be like this:

background:url("http://blogoholic.info/files/menu/redleft.gif") no-repeat left top;

background:url("http://blogoholic.info/files/menu/redright.gif") no-repeat right top;

5. Then copy the code below

<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href="http://trick-blog.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Blog Dictionary</span></a></li>
<li><a href="http:/trick-blog.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

change http://trik-tips.blogspot.com with your own link, and change the bold text with your own text.

6. Next step is to put the tabs menu into your blog, this more difficult because we have different templates. There are some methods to do this, Here is the methods, you can chose and try for any methods.

- methode A:
Find this code :<div id="content-wrapper">. if you found it, paste the above code (code number five) above it. Preview your template, if it looks good save your editting, but if it's not good try to put above this code </div>, you will find many codes like that, try to put the code above it and preview your your blog, do it more often until it's suitable for your template.

If you have nice with your menu position, is unnecessary to do methode B, but if you feel difficult to apply methode A you can try methode B
- methode B:
Find the below code :

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

change the green text so that to become like this:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

Save your setting, the go to "Page Elements" and click "Add page Element " on the header area, chose "HTML/JavaScript" then put the number five code above into "content" box, then click "save" and preview your new blog.

How to Create Horizontal Tabs Menu

What is horizontal tabs menu? horizontal tabs menu is bla..bla..bla... I can't explain anymore, he..he., it's look like this:



To create it is not as simple as it's look, it's complicated. You have to design button, you have to create CSS and HTML code. Now I will show you how to create "Horizontal tabs menu" in blogger.


The first thing you have to di is create an image like this:

and

If you can't to create it, you can use my below images:

blackleft.gif	blackright.gif
greenleft.gif	greenright.gif
redleft.gif	redright.gif
unguleft.gif	unguright.gif
yellowleft.gif	yellowright.gif
blueleft.gif	blueright.gif
whiteleft.gif	whiteright.gif

Ok, let's begin

1. Login to Blogger, chose "Lay out --> Template --> Edit HTML"
2. Don't forget to backup your template first.
3. Check the "Expand Widget Templates" checkbox.
4. Try to find this code ]]></b:skin>, if you found it then put the code below above it

/*credits : http://trick-blog.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /*Under Line, you can change or delete it */
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /* Menu position*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("http://blogoholic.info/files/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("http://blogoholic.info/files/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E; /*Text menu color*/
}
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

you can change the bold text with other image, for example, if you want to chose my red menu image the code will be like this:

background:url("http://blogoholic.info/files/menu/redleft.gif") no-repeat left top;

background:url("http://blogoholic.info/files/menu/redright.gif") no-repeat right top;

5. Then copy the code below

<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href="http://trick-blog.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Blog Dictionary</span></a></li>
<li><a href="http:/trick-blog.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

change http://trik-tips.blogspot.com with your own link, and change the bold text with your own text.

6. Next step is to put the tabs menu into your blog, this more difficult because we have different templates. There are some methods to do this, Here is the methods, you can chose and try for any methods.

- methode A:
Find this code :<div id="content-wrapper">. if you found it, paste the above code (code number five) above it. Preview your template, if it looks good save your editting, but if it's not good try to put above this code </div>, you will find many codes like that, try to put the code above it and preview your your blog, do it more often until it's suitable for your template.

If you have nice with your menu position, is unnecessary to do methode B, but if you feel difficult to apply methode A you can try methode B
- methode B:
Find the below code :

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

change the green text so that to become like this:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

Save your setting, the go to "Page Elements" and click "Add page Element " on the header area, chose "HTML/JavaScript" then put the number five code above into "content" box, then click "save" and preview your new blog.