Create Vertical Menu (Vertical)

Vertical Menu is a menu in the or a vertical-shaped upright. Usually contain a link, such as Home, and so forth. Shaped like this:



If you want to make it, follow these steps:

1. Log in to Blogger and select Layout -> Edit HTML .
2. Find this code ]]></b:skin> or before the code </style>.

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

The note: the color blue. That you can select the color with the color that is available. If you want red, blue2.gif change the code so that it becomes red.gif be 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')

Color Options menu vertical:



blue1.gif

blue2.gif

green1.gif

green2.gif

red1.gif

red2.gif

pink1.gif

pink2.gif

black1.gif

black2.gif


3. Then save.
4. Go to Page Elements --> Add Gadget --> HTML/Javascript and enter the code to them:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://blogging-trick.blogspot.com">Trick Blogging</a></li>
<li><a href="http://www.google.com/adsense" >Google Adsense</a></li>
<li><a href="http://blogskins.com">Free Blog Template</a></li>
</li>
</ul>

Code green is the link, and the code blue is a wrapper link. If you want to add a menu to stay longer the same code as a blink.

5. Save.

Good Luck!

READ MORE - Create Vertical Menu (Vertical)

E-book HTML

Blogger to the beloved, respected, termakmur, thin, and fat in Indonesia. All of our crew Blogging Tips and Tricks (although only the original one) would like to share e-book about learning HTML LANGUAGE.


E-book entitled How To Build HTML this valued with prices ranging $ 3,000,000 with 100% discount! Lets download exhausted before the discount expired! I as owner of the e-book has not been seen in detail. But subbabnya following:


Basic HTML

Chapter 1: The Basics
Chapter 2: The Common Tags
Chapter 3: More Common Tags
Chapter 4: A little more tags
Chapter 5: Extended Fonts and Text Color
Chapter 6: Links and Images
Chapter 7: Lists, lists, lists
Chapter 8: Clean code, comments and escape codes
Chapter 9: Navigation within a document
Advanced HTML

Chapter 10: Tables
Chapter 11: Using Frames
Chapter 12: Using Meta Tags
Chapter 13: Forms
Chapter 14: Forms cont'd
Chapter 15: Forms cont'd
Chapter 16: Counters, Guestbooks and Search Engines
Chapter 17: Graphics
Chapter 18: HTML Style Basics


How? Interested? Please download here.

READ MORE - E-book HTML

Contact Us

I'm know, you will always have problem with your blog, and you will found error then you following tutorial in this blog. Maybe you found error on your template, or maybe you can't follow tutorial here with good. If you found error, you can contact us with send email to andreas.jrs@gmail.com, or type your questions at the comment box bellow. Thanks.

javascript:void(0)

READ MORE - Contact Us

Search Results

READ MORE - Search Results