Vertical Navigation Menus For Blogger with CSS and HTML Tab Menus

beautiful collection of some of the best looking vertical navigation menus that will put soul to anyone’s weblog or website! I have modified the codes made by Christopher and Highdots and have made them compatible with Blogger. I hope this collection will be of interest to most of you simply because these navigation menu tabs can easily be installed, customized and multiplied! I hope it will be of great help to new designers :>

How To Add A Vertical Navigation CSS Menu To Blogger?

Well the process is as simply as it can be. Simply follow these steps carefully,

1. Go To Blogger > Layout > Edit HTML
2. Back-up your template

All Navigation Menus below uses two pieces of codes. One is The CSS code which is responsible for the look and feel of the menus and the second is the HTML code which is responsible for positioning the menus. So lets know where to add each code!

    3.   Paste the CSS code for your selected Menu just above ]]></b:skin>

    4.   For the HTML code there can be two positions either your right sidebar or left sidebar. Depends how many columns you have.

• If you have a right sidebar then paste the HTML code just below <div id='sidebar-wrapper'>  or this <div id='sidebar-wrapper-right'>
• If you have a left sidebar then paste the HTML code just below <div id='sidebar-wrapper-left'>

Note:- Since most templates use different coding therefore if you could not find the above codes then don’t worry simply share your blog URL in the comment box and I will view your template coding and will tell you instantly which code to search for!

    5.    Finally save your template and see a beautiful Navigation Menu hanging on your sidebar :D

Editing The Links In The Navigation Menu

To change the Tab Menu Links and Titles, simply edit this bolded part of the HTML code,

<li><a href="#1" >Link 1</a></li> 
<li><a href="#2" >Link 2</a></li> 
<li><a href="#3" >Link 3</a></li> 
<li><a href="#4" >Link 4</a></li> 
<li><a href="#5" >Link5</a></li>

Replace #1, #2, #3 etc with your Page Links/URL and replace Link1, Link2, Link3 etc with your Page Titles. If you wish to add or delete a tab then simply add or delete this line from the HTML code,

<li><a href="#" >Link</a></li>

Live Demo

Navigation Menu #1

 

CSS CODE:

#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFOP96BbcceEd_0sSyCs-YDHshtNch5nQtrcNRgQ-xRuJF29O6HCOa2HkWSrpUBEWCI8zI6_tTiRp1AOXmnJyVDj5CTrtA1RSvgGoWrzCfixpjiJVtLJgwTAormhZyA2bnxgwGkCTpp3c/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFOP96BbcceEd_0sSyCs-YDHshtNch5nQtrcNRgQ-xRuJF29O6HCOa2HkWSrpUBEWCI8zI6_tTiRp1AOXmnJyVDj5CTrtA1RSvgGoWrzCfixpjiJVtLJgwTAormhZyA2bnxgwGkCTpp3c/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }

HTML CODE:

<div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #2

CSS Code:
#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdvcGiYsoHBP6q0DQiywy_2leDZuEpr0PuozWrIfJX5oR8JiAG1YCM-NxA9UJgJ_9jjlYjVv-XraaOWMfnC8G2tnKDr6KIvYj3hIgVVld7nEy-t0NoImadqj_iShDQ0EymNmgeqWTe3F8/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdvcGiYsoHBP6q0DQiywy_2leDZuEpr0PuozWrIfJX5oR8JiAG1YCM-NxA9UJgJ_9jjlYjVv-XraaOWMfnC8G2tnKDr6KIvYj3hIgVVld7nEy-t0NoImadqj_iShDQ0EymNmgeqWTe3F8/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }
HTML Code:
<div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #3

CSS Code:
#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNbHOhEMsTaRpW3nda77kKQv41xfXdoNlKyvIkG8gn3NR56tp7e6w1Kn2UH9-Sb-NWFL-5NcsvnpwBcN_aD3YS7zyr6GndQGqpzuSy_P6UqxHLL02xdMUycgeOKaY_AlVjhdzlRrU19EI/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNbHOhEMsTaRpW3nda77kKQv41xfXdoNlKyvIkG8gn3NR56tp7e6w1Kn2UH9-Sb-NWFL-5NcsvnpwBcN_aD3YS7zyr6GndQGqpzuSy_P6UqxHLL02xdMUycgeOKaY_AlVjhdzlRrU19EI/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }
HTML Code:
<div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #4

CSS Code:
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiaa-My7wGK95vp-YrE633Ci396lCnIlAVOlJSyB0OEZuPHdoizGKWJfhSSMgilH5b86CBmPimBwkNemaeRWH2k4aqbSqnCgRFn7P81QT6LuWxJKLzsCN5xLiWE_dnRnSLYxb8S76Vew0/s800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiaa-My7wGK95vp-YrE633Ci396lCnIlAVOlJSyB0OEZuPHdoizGKWJfhSSMgilH5b86CBmPimBwkNemaeRWH2k4aqbSqnCgRFn7P81QT6LuWxJKLzsCN5xLiWE_dnRnSLYxb8S76Vew0/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #5

CSS Code:
#menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnHQcZmWwKl1MEi_4_n-vnJs5bF7lGiW5vN7z6zqys5zBtVpzb3jtZQWJttsHDR22Pn9CPhbFq5Ib9dFj1nqbyW9fq4imCZJSejLUdoKHTy-oWnrJVy3vjbb3EYIrUkRN8n4s1ttgLlWQ/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnHQcZmWwKl1MEi_4_n-vnJs5bF7lGiW5vN7z6zqys5zBtVpzb3jtZQWJttsHDR22Pn9CPhbFq5Ib9dFj1nqbyW9fq4imCZJSejLUdoKHTy-oWnrJVy3vjbb3EYIrUkRN8n4s1ttgLlWQ/s800/menu14.gif); padding: 8px 0 0 10px; }
HTML Code:
<div id="menu14"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #6

CSS Code:
#menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUHT6ABvbO4N8kl5ujC6NGUpEA5llW5MVSSiWEYYKohvYUMtmMGq_pQ8D9egqFRcV7q8OOAk38XQ_qvH7R36qurWVWM7uyRp4C_BhgEazqk2nAKjmS8dgZmXet6Ll1BbJt7e0Ez0OkNDw/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUHT6ABvbO4N8kl5ujC6NGUpEA5llW5MVSSiWEYYKohvYUMtmMGq_pQ8D9egqFRcV7q8OOAk38XQ_qvH7R36qurWVWM7uyRp4C_BhgEazqk2nAKjmS8dgZmXet6Ll1BbJt7e0Ez0OkNDw/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }
HTML Code:
<div id="menu7"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #7

CSS Code:
#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimDnyrT0r0p7lXI4URogG2wUwcKiMcAu1ByPeuahj8cNHlEGzNui2q6gE_EBRIBtZy7VzqqPkN_GL_Ss7TumPoDIg-cOYCdZHE0WM1LtO97OWP1RF0B53OkfVfKenYC8rRmIR4-KeKW4M/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimDnyrT0r0p7lXI4URogG2wUwcKiMcAu1ByPeuahj8cNHlEGzNui2q6gE_EBRIBtZy7VzqqPkN_GL_Ss7TumPoDIg-cOYCdZHE0WM1LtO97OWP1RF0B53OkfVfKenYC8rRmIR4-KeKW4M/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimDnyrT0r0p7lXI4URogG2wUwcKiMcAu1ByPeuahj8cNHlEGzNui2q6gE_EBRIBtZy7VzqqPkN_GL_Ss7TumPoDIg-cOYCdZHE0WM1LtO97OWP1RF0B53OkfVfKenYC8rRmIR4-KeKW4M/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #8

CSS Code:
#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxLGem1JtSDG7jWwy3VKeIqsUBTGNmmTJSbQTZTPM0L92O62Qy4t2_1N_G_Xhl0epB5276GMQLb_0TAleC8kqs9Yipo9F-JZclPMJ39D4mHZpm5Ci0FwxKLUIyVV0CmKXTQYhKQmwfB08/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxLGem1JtSDG7jWwy3VKeIqsUBTGNmmTJSbQTZTPM0L92O62Qy4t2_1N_G_Xhl0epB5276GMQLb_0TAleC8kqs9Yipo9F-JZclPMJ39D4mHZpm5Ci0FwxKLUIyVV0CmKXTQYhKQmwfB08/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxLGem1JtSDG7jWwy3VKeIqsUBTGNmmTJSbQTZTPM0L92O62Qy4t2_1N_G_Xhl0epB5276GMQLb_0TAleC8kqs9Yipo9F-JZclPMJ39D4mHZpm5Ci0FwxKLUIyVV0CmKXTQYhKQmwfB08/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #9

CSS Code:
#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrDz9vVeHKu19aHKHuhF8p6x_6rE2Ap7oywwsc9OAJWZvjlTtZowPfwT0IzBkJx0IaCFyK6L1J5TNW7lgyth9Yqf0n6EO76hfjAxysZjiFCIAhlfA2_mCqtJdIV5Lm_0ceFDaXco32Lg/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrDz9vVeHKu19aHKHuhF8p6x_6rE2Ap7oywwsc9OAJWZvjlTtZowPfwT0IzBkJx0IaCFyK6L1J5TNW7lgyth9Yqf0n6EO76hfjAxysZjiFCIAhlfA2_mCqtJdIV5Lm_0ceFDaXco32Lg/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }
HTML Code:
<div id="menu12"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #10

CSS Code:
#menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_kFQmctDFzXvB_8Dquk0_dyky1m1JB4FLWOwt9mYvdhDwRFjSFhukcDCOHfgSUEa0Uwuk-KelD8FFSl3pzfPe62zvmbKyzmGD1ohKkGF7T3eU3uMUZXTNnUYHHLZynQDE7vFQA4_w2E8/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_kFQmctDFzXvB_8Dquk0_dyky1m1JB4FLWOwt9mYvdhDwRFjSFhukcDCOHfgSUEa0Uwuk-KelD8FFSl3pzfPe62zvmbKyzmGD1ohKkGF7T3eU3uMUZXTNnUYHHLZynQDE7vFQA4_w2E8/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu13"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #11

CSS Code:
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF99k3IVC-Bx5gfph-25DJ93GLuX5UHkO_M25pMtrMmBWtYrSpNO-6gOuns7vX3PirNJqy7cdUQVUmRxOGSxle-g1_lFjIoUNJTNkU9UoT42kWBLXK4oWHKOi4HNmP0Krm8B7JLgARCE0/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF99k3IVC-Bx5gfph-25DJ93GLuX5UHkO_M25pMtrMmBWtYrSpNO-6gOuns7vX3PirNJqy7cdUQVUmRxOGSxle-g1_lFjIoUNJTNkU9UoT42kWBLXK4oWHKOi4HNmP0Krm8B7JLgARCE0/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF99k3IVC-Bx5gfph-25DJ93GLuX5UHkO_M25pMtrMmBWtYrSpNO-6gOuns7vX3PirNJqy7cdUQVUmRxOGSxle-g1_lFjIoUNJTNkU9UoT42kWBLXK4oWHKOi4HNmP0Krm8B7JLgARCE0/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }
HTML Code:
<div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #12

CSS Code:
#navlist { color: white; background: #17a; border-bottom: 0.2em solid #17a; border-right: 0.2em solid #17a; padding: 0 1px; margin-left: 0; width: 12em; font: normal 10px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; font-size: 1em; } #navlist a { display: block; text-decoration: none; margin-bottom: 0.5em; margin-top: 0.5em; color: white; background: #39c; border-width: 1px; border-style: solid; border-color: #5bd #035 #068 #6cf; border-left: 1em solid #fc0; padding: 0.25em 0.5em 0.4em 0.75em; } #navlist a#current { border-color: #5bd #035 #068 #f30; } #navlist a { width: 99%; /* only necessary for Internet Explorer */ } #navlist a { voice-family: "\"}\""; voice-family: inherit; width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */ } #navcontainer>#navlist a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer */ } #navlist a:hover, #navlist a#current:hover { background: #28b; border-color: #069 #6cf #5bd #fc0; padding: 0.4em 0.35em 0.25em 0.9em; } #navlist a:active, #navlist a#current:active { background: #17a; border-color: #069 #6cf #5bd white; padding: 0.4em 0.35em 0.25em 0.9em; }
HTML Code:
<div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #13

CSS Code:
#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid42LTndZCfiQtIeJRke_N8tk0vlispkVBMjjJPIyZch-wcFi-KNq3qhuLmHrbXDSSyWR9PKAcs-ebeAD0Oss4U__7lyBVJ1hSuMeMykOZmrX34wbaSk77hODwqRZtXqNUQwYGHKMU_Xw/s800/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover, #menu8 li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid42LTndZCfiQtIeJRke_N8tk0vlispkVBMjjJPIyZch-wcFi-KNq3qhuLmHrbXDSSyWR9PKAcs-ebeAD0Oss4U__7lyBVJ1hSuMeMykOZmrX34wbaSk77hODwqRZtXqNUQwYGHKMU_Xw/s800/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid42LTndZCfiQtIeJRke_N8tk0vlispkVBMjjJPIyZch-wcFi-KNq3qhuLmHrbXDSSyWR9PKAcs-ebeAD0Oss4U__7lyBVJ1hSuMeMykOZmrX34wbaSk77hODwqRZtXqNUQwYGHKMU_Xw/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }
HTML Code:
<div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #14

CSS Code:
#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggh4NgsIZ0bNniizo98jjwNVMPhUbDFjpxnSPQvlzYeFDTSoEZXiKX4a2GREBMU-UotzRln50-74WiV6Ep3qPUEokaP-QRaEZEDKYwM1bPysDLPbf824oItpZ7g0ssGzf9uAPLCt1cCjw/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggh4NgsIZ0bNniizo98jjwNVMPhUbDFjpxnSPQvlzYeFDTSoEZXiKX4a2GREBMU-UotzRln50-74WiV6Ep3qPUEokaP-QRaEZEDKYwM1bPysDLPbf824oItpZ7g0ssGzf9uAPLCt1cCjw/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }
HTML Code:
<div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #15

CSS Code:
#menu9 body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipmCsIXQi-vYZrvaDsUjvoO1Z9iEYB-kfn6IMfB-mjm8E-LimeI6muUzWLK5gUAdmGeiK0xT1T_DWG2Efy6XS5Kp8SmA-SkSZ45KbFEKRoQqjP_6OUSNPjiVPqkgQGh5RBb9EOYC4VAbg/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipmCsIXQi-vYZrvaDsUjvoO1Z9iEYB-kfn6IMfB-mjm8E-LimeI6muUzWLK5gUAdmGeiK0xT1T_DWG2Efy6XS5Kp8SmA-SkSZ45KbFEKRoQqjP_6OUSNPjiVPqkgQGh5RBb9EOYC4VAbg/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #16

CSS Code:
#navcontainer { background: #f0e7d7; width: 30%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 70%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; }
HTML Code:
<div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #17

CSS Code:
#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7tmAFG3fhdK3sFbvSMC-x9AYGBJ-JHhnVr84iBsCQ1yhjFSoAlY8PfxPP9dDY_n9tI-0pTQ3HSgAdgtRssj4VVg1J0Oq7aHet1qWJjQVJQ7xKreqnfLuyk_Gn8N4FIlYtfUGb7BLXU6M/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7tmAFG3fhdK3sFbvSMC-x9AYGBJ-JHhnVr84iBsCQ1yhjFSoAlY8PfxPP9dDY_n9tI-0pTQ3HSgAdgtRssj4VVg1J0Oq7aHet1qWJjQVJQ7xKreqnfLuyk_Gn8N4FIlYtfUGb7BLXU6M/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #18

CSS Code:
#menu11 ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border: none; } #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvu7LbBXRkolbNHM8TweB4QRmrIigcMIsw4FgsIoXwlSG9JHaxOudK8-rnA1T20bNOcmNgh1vhFChJ2FXHkAUiJ_SaTcuo25EutoYbrPsl1_U4Z4Yh-rIgOS4eqN8jxcf2ArcsS5quTsA/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvu7LbBXRkolbNHM8TweB4QRmrIigcMIsw4FgsIoXwlSG9JHaxOudK8-rnA1T20bNOcmNgh1vhFChJ2FXHkAUiJ_SaTcuo25EutoYbrPsl1_U4Z4Yh-rIgOS4eqN8jxcf2ArcsS5quTsA/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }
HTML Code:
<div id="menu11"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #19

CSS Code:
#button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/ font-size : 10px; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } #button li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }
HTML Code:
<div id="button"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #20

CSS Code:
#menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJhboTKFtYBJBl5OZ8ti2_g0RSg3BO0FC3t1aV82qwNtZ5PlsO7UTApFggC9c3h6-6w1GB8b9mT2BfMirJB9-TFwV2lCS8-8ahjnFISnTLzGh-D5rPW3zxSk81l-WXdQZ5onXU3TPh4o/s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJhboTKFtYBJBl5OZ8ti2_g0RSg3BO0FC3t1aV82qwNtZ5PlsO7UTApFggC9c3h6-6w1GB8b9mT2BfMirJB9-TFwV2lCS8-8ahjnFISnTLzGh-D5rPW3zxSk81l-WXdQZ5onXU3TPh4o/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJhboTKFtYBJBl5OZ8ti2_g0RSg3BO0FC3t1aV82qwNtZ5PlsO7UTApFggC9c3h6-6w1GB8b9mT2BfMirJB9-TFwV2lCS8-8ahjnFISnTLzGh-D5rPW3zxSk81l-WXdQZ5onXU3TPh4o/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #21

CSS Code:
#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX3sp0fdxbbaTApF6a3M7451a3FovSEQkuOXedcS1A1nbKBbJBfTrfIJIu3IAyyv3GpxJ3K23RKJesWVe3RB-qinjzu_eC88W3Q0JWEdZ80lWtz1ZajIaCQggafj5xWLa-t5EnfFzar1s/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX3sp0fdxbbaTApF6a3M7451a3FovSEQkuOXedcS1A1nbKBbJBfTrfIJIu3IAyyv3GpxJ3K23RKJesWVe3RB-qinjzu_eC88W3Q0JWEdZ80lWtz1ZajIaCQggafj5xWLa-t5EnfFzar1s/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; }
HTML Code:
<div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #22

CSS Code:
#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuxjMuXnbN7VbbFhLckBQnNIX9IlaKhIwWEJc7B6oba55i0hoOyBTSNW6HDP3VvdY62W37Rr_SSizd0PgoxvsFnGe-IEJe7I4VG9snsGbVvwSW72RNWcVlNvztdWLbr2ncgfuHAlPZah8/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:hover, #menu5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuxjMuXnbN7VbbFhLckBQnNIX9IlaKhIwWEJc7B6oba55i0hoOyBTSNW6HDP3VvdY62W37Rr_SSizd0PgoxvsFnGe-IEJe7I4VG9snsGbVvwSW72RNWcVlNvztdWLbr2ncgfuHAlPZah8/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuxjMuXnbN7VbbFhLckBQnNIX9IlaKhIwWEJc7B6oba55i0hoOyBTSNW6HDP3VvdY62W37Rr_SSizd0PgoxvsFnGe-IEJe7I4VG9snsGbVvwSW72RNWcVlNvztdWLbr2ncgfuHAlPZah8/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }
HTML Code:
<div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #23

CSS Code:
#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoxhxXdJfcZWDsOBKpYG4NX8Ppt7UCjyM5BvdFXFs7LENEaupC1tBBl_OJkLe_wax4h_qs1GetXDYmOlWSR9bRHIb4D4YUrRHtckCUb71wrVbbDo6BhLA0pgVNybOL6KTEz1BFTQp2Po0/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoxhxXdJfcZWDsOBKpYG4NX8Ppt7UCjyM5BvdFXFs7LENEaupC1tBBl_OJkLe_wax4h_qs1GetXDYmOlWSR9bRHIb4D4YUrRHtckCUb71wrVbbDo6BhLA0pgVNybOL6KTEz1BFTQp2Po0/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #24

 
CSS Code:
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXNKygjgZ6yjXGaVHDxUxaKmHsToW_pGPCyq1u5pobPCeV7suZlTc9MqbqoJSgOYeBI-KXTk-KsHkTZ1g6fuJg5Ehn4lG-iPfjqY3XXi0KRpB1t-fE8gtQFjDtDkamnkmvmBHdrn2_tEQ/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXNKygjgZ6yjXGaVHDxUxaKmHsToW_pGPCyq1u5pobPCeV7suZlTc9MqbqoJSgOYeBI-KXTk-KsHkTZ1g6fuJg5Ehn4lG-iPfjqY3XXi0KRpB1t-fE8gtQFjDtDkamnkmvmBHdrn2_tEQ/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #25

CSS Code:
#menu10 ul { list-style: none; margin: 0; padding: 0; } #menu10 img { border: none; } #menu10 { width: 200px; margin: 10px; } #menu10 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu10 li a:link, #menu10 li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirEBxUSblwggr7DkJetrNfs5gfIUNj_4VNp6KZI7IKClhI-tLzH6T1euKE1HdVU-7nHD6jyjr1rVbQsCFCVl5fftqXM9u9pObXfpfq9lJ1PKCs23KPZuhkJ96x7NGWJr93Ql2QRvi_4BY/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirEBxUSblwggr7DkJetrNfs5gfIUNj_4VNp6KZI7IKClhI-tLzH6T1euKE1HdVU-7nHD6jyjr1rVbQsCFCVl5fftqXM9u9pObXfpfq9lJ1PKCs23KPZuhkJ96x7NGWJr93Ql2QRvi_4BY/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu10"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.

Read more »

Live Writer Blogging software,offline blogging

We can do blogging offline with this software. With growing technology like Windows Live Writer blogging is no more limited to your dashboard. You can write, save and publish posts right from your computer without signing in your blogger account. Blogger HTML editor lacks many features when it comes to writing a good looking post. On contrary windows live writer is a software built by Microsoft Corporation which contains every feature that Blogger lacks.

I hate blogging without Windows Live Writer! I am sure many bloggers would agree with me on this point.

 

Some of the things you can’t do with Blogger HTML editor are,

• You can not write HTML code just the way it looks in blogger editor because the code is interpreted as a command and blogger editor converts it to how it may look in a browser.
• You can’t resize an image to whatever size you like because you are provided with only three options i.e Small, Medium and Large size.
• The font type and font size is limited.
• You can not undo what you have done (Going backward).
• You can’t align images to the left or right of your intro paragraph.
• You can not add effects to your images, like shadow effect, rounded corners, emboss, blur etc.
• You can not post an image in its original size
• You can not insert tables in your posts because no table option exists
• You can not open a link in a new window unless you edit the HTML
• You can not add a world map to your posts
• And much more……………

You can not do all above in a compose mode unless you add or change the HTML code in your HTML editor. But editing HTML would seem difficult for a newbie whilst pretty easy for a professional. Since most people like me have limited knowledge about editing HTML, blogger editor is of little use to all of us. Luckily! Windows Live Writer comes to our rescue. It can to do what ever blogger editor can not. It contains every feature a blogger is looking for. One of the best things I like about it is that it saves a copy of your blog interface/theme and when you write posts, it will be just like writing a post straight into your blog. See the image below to understand what I mean to say,

Moreover your images can be displayed in two different ways look below,
Selecting the photo album option will display your images in a scattered style (with a view album link below your scattered images),

So go and download it right now by clicking the link below.
DOWNLOAD WINDOWS LIVE WRITER NOW!
To download the Latest version directly from windows live site then click here
TROUBLESHOOT:
If you get an error saying that “your windows installer is out dated” then run the following setup (below) before windows live setup (above)
Download Latest Windows installer here

Read more »

Which is best WordPress or Blogger?

which blogging platform to choose to start your blogging career? The major blogging hosting platforms are no doubt Blogger and WordPress. Now to judge which one is better I have written a detailed comparison chart below that will be of great help in making a smart decision.

Note:- I am not an employee of either Blogger or WordPress. The below chart is solely my personal research.

WordPress VS Blogger Comparison Chart 2010. © My Blogger Tricks

                                                  

FEATURES	BLOGGER	WORDPRESS	WHO WON?
Template Customization	Offers Free Layout/Style Sheet Customization	No style sheet customization. Payment required	Blogger
Tutorials/Help	Innumerable Tutorials on Blogger Tricks	Hardly some	Blogger
Number of un-official Themes	Innumerable Designers Creating Free Templates each day	Few Designers Involved in offering free templates	Blogger
Coding Used	Uses user friendly scripting and coding i.e HTML, XML, CSS	Uses advance scripting like php that few can understand	Blogger
Dashboard Interface	Highly user friendly. Easy to navigate.	Complicated Interface with hectic navigation	Blogger
Default Template Collection	Limited Collection Of Default templates mostly un-professional	Over 70+ high quality Templates	WordPress
Template/Theme Replacement	Default Template can be replaced by a more free professional template	No template change allowed	Blogger
Widgets	Innumerable Official and Un official Widgets available	Limited Official widgets available. Rarely few un- official gadgets available.	Blogger
Comments	No commenting editing. Moderation allowed. No Spam protection. No user friendly comment form	Comments can be edited and moderated. Spam protection available. User friendly comment form	WordPress
SEO, Optimization	Though Owned by Google, no favoritism. Manual optimization is required	Owned by a private party. Meta Tags Plugins used. Easy To optimize	Both
Blog Privacy	You can limit access to your blog to 100 Authors and 100 readers. All must be Google account holders.	You can limit access to your blog to 35 Wordpress account holders. Posts can be password protected or Private.	Blogger
Comment restriction	You can restrict comments to Google account holders, Open ID users or Any one (includes Anonymous)	Comments can not be restricted. Anyone can comment	Blogger
Blog Import	Only from one BlogSpot blog to another	A Blog can be imported from another WordPress blog or from Blogger, Yahoo! 360, LiveJournal and Movable Type and TypePad	WordPress
Posts and Comment Notification	Authors and subscribers can be notified of latest posts and comments via Email	Same here	Both
Comment Verification	Asks users to verify if they are humans using a 4-6 digit code	Does not asks for any verification. More spam effected	Blogger
Video Storage Limit	Unlimited with Google Video and an upload limit of 16GB	Just 3GB. More space on upgrade.	Blogger
Image storage limit	1 Gigabyte With Picasa Web Albums	3 Gigabytes. More space can be gained through upgrade. You can also upload.ppt, .doc, .odt and.pdf files	WordPress
File type Storage	Only allows image uploading	Allows upload of files like .ppt, pdf .doc and .odt files. More file types can be uploaded on upgrading.	WordPress
Blog Stats	Does not have any default stats system. But allows third party tracking scripts.	Has a default visitor stats system that shows statistics for two days only and does not provide detailed stats reports. Does not allow third party tracking scripts.	Blogger
Blog co-partners	100 Google account holders can be added as Administrators or Authors	35 WordPress account holders can be added as Administrators, Editors, Authors or Contributors.	Blogger
Advertisements	Displays no advertisement of its own on your blog.	Displays discreet AdSense advertisements on your blog for small percentage of the page views	Blogger
Posts By Email	Has a Mail-to-Blogger feature which turns any email account into a blog-posting application	Posts can be published using emails	Both
Post Feed On Mobile Phones	Supported	Not Supported	Blogger

Conclusion

When choosing a blogging service three things are most important than anything else which are,

1. Template Editing
2. Huge Image Storage Capacity
3. Huge Video Storage Capacity

Believe it or not Blogger has all these three features and is undoubtedly a blessing to millions of teenagers and people from other classes who can’t afford to pay online. The Template editing feature of Blogger is one of its best feature. Within a year of blogging a guy like me who didn’t even know what CSS, HTML, XML meant, is now playing with codes day and night. Blogger made my life meaningful and interesting and will surely be a blessing to you too. Blogger is surely the best free Blogging Service available in Blogosphere if equipped with a good web hosting service.

Which one do you think is the best?

We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.

Read more »

Send FREE SMS With Gmail To Any Mobile In Any Country?

Amaizing trick : Short Messaging Service is great! It is fast, it is cheap, and it is convenient! Not to mention verypopular especially among the youth. It lets you connect with your friends and family no matter where in the world you are. A few years ago, Google launched its SMS chat service via Gmail. But then it withdrew the service and took it back to its lab. This service was relaunched some time back, but was limited to very few countries, like U.S. etc. Well here's a good news! Google has, very recently, introduced updates to the service. Gmail SMS messaging is now available across a lot more countries, including Asian countries such as Pakistan, Afghanistan, India etc. You can now send texts to a lot of networks in many countries,absolutely free!

So what's the big deal?

This is a very useful service. If you use a prepaid mobile network, and if you are out of credit (like I usually am :P), you can send texts for free to people who are texting you! And even if you have some credit, but don't want to spend it uselessly, you can just log in to your Gmail account, and easily type and send a message to any of your contacts. I have started using this service for when I can't locate my cell phone, or am feeling to lazy to type a long text on the small, cramped qwerty keyboard. I prefer typing with a proper keyboard. Sit back and relax, and let your friends do the annoying typing on cell phones :). About this service, Google says;

How to send texts?

Sending SMS is simple. You of course need to have a Gmail account for sending SMS.


Step 1 : Adding a new contact


Sign in to your Gmail account, and open up the Chat pop up menu from the bottom left if it already isn't there. Click on the little arrow, and Add a new contact.

You will asked to enter an email to invite a contact. Note that if you want to chat a friend that is already your contact, then you can skip ahead to the next step.

Step 2 : Adding mobile number

Now, hover on a contact of yours, and click on the Send SMS button as shown below.

Note : If you haven't sent that contact an SMS before, of if you haven't added their number, then instead of the Send SMS button, there will be a Chat button at the exact same position. Click on this button and you will see a small pop-up at the bottom right of your screen, as shown below.

Click on the Continue this chat over SMS button. This will only appear if you haven't added their number, or haven't sent them an SMS before. Otherwise, you will be able to enter your SMS in this pop up. Once you click the continue button, you will be prompted to choose a country and mobile. This is the contact's mobile number. Add a number and then save.

Step 3 : Chat away!

Once you have entered the mobile number, a pop-up will again appear at the bottom right exactly where the previous one did. This is your chat box. You are now ready to go! Type a message in the text field , hit Enter, and sit back and wait for your friend's reply!

SMS credits

This is a smart way Google has found to encourage the use of this service. Initially, you are given fifty credits, which means you can send out 50 messages. For every one message sent, one credit is deducted. But for every message received, say when someone replies to your Gmail text, you get 5 credits. So tell your friends to stop being miserly, and start replying to texts :). You can not, however, exceed the 50 credit limit, no matter how many replies you get.

What if you lose all the credits? Well, you will receive one credit after 24 hours. A smart way to increase your credits would be to send a text to your own mobile phone, and then replying to it any number of times to refill your credits!

What are the charges?

Google does not charge anything for this service. However, since this is a new service to most countries, some carriers might charge you for it. Usually, you won't be charged for sending SMS through Gmail. The receiver might be charged a small amount if he chooses to reply to that message. Otherwise, standard messaging rates apply. Read more aboutSMS Charges at the Google Chat Support page.

Supported operators

The reason that this service is so exciting for us is that, it wasn't available for our country before. Not only for us, but for most of our readership as well, this is a big news. The inclusion of this region shows that Google is working to expand its services, which is a good thing. Previously, in the U.S, this service was limited to a few operators. Now, all U.S operators are supported. And the influence has expanded outside the U.S as well. Now, more than 50 countries are included, with hundreds of supported operators. And this influence is expanding fast! For Pakistan, Ufone and Mobilink, the major mobile operators in this area, are supported. In India, Reliance, MTS, Aircel, and other major networks are supported.

Here is a complete list of the Supported Mobile Operators. If your country is listed, but not your carrier, don't despair! Now that so many countries have been included, supporting carriers is not that big an issue. It's only a matter of time before more operators are included by Google. Just wait and see. If your country isn't listed, Google promises to include more countries very soon. So keep your fingers crossed :)

What do you think?

This definitely is a big breakthrough, especially for Asian countries. Check out this service and let us know about your experiences. And if you find any problems, let us know so that we can discuss the problem and look for solutions. Happy text-chatting :)

http://www.google.com/mail/help/intl/en_il/sms.html

http://www.technologytell.com/gadgets/42704/google-brings-back-sms-texting-to-gmail/

http://support.google.com/chat/bin/answer.py?hl=en&answer=106015

We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.

Read more »