How To Create Vertical Menu In Blogger Templates ?

You have had blog for product promotion or you want to show your labels or post in vertical menus in sidebar of your blog. You may customize...

You have had blog for product promotion or you want to show your labels or post in vertical menus in sidebar of your blog. You may customize the look and feel of blogger template for Vertical Menu Bar. Learn How To ?

I have found this tricks on Trick Blog. He has presented it in most beautiful way with clear understanding.Follow the following steps for your blog :

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.


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. Click "Save" Any Problem Just Ping Me !!!



Blogger Updates On Mail

COMMENTS

Name

3G,9,4G,9,ADSENSE,3,aircel,4,airtel,16,Android,8,Announcements,1,Apple,12,Asus,2,BHIM,1,Blackberry,11,Blogger Hacks,10,Blogger Templates,56,broadband plan,7,Browser,8,BSNL,13,Computer Games,6,Coupon Code,1,Customer Support,32,D2H,1,Data Plan,25,Dell,1,Digital Banking,2,Do Not Call,7,Downloads,31,DTH,8,Electronic Items,8,facebook,12,featured,1,free antivirus,7,Gadget News,7,google news,21,google Tips,10,GPS,5,Hacks And Tricks,7,HCL Laptop,1,Hitachi,1,howto,8,HP,2,HTC,5,Idea,5,Internet,7,Intex,1,iPhone,25,iPhone Price List,1,Kerala,2,Laptop,24,LAVA,7,Lenovo,3,LG,6,micromax,1,Microsoft,1,Miscellaneous,174,MNP Change,1,mobile Applications,8,Mobile Number Portability,3,Mobile Phone Price,29,Mobile Phone Review,124,mobile tariff plan,63,Mobile Unlocking Code,1,Mobile Wallet,2,motorola,12,MS Office,1,MTNL,1,Nokia,30,Offbeat News,1,Orkut,1,Paypal,1,PayTm,1,phone,4,Price List,2,reliance communication,4,Reliance Communications,2,Reliance Jio,25,Resources,1,samsung,9,Samsung Mobile Price List,1,SEO,2,skype,2,social media,1,software,4,Sony Ericsson,2,Sony Phone Price List,1,spice,2,Tablet,1,tata DOCOCMO,4,Tata Indicom,3,TATA Sky,1,Tech Define,2,Tech News,474,toshiba,1,twitter,1,Uninor,1,Upcoming Products,3,UPI,1,USSD Codes,9,Verizon,1,videocon,2,Vodafone,6,vodaofne,4,Web Hosting,6,Whats App,3,Windows,22,Wordpress,2,Wordpress Pluging,1,Xbox,1,Xiaomi,3,YouTube Hacks,5,
ltr
item
YourDataPlan - Telecom Updates & News - Jio, 4G,3G,LTE, Mobiles Data Plan: How To Create Vertical Menu In Blogger Templates ?
How To Create Vertical Menu In Blogger Templates ?
http://blog.superinhost.com/vertical/blueprev.gif
YourDataPlan - Telecom Updates & News - Jio, 4G,3G,LTE, Mobiles Data Plan
http://www.getfreedataplan.com/2008/11/how-to-create-vertical-menu-in-blogger_7857.html
http://www.getfreedataplan.com/
http://www.getfreedataplan.com/
http://www.getfreedataplan.com/2008/11/how-to-create-vertical-menu-in-blogger_7857.html
true
4333792579372704303
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy