GprsBay

Showing posts with label html. Show all posts

Monday, June 20, 2011

Learn CSS, HTML and JavaScript Offline! using MBT HTML Editor

The biggest problem faced by majority of newbie bloggers and web developers is editing their templates. And the reason for this is lack of awareness with browser languages like CSS, XML, HTML, JavaScript etc. There are several websites online that have tutorials in these fields and one of such websites is www.w3schools.com This website is popular because it lets you play with the code! It has an Online HTML Editor Tool that lets you see live preview of the code that you use. Many developers find this tool pretty useful but has someone ever imagined that you can actually rip this tool out of w3schools and use it offline for practicing coding while offline? Well fortunately after some trial and error we could successfully create a similar tool entitled as “MBT HTML Editor” This is the first time all bloggers are having a chance to have fun playing with important codes like CSS, HTML and JavaScript and learn important coding in a more interesting way! Now you can actually test a code before adding them to blogger.

This tool is better than any other HTML Editor found online or available as a software, in the following ways,

It works Offline in any browser available
Takes less than a fraction of a second to show live preview
Is equal in size to a peanut i.e 2.32 Kb
Code is saved in browser if your PC shutdowns accidently
You can go back several times using Ctrl + Z and go forward using Ctrl + Y
Can be used to test a code for Cross Browser Compatibility
It is free of charge thanks to MBT! :D

Downloading Instructions

To Download MBT HTML Editor follow the steps below,

Click this link –> MBT HTML Editor
The MBT HTML Editor window will expand. Now you can start using it Online but to work offline in it you need to save it first. To save it click on the file menu at top-left-corner of your browser and then choose “Save As” or “Save Page As”. Select a safe location and hit enter, as shown below,

Done!

Troubleshoot:- In IE a Security alert will appear, ignore it by right clicking on it and then selecting Allow Blocked Content

Instructions For Using MBT HTML EDITOR

This tool consists of two panes i.e left pane and right pane. See a screen shot below,
html-editor-instructions

The left pane is the area where you add your code and the right pane is the area responsible for displaying a visual view of the code. The CSS code is added just between <style> and </style> and the HTML code is added just below </style>

Playing With A Code

Lets now play with a code using our HTML Editor. I am using the Image Opacity Effect Trick here as an example.
The CSS code for Opacity Effect looks like this,

img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

border:0;

}

img:hover {

filter:alpha(opacity=30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

Now to apply this effect to an image we will need an HTML code as shared below,

<img class="Fadein" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMMj-BzrdAwJGf61ym3aBR9HfeQMNg35w__h-sHf-rdPU4H93lWQ9wQF49Hzg6AYPlHM1sHXETfVXJ3CS_Eaujid_HhFHggp8BYI6sP8kaY69Jz_puJwUF8tmI9hwisoavwS69Oq3gCS47/s400/DIGG.png">

Now The best part, add the CSS code just between <style> and </style> and the HTML code just below </style>. Hit the Preview button and watch the dancing code in action in front of your eyes. You can now start the play!

See this screen shot,
MBT-HTML-EDITOR-DISPLAY

Some Important Tips:-

To go backward to previous changes, click Ctrl + Z
To go forward to last changes made, click Ctrl + Y
To get URL of an image saved in your hard drive suppose Drive F, open Firefox browser and simply type F: in the address bar and hit enter. That drive will open and now simply browse to that image and right click on it and then click on Copy Link Location. Alas! you got the URL. Now use this URL wherever required during your offline code editing adventure.
Once you are happy with the code that you prepared then simply paste the CSS code just above ]]></b:skin> inside your blogger template and the HTML code where you want the effect to be seen i.e post or sidebar

Hope this Tool will be of great use to bloggers and web developers across the globe. I hope you may find it easy to better understand and learn browser languages and implement them to invent new codes with new creativities. Do let me know how useful you find it. We played our part and now its your turn to spread the message!

Note:-

I have also created a tool that lets you change special HTML Characters to Entities. It lets you add HTML code to your posts and comment section as I usually do. Hope you will like it too. You can have a look at it by click this link –> Change Special HTML Characters To Entities

Monday, June 20, 2011 by Rishikesh · 0

How To Post HTML Code In Blogger Comments Form?

While writing tutorials or asking a question, sometimes it becomes very necessary to post html and javascript codes in your blog comment forms powered by Blogger. You have seen many authors posting HTML effectively but when some of you try to do it, you get an error. This is because Blogger Comment form doesn't support direct posting of HTML and JavaScript. In order to help you to do that we will need to change/encode the same code into a text and then post it effectively without any error. The Tool below will help you to change HTML characters to simple text, which could be easily inserted in your blogger template and comment form. You can also use it to convert your adsense code into an embeddable form. It converts special characters in this way,

'<' becomes '<'
'>' becomes '>'
'"' (double quote) becomes '"'
''' (single quote) becomes '''
'&' becomes '&'

THE HTML ENCODER: Start Converting Now!© GprsBay

by Rishikesh · 0

Wednesday, December 15, 2010

30+ “Horizontal” Navigation Menus For Blogger With CSS & HTML Codes

Navigation menu or tab menu is the heart of every web page or blog. It provides the path way to all important pages of the website. To create a Navigation menu you must have good knowledge of CSS and HTML. But since more and more designers are sharing their tutorials online, coding has become far easier. I have brought to you a total of 30 High class navigation menus along with their CSS and HTML Codes from across the web. You just need to copy and paste the codes and that’s it!

The Horizontal Navigation Menus below are mostly created by Christopher and Highdots and some by me. I have modified most of the codes in order to make them work in blogger and have also made them pretty easy to be understood by most of you. Further all images are uploaded in my Picasa web album so no effort required on your side.

How To Add These Navigation Menus To Blogger

To add your selected navigation menu to your blogger template follow these steps,

Go To Blogger > Layout
Click Add a Gadget or Add a Page element
Choose HTML/JavaScript widget
Simple Paste the Navigation Menu Code inside HTML/JavaScript widget
Hit Save
Drag HTML/JavaScript widget and drop it just under your Blog Header, as shown below,

7. Finally view your blog to see something hanging below your Blog Header/Logo.

See Live Demo of MBT Navigation Menu #3

To change the links, Edit this part of the HTML in all codes below,

<li><a href="#" ><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 5</span></a></li>
<li><a href="#" ><span>Link 6</span></a></li>
<li><a href="#" ><span>Link 7</span></a></li>

Replace the hash(#) sign 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,

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

As a designer I always look for inspiration that can be useful for both my readers and for my designing projects. I hope the resource below will be of great use to Bloggers from all platforms and to designers. Start choosing your favorite Navigation Menu and do not hesitate to ask me if you needed help in customizing it.

Live demo 1 :: Live Demo 2

Tip:- To See Demo Of Other Menus, Simply Copy Paste The Code Inside MBT HTML Editor and Hit Preview To See It Live.

MBT Navigation Menu #1

No Image Used

<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

MBT Navigation Menu #2

No Image Used

<style> #navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #666; background-color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

MBT Navigation Menu #3

No Image Used

<style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } #navlist a:hover { color: #fff; border: 4px solid #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

MBT Navigation Menu #4

No Image Used

<style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img { border: none; } #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

MBT Navigation Menu #5

<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN2Ayv0M9dn9Nf1csXFgM4sZeBdDu9TZF_pMBVJ3MAiq-nS6yGWMpg75T3YmFgI0a41Z_4cNE10psIRjWl_xQ7TVxZpPSyGDoJeIOM4VZpsOoW4SS9AovaQBVkvXLT1GjjJFVtQiQeUyQ/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #6

<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOKCzTxfgMqpTeg56yHBL96x3xqGfj290z2SIVABGV6mnW9mukRBnkvRg4zCmfM8d7PYtt-lGMUHhVgTJzXeO3rSzYcuuX2uoCHPDsqjFVBN-OJp2aLX4-iSyq_zjW-GEcRlfodyUHTkM/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3uDMmWENw8pmL6cai3LVFUTHoDQyzIXsJU6CcKyAyaUZPmKcp9jBKDf_i_WYgaDLDqw2kxkBaLjgXi5k5kJvPE9_QtgUcXiJYiXpX-ogaxfQUYe263BsUS9VEIIszoxsChfAx5Id_nmE/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #7

<style> #tabsG { float:left; width:100%; background:#666; font: bold 7.5pt Verdana; line-height:normal; } #tabsG ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsG li { display:inline; margin:0; padding:0; } #tabsG a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSQY6hY0F5uXs714r5lzhG79IJKHedEk9jfrv_GYutHenpgRztDqDH7wB5KiEsaSZ2qvh7tuAWxVPKrHlQ7wEHqW3yuYoQ3zXz-sPdjExe1EnRarEUCbjQNMQOu16Y9wzFslCui04idRY/s1600/tableftG.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsG a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCWNMCq0cgWypoRI-L8QId6thWqAV0DEZb3FlNOX5vpHW2WsOv1G6gD__DvpG-dVCXhLCkcBo-CITnZfoo7Bcz8d446ptRElVgG_kFziw4WlJbj129olBBJeh6WzwZkXOpjWrlJJ6CnDE/s1600/tabrightG.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsG a span {float:none;} /* End IE5-Mac hack */ #tabsG a:hover span { color:#FFF; } #tabsG a:hover { background-position:0% -42px; } #tabsG a:hover span { background-position:100% -42px; } </style> <div id="tabsG"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #8

CSS CODE:

<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwrz3MwcX0ahGTPoPfFmeuf0DOceBmARPI6DwGlF2Tc8gzzSTo4J5SU1XWKBVeGQiE3JpxRRPHKGoYPzcQrKkgVqKRXisytCaEB4YnvNMZKnnRTbe6Njbm6K8B-Ace8gW3K8HVZnLvenI/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCWNclOmQLOqJH24GBVQpKFp8PByFfO_5r7Zh6qxvqB36m6e1Qc3stNulPzb7K8AX6qHYZmXBaA5fh0AY5vcZgbYg_GLoBgThK7bYWAX6TnUiYIZHUTssW5ICLLA0ExSS0t4xhAEq_lZg/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #9

No Image Used

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #10

<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8r_Zm01Pn3B3ZLh4XnFGCssIcYziPkpVi_PO_nyGObD4dGLKSjgobAeqckiqbiJ0ORV0rXaNMWe1cMGhnFVRmBc7l4D1tM4NCHyewuA8elXEGbp80Qx9RgoK-yK1i1_3LRk9X962IowE/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNfY7BwzT-96yy79rtMO97Ou-dSUaHWJUpRWpj0FIix6zww9LujAHZIVGcILnmpx2a0hA80QXc6iiiiua3YWIorETBbaFKSKEy5THwL6s_lAeQYYUMKro3RxQ_5Mw6appl8aixQItmP0A/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #11

<style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoMlhwdBAYBUeu0S5jCmkV3PNnbP85J_M5LEmsMPV9VE3qXv6hktjZwrt1C4-6OB4QHiZuTFIyYl9DHifX-daEv3QayphCf7G0bI1OrpQKlHDhfRughygR6AcpqDNpzlfaUwaBJxI0L48/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Z5gpCLBO1CNi805Ei4h0eBj9Vv477JoWKyNzmLe7iBId-q0n3ieHwmfvW2Fkq1IlqsC8n-fNtlHPd0RABBs1cccAERh3vKHjSBZdbgbSSWnEaoE1Vwfp-UOX7f76agNVvXVskbN91pQ/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #12

<style> #tabs12 img { border: none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-KJUqCoxX5A1nuB0cIt8MQ65XtZttuePlGhGA3f9COfmaPsy338IoeOsR1I2qrniIbXEyAP7rKWiMqVpad4_OgFFrDK147osK0yyzadRlJbFQjNH0BLVSnlTU6C0kVxPogRpUeThlsqs/s1600/tableft12.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs12 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwCGrqMt4Q9LYIryM3L4w6LU86GTTVQcLh8yj6_7EUr5Hmur1Np41XMCrF5QcGqR716Zk6G2C3sfclB5yXup8jCnxbVNYPokpFayDScJrnlZumAbXCyanHhjNwi3vjCDxHXF8CjCOvFE0/s1600/tabright12.png) no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span {float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; } #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span { background-position:100% -42px; } #tabs12 #current a { background-position:0% -42px; } #tabs12 #current a span { background-position:100% -42px; } </style> <div id="tabs12"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #13

<style> #tabs11 img { border: none; } #tabs11 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs11 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs11 li { display:inline; margin:0; padding:0; } #tabs11 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKpj4wAI4VFoI-BwnLtXgMVFcQxWj5Ma7m_nutvOix_MLgbUOkmw4UzZ1F_Uus7DtabUUlyAwn1Ttvim91bRbvNib5ri1eg5CeT3SDF9CG6nFjKmWw_sZ_xEZh64SozAXeM96VtG3ATC4/s1600/tableft11.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs11 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggg4F18XYc9OCq6HTY10oL04kzmfORTV94QRjD6JWLvsltmwXw8QL2RqV_OBHRwRpnLGDvNwR_jKcAtNCOU2vWTw0U1qCU2KZcxnIpGFATfXij0ygxXmrZEAM6T18ZCMbp1i0VEFHyMoY/s1600/tabright11.png) no-repeat right top; padding:5px 15px 4px 6px; color:#9F9584; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs11 a span {float:none;} /* End IE5-Mac hack */ #tabs11 a:hover span { color:#FFF; } #tabs11 a:hover { background-position:0% -42px; } #tabs11 a:hover span { background-position:100% -42px; } #tabs11 #current a { background-position:0% -42px; } #tabs11 #current a span { background-position:100% -42px; } </style> <div id="tabs11"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #14

<style> #tabs10 img { border: none; } #tabs10 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhza5ZgnieG23NNi4DseLvukkLtkUbO2og5V7LgDde1q1DvE-54BQpWk9RlGWD42ZWcmdW4yNuj7kBfDG7uBYxBtJA_S90dueznm6-medr_Dyowa3LRZeVZxKZdG5_C2PrDR7kl9hn5o0I/s1600/tableft10.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwj738D-cj8P-YNuYqs9FVEKQ1x1EdvAEczUSJBSW3j5lI1QDqj2ubHZpISH6X6MzYXT7qHS6Ixl0oxA0utkehPwZZpt6NTnQnFdMvjSwbX5DC0xxI6M3X0rwPdgYqJR_ivdGwIZ5_p1A/s1600/tabright10.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; } </style> <div id="tabs10"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #15

<style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline; margin:0; padding:0; } #tabs9 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ0Sqgb4JJ1rcu1GrKU1k1yX26InBWAra5DluQj3orFv5IZLhxx2v9jl_mQlnnwiiCSzbwVwHmPMCTQwbirtoxDH9cK5qdRSf2B07yULCpqMKo37z1-rCUDfBShnKLoUNEeAIO_kuj0jE/s1600/tableft9.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLXG4azD49u95UjpfpPt0BZeAEIkrUn33SYiYuwpNT1zqgL8ECC2JEu4tP85uDwtrvrpH0ftdjIQQs-NqprsoC0bFCkiOkwM90IZm9qlJ6zJA0hFOuQGFd4gJ-UT4VXvzaSoB6IaagcHQ/s1600/tabright9.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background-position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0% -42px; } #tabs9 #current a span { background-position:100% -42px; } </style> <div id="tabs9"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #16

<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQKCPR-u8VCikd2ieuBumB4ToVEeMNnYkqFG18R8O2SVThJveGONIzDotlXWoqZ9eAqXqXQEGraMsD6re9cuYL15jZxmOYjQVtH-pIA0PgnSdbWS4_YSqa_CEaoWGpJTG9uyWb1FwFWBY/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidIqnniIenUwaFYlvK4YLJ8STpWwgo6r2HfA5LNZp3JInXkpV0Cgk1x_xh91Arn1BosAiSxsQK1_bNBWVNCOZQv1CL2VIxDBxwO8jeJH7O_zFXTXzefCfrdalxcCT3hKqSNA_VYUt0HaM/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #17

<style> #tabs8 img { border: none; } #tabs8 { float:left; width:100%; background:#FCF1F6; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #E276A7; } #tabs8 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs8 li { display:inline; margin:0; padding:0; } #tabs8 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQUGRqcTVLLuxDrHRpUMK1Y1o4PSF6366KMTpyha7TiYL51MgBICiY4wttMvF1RoLEz2oIGCgbBKfaYx6jNdXY2eIP3qSlT2u5hvW9ReG_ebjV8Q2oS3nlV0ajzE6ib-MrKs1H9Kx4NGo/s1600/tableft8.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs8 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgib0xnr-VO5MCPOsyel_biXx6nx14acw-73QPID-C5cpIJ3EKqtYEPEIpILNtJqCX86mGuGnR1j-f5LnruFcwQRgEn_TyN72aQNTulIHt97nndJ36SMNMu7d5g3l6FlVPKIv6jpLaOlSE/s1600/tabright8.png) no-repeat right top; padding:5px 15px 4px 6px; color:#333; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs8 a span {float:none;} /* End IE5-Mac hack */ #tabs8 a:hover span { color:#591333; } #tabs8 a:hover { background-position:0% -42px; } #tabs8 a:hover span { background-position:100% -42px; } #tabs8 #current a { background-position:0% -42px; } #tabs8 #current a span { background-position:100% -42px; } </style> <div id="tabs8"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #18

<style> #tabs7 img { border: none; } #tabs7 { float:left; width:100%; background:#D4DAE7; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #333B66; } #tabs7 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs7 li { display:inline; margin:0; padding:0; } #tabs7 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvHGgsTun7UY6Os9IHWqTsfDsCKi5xcZPuC2ypCz7xoY8ZgJlI7sbBX8KiJZb-byE9hyLK3kpg-UYY_KKrVki81QlFx7YmYB5zyrYbQk-WtXyddVF8yUUaMifIXNOySas-DZfX-hRdec0/s1600/tableft7.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs7 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFYphrrP1MkgCqIdEeeNinHcVChCMhTWyH0jimi20nkvY-RJiVop6mTGYXQUo9YJrAiP6mPfxTdPA-nLo19ziQxXfzRImQIJfvGYtMFPa36E_p_j8lPdFCWnKFaEt9p9qru4Lazjl7dKI/s1600/tabright7.png) no-repeat right top; padding:5px 15px 4px 6px; color:#999; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs7 a span {float:none;} /* End IE5-Mac hack */ #tabs7 a:hover span { color:#ECB546; } #tabs7 a:hover { background-position:0% -42px; } #tabs7 a:hover span { background-position:100% -42px; } #tabs7 #current a { background-position:0% -42px; } #tabs7 #current a span { background-position:100% -42px; } </style> <div id="tabs7"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #19

<style> #tabsK { float:left; width:100%; background:#E7E5E2; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #54545C; } #tabsK ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsK li { display:inline; margin:0; padding:0; } #tabsK a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsT49JU912MVEdb3dOveijPH27c2yerSpShfVAHRn3Yy2WiIVAQv0VnmJTF067ffKETS6yLGQDpsAukGxosBD0zrKKJNqWDIUVzH1kxOe77PVx9ZWRxU83KBtFHjucecVTQCG6b-ytx-I/s1600/tableftK.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsK a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvz2QnxZzaFcXO1naEcMqJjvljQUXw56Sa1rZBlHg6PV4Pn-sNPAbLk8mYhLbCtrbWJAvAeLB8DPp3UQsF8MW3K9Oq6dO084Wz8RfN_bQObwhloBV8CjhmmcDdKXEh0rh7RcrNTwwYDYY/s1600/tabrightK.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsK a span {float:none;} /* End IE5-Mac hack */ #tabsK a:hover span { color:#FFF; background-position:100% -42px; } #tabsK a:hover { background-position:0% -42px; } #tabsK a:hover span { background-position:100% -42px; } </style> <div id="tabsK"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #20

<style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh73eheuU-yK7gIu1uetUGDvE9VUQg8adehcjLKx0hKe4wATsez9YYR3ZWf6AIEUPdOPpx0EG6IM7lZRMOTsJCFhM2t7h0017fyN23oC8ouxjD8MSRCdWafOgVTZwIl6lWYZmbGrtfypJM/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPdT0o4hNIlwHxK357Ehs4D4HPsbLL5UXhsCqKhjQCMWSjl8oxorJXaGMxR9i2iC4rl5UAX-d02Wq1D7kP1fYgJRfegfOA6MmGybGrIGOKabj26PRrNM3n8V5W01Djc2T8cAMHKPDUY8I/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #21

<style> #tabs3 img { border: none; } #tabs3 { float:left; width:100%; background:#E4E6EB; font: bold 7.5pt Verdana; line-height:normal; } #tabs3 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs3 li { display:inline; margin:0; padding:0; } #tabs3 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEircQtOH8ceF667cec57wZ7_dwec9uYURFfIuFpG7BKkw1LOu36bUZbovjePGTKJlOj7I0fhpiDRtdHlTgq4y0gE74d3U1s8vaNxNEzkO-26KFO_efXWtv_g4lWNB0ugCKUWnW7WLCp988/s1600/tableft3.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs3 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyuodi-K6E6Yvq75rbdohyphenhyphenCjFokWKHTO96ZViSVTpfWDuRMkjqNlx2sNOpa1PXdQiGeyTwss0dWmsR2b3Z1zVglSufsgtzmeMyvNXDdt9eng9OtrjMN7CLXzuGBbdSzxl4Iq7lzCbqiFU/s1600/tabright3.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs3 a span {float:none;} /* End IE5-Mac hack */ #tabs3 a:hover span { color:#FFF; } #tabs3 a:hover { background-position:0% -42px; } #tabs3 a:hover span { background-position:100% -42px; } #tabs3 #current a { background-position:0% -42px; } #tabs3 #current a span { background-position:100% -42px; } </style> <div id="tabs3"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #22

<style> #tabs2 img { border: none; } #tabs2 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #84776B; } #tabs2 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs2 li { display:inline; margin:0; padding:0; } #tabs2 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiShGdudi0MM757e8u_k-lFrff6QpbXD9gQmdfpmiJTcHsrFF2am-R3vPWHHqZ_MnCoQP6Nq2oKPi_pKpEieYIfmY02b3RSjaym50zsoLWkjdbBjJWWLs1iqZpreLoPP_-4ha6RsJ-v3Cg/s1600/tableft2.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs2 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1XOEncM6nQtgp1_ewgmy6pm9In_6sKo2-PfPhr6LzQIybcfzTZT8fHp1ltMN6eofCzNKd1XeMkmLUoDYxZ8xuGzrNUQojjbXLSNuaqb88Ef1xiUfh_JjXEQ1POPlBBPhXCcnbcMIZYbM/s1600/tabright2.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#84776B; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs2 a span {float:none;} /* End IE5-Mac hack */ #tabs2 a:hover span { color:#74675B; } #tabs2 a:hover { background-position:0% -42px; } #tabs2 a:hover span { background-position:100% -42px; } #tabs2 #current a { background-position:0% -42px; } #tabs2 #current a span { background-position:100% -42px; } </style> <div id="tabs2"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #23

<style> .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */ #navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navSquare a:link, #navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <div class="container"> <ul id="navSquare"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #24

No Image Used

<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; 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; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Liddddnk 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Linddddkdd 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Linddddk 7</span></a></li> </ul> </div>

Tabs Menu #25

<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUYQ0Q7yKdnQUyISCNkuouVaGZwf-hLmocALhR5ClXvBBEpYThyphenhyphenP9SeyIVf66bP1T1hT4ceuFqBKa4vWyZN2nNWU5VEsulq3BxX6Jse6PFGQMEe83ZjCqIVJfrHGMt-xw6Pxbwc7S3k34/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY7CDA6ISAtWrESceKSv50LkAlD0k1KQZV1f6S1gdB0QViht4sJAqYp4W34g7ad20-R2JSxHLn5z9VvjrIJF5-UgzYzP_eSHL6zM9y73i_Ag4pap000ss7qjHF29wWjdZppzcz4Td4MOo/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #26

<style> #tabs1 img { border: none; } #tabs1 { float:left; width:100%; background:#F4F7FB; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTJZEWevWlqyXTMIcCMAQjKY-sY5ZSNCerE_IzQ9kMippFkWxSyJHi4M_4BY3IJ0fhsbciezuh0A3OFH68kC8_TYyUZBF9CnJYryCliErNfbyuzVkAs2uYPAjOy4TKALiANObDGcpVvOQ/s1600/tableft1.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVGCcWIJBPSKOCVD5llcrPqLKuK_7IetnjMHvQyRS91alRi2zGj8ZdkvABe5Tm_9l7n2NZKHsBUsor7oNe-D82ZEbgx8Sesxjw98Qb28a48dhsvpORnvTRZURy0yosKZ9CaRoHVIKGi8k/s1600/tabright1.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } #tabs1 #current a { background-position:0% -42px; } #tabs1 #current a span { background-position:100% -42px; } </style> <div id="tabs1"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #27

<style> #tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV8OYPDJcQBVG1qmdihc8l60OsFQ9Q0Bo8RW3oEOc0MyOa7V3LXfttVdoJ-5tnFaV19jNAdj4HhG1iye3-rhfTbf3TlilikoFnjMvypg-_d4qKkYdz7heJ8M0l8cImkYB3-BmQL6tO1BU/s1600/tableft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsMB7TQhJwS_wEaEdZQgqAB3mpZ_PrrMhJlkDWCsP2AOm-d6XJEJwqwEGFJaor9C6s1QcFyU5DLYa5umf4larcKG_AOJoeEHYbf1E_Q0YV78qKfrE4DvHEbg-iMuaEw-Lx8c9I6Cy8_Yw/s1600/tabright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style> <div id="tabs"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #28

<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnPEnI9oRlkgKnIe-MuLw-xXuwUb4Pc4Nkm__plurEaTrOVQ6XMksoRdjLUjyRDCtinpFaFlLMMSThAHIcUysBcRw5HZT5R1cCpKx37HhLP7kHsQ4XNiTmKcdDQBZ0p8MR4Y80hsfjnAo/s1600/tableft5.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjghRkthEoHYIPffoc3Y2FRjYwVhjwARLufvd3g7lQGQNThizEHguMAArJZPAyzzoS-melqivYJJbZ2rNrl-AAtETwPmICsIOtXDu-G5jdnL0SSvX2XxF15WgLKDCecqWzswM8pR3_w5Io/s1600/tabright5.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id="tabs5"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #29

<style> #tabsB { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Sl8pjI3Hfc01wSO67_y0QRxx6-Nr2Q8Ln5n1TPW8EBVaxV9VPgVk73lUs7soga0KPTw6jGLiQWoSX8OxJM1I68Jqib3a1wWtMHtYk9thyjJqFUrvV9jTSuKzXztM9YId3fpOBsSg0ik/s1600/tableftB.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKJdz0V6yvMVU02euR0eFWicJ4GOPbIqVPJd6mSQkTedoG8T1O5aUjGzHRfbjoPR_Bfxza1V8tzn5plkyjkkNCTV9cu5iZcUSdS17fYYCas2-aaPdXtcLbTs6NsEW_xZkUUn02kYSy7yE/s1600/tabrightB.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } </style> <div id="tabsB"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #30

<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpcln6_dNA9B8JR4imMUL_k98FX-DTicMxDcWXt_8_wYbdwuDwPwrRGtrW1E6VWk177tMKJLwEoZmwyQvWlvndm5hHXbL065okcpmcsdXC4IThEAuwEeEN9WwpVWuZdDZN0ctH0rvKYwo/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfCYUpowZXic6vPrmMD3UmN3l5oZPO5-RE-hSHCQ3V7MSxOLcWSH9uy6ZEgY6eg9miSIPwEMXE6k_t7ZeCCB3ZOS4BCvqvoz7rmQQ0gbPstbJMeky_BQFnkNw5_8q4dJY1nrWuu90ma18/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Happy New To All my Readers! I know I could give you no special gift other than my tutorials. This was my last post of year 2009 :>. I thank everyone for making 2009 a memorable year for me. Wishing best of luck to everyone.

Wednesday, December 15, 2010 by Rishikesh · 0

Sunday, November 21, 2010

25 “Vertical” Navigation Menus For Blogger – CSS-HTML Tab Menus

After the release of 30+ Horizontal Navigation Menus, we head forward to a 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,

Go To Blogger > Layout > Edit HTML
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
For Live Demo of Other Navigation Menus Simply use our HTML Editor and Copy and Paste the CSS and HTML code at right areas and then start playing with the code :>>

See Demos With MBT HTML Editor!

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/AVvXsEhiY2VGbk9OHf5BP5gwjfK5w1N2sVDXCXuasHO8GO36iVytSGGobhcYoeDxyWMHnO8qq1oVPfh3EwI8-qlUxk5dJMsl2FaBp9cK0qnL4y71_skM8TXC5YtnHqmWsNdKIyU8_XgEte98Xjo/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiY2VGbk9OHf5BP5gwjfK5w1N2sVDXCXuasHO8GO36iVytSGGobhcYoeDxyWMHnO8qq1oVPfh3EwI8-qlUxk5dJMsl2FaBp9cK0qnL4y71_skM8TXC5YtnHqmWsNdKIyU8_XgEte98Xjo/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/AVvXsEjCrEec-zK8TDvegvIF5UtRC3doBcsaXIqcYNJkB5cXyZxZ2BdubjyVElPZ6gBMU3yXiQ5ROmx0609VLbFKYCbXfMbLznpBmfNAtIY0WKPFW4l9UmvP_t1qoljGGgO99UsmXymBvomWj5Y/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/AVvXsEjCrEec-zK8TDvegvIF5UtRC3doBcsaXIqcYNJkB5cXyZxZ2BdubjyVElPZ6gBMU3yXiQ5ROmx0609VLbFKYCbXfMbLznpBmfNAtIY0WKPFW4l9UmvP_t1qoljGGgO99UsmXymBvomWj5Y/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/AVvXsEgJD-9Zxspe_3GO8mTaZjsijACIIDvUXPOJErEUo9rMnE3gOBlE887gjleIK-0yCugrFzeZMiHx0mzvWXW1wesrWKBZSWHfZvp8UjJNxQ_CS-zHKcDm9ScecRI0w2XGUARIKAy-QSUlKs0/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJD-9Zxspe_3GO8mTaZjsijACIIDvUXPOJErEUo9rMnE3gOBlE887gjleIK-0yCugrFzeZMiHx0mzvWXW1wesrWKBZSWHfZvp8UjJNxQ_CS-zHKcDm9ScecRI0w2XGUARIKAy-QSUlKs0/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/AVvXsEiQJ7a9ZgnXGQ1jYXdE_qTXMd3Yi2iDHOF3JfLNsQJOR6NKaNQhk93uGFR5flZDlrbdQ1yOLtOsTGbklXukcA3ABkj5oS0_NjqCzGW2qTyQcWRjwiMn9c6WR_XkX2R4nq_OeYnVfr1GdSk/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/AVvXsEiQJ7a9ZgnXGQ1jYXdE_qTXMd3Yi2iDHOF3JfLNsQJOR6NKaNQhk93uGFR5flZDlrbdQ1yOLtOsTGbklXukcA3ABkj5oS0_NjqCzGW2qTyQcWRjwiMn9c6WR_XkX2R4nq_OeYnVfr1GdSk/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/AVvXsEjRhyphenhyphen8sAouhR65vwliknVu9h5SM_olOujdVs4NQNWcYZDKQFji2-z-EZ5C3mnu0_5jzq_kI0WyNpYa4p1jtg69WIu4vIn63IVPVsgRJievb6LNKcDnPvwbOTI68nWjqDCJ4OuqkOSoMCGo/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/AVvXsEjRhyphenhyphen8sAouhR65vwliknVu9h5SM_olOujdVs4NQNWcYZDKQFji2-z-EZ5C3mnu0_5jzq_kI0WyNpYa4p1jtg69WIu4vIn63IVPVsgRJievb6LNKcDnPvwbOTI68nWjqDCJ4OuqkOSoMCGo/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/AVvXsEi0Q6FUxtZYZcpQxPFLqQ5hKm3ZwenljZ-YZpoUJVVx6G3AJiadUSMRQ0j8wsQO7oAE10QvGWqe-ZrhshTF1vOKEigDiY8NEAgkicN1RB2xoByywFx64YuUd476T1fv7bokgsAqhpElUzw/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Q6FUxtZYZcpQxPFLqQ5hKm3ZwenljZ-YZpoUJVVx6G3AJiadUSMRQ0j8wsQO7oAE10QvGWqe-ZrhshTF1vOKEigDiY8NEAgkicN1RB2xoByywFx64YuUd476T1fv7bokgsAqhpElUzw/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/AVvXsEga3C6XooilhBMr3HtyBVwAmtz6B0_2uIaiAhI_4cIf5WHewrR-2Bj0k23jbaOlPlcGI1Rq5NIMwU3hE1h4ysPcQCW-x7pITp6cNKTLn4rpzd2vk7Zx2OjrQBM4sCLxjl_wkRQoCr0Mv8o/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/AVvXsEga3C6XooilhBMr3HtyBVwAmtz6B0_2uIaiAhI_4cIf5WHewrR-2Bj0k23jbaOlPlcGI1Rq5NIMwU3hE1h4ysPcQCW-x7pITp6cNKTLn4rpzd2vk7Zx2OjrQBM4sCLxjl_wkRQoCr0Mv8o/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/AVvXsEga3C6XooilhBMr3HtyBVwAmtz6B0_2uIaiAhI_4cIf5WHewrR-2Bj0k23jbaOlPlcGI1Rq5NIMwU3hE1h4ysPcQCW-x7pITp6cNKTLn4rpzd2vk7Zx2OjrQBM4sCLxjl_wkRQoCr0Mv8o/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/AVvXsEixRsWhyphenhyphengXBUqmflfBzQMXWEMp158Gy19KjqSv6ffl5l6ZjOvKH4yjqnLkg1iHY7HWNWTlAAB2wTaOcgYk4Mj-eFt1BE_GpGIZc3kHR_1PyDXadUScjoWIggJ9q5Hnp2bG0efPXyZ1xclc/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/AVvXsEixRsWhyphenhyphengXBUqmflfBzQMXWEMp158Gy19KjqSv6ffl5l6ZjOvKH4yjqnLkg1iHY7HWNWTlAAB2wTaOcgYk4Mj-eFt1BE_GpGIZc3kHR_1PyDXadUScjoWIggJ9q5Hnp2bG0efPXyZ1xclc/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/AVvXsEixRsWhyphenhyphengXBUqmflfBzQMXWEMp158Gy19KjqSv6ffl5l6ZjOvKH4yjqnLkg1iHY7HWNWTlAAB2wTaOcgYk4Mj-eFt1BE_GpGIZc3kHR_1PyDXadUScjoWIggJ9q5Hnp2bG0efPXyZ1xclc/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/AVvXsEgnBnK1ANMii1Fe0EvxRP0ulit123dhbBvX-KkGLO6VdhH5u5ROT_5NC3XzdbR0PjPrMm_VMzjNegfr5AKWfMtvGOe7D5Wja00GUIH7qGUagpy5nfUaALJ1m3OzVFl8VKvS82H0dRyFdJM/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnBnK1ANMii1Fe0EvxRP0ulit123dhbBvX-KkGLO6VdhH5u5ROT_5NC3XzdbR0PjPrMm_VMzjNegfr5AKWfMtvGOe7D5Wja00GUIH7qGUagpy5nfUaALJ1m3OzVFl8VKvS82H0dRyFdJM/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/AVvXsEhmPzXeel9NUwTlggCNprO2hKBSwb5gG20Oy3VMCoozu3ezl-CT1665SZn02JkX9c622E6mcPEf06velxaT3an_rQ459bNUnqdXXE4zJY4tx3TN-YX2EZ9_ufUNS4a_AHuCFNMCTfWuzZE/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmPzXeel9NUwTlggCNprO2hKBSwb5gG20Oy3VMCoozu3ezl-CT1665SZn02JkX9c622E6mcPEf06velxaT3an_rQ459bNUnqdXXE4zJY4tx3TN-YX2EZ9_ufUNS4a_AHuCFNMCTfWuzZE/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/AVvXsEhdIuj9J3DyKM6PNMRo7rla2Ka7qGzzT4LihOOmGpAAAMKEm0iwjaBRUBVoBG-_-Ont8yPM1OrOCfJQtte6DNjnlW78bSvFrJXH9TVycvd-65dsWfXWuBiX_cAO_E-ld1DmIPYw6MKslb0/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/AVvXsEhdIuj9J3DyKM6PNMRo7rla2Ka7qGzzT4LihOOmGpAAAMKEm0iwjaBRUBVoBG-_-Ont8yPM1OrOCfJQtte6DNjnlW78bSvFrJXH9TVycvd-65dsWfXWuBiX_cAO_E-ld1DmIPYw6MKslb0/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/AVvXsEhdIuj9J3DyKM6PNMRo7rla2Ka7qGzzT4LihOOmGpAAAMKEm0iwjaBRUBVoBG-_-Ont8yPM1OrOCfJQtte6DNjnlW78bSvFrJXH9TVycvd-65dsWfXWuBiX_cAO_E-ld1DmIPYw6MKslb0/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/AVvXsEjXCxE6xtVqcpe1FHQm5u3ZEpuPeyrXCmh1c9qyyVOtch3j0XFFPOYboHrNOFfkqIQJf5ADIEmYkLK9U8v97u0qyCe0lA5EdB9d2oeHhzPt8IrAa4pbyAHJPnpYnqMgAFD9GRH0LymI7Ns/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/AVvXsEjXCxE6xtVqcpe1FHQm5u3ZEpuPeyrXCmh1c9qyyVOtch3j0XFFPOYboHrNOFfkqIQJf5ADIEmYkLK9U8v97u0qyCe0lA5EdB9d2oeHhzPt8IrAa4pbyAHJPnpYnqMgAFD9GRH0LymI7Ns/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/AVvXsEjXCxE6xtVqcpe1FHQm5u3ZEpuPeyrXCmh1c9qyyVOtch3j0XFFPOYboHrNOFfkqIQJf5ADIEmYkLK9U8v97u0qyCe0lA5EdB9d2oeHhzPt8IrAa4pbyAHJPnpYnqMgAFD9GRH0LymI7Ns/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/AVvXsEiTfXl2sSdNp-YGRExtS0tkjG4rKixp5MXXPniEi_hs38AB0j20YQLvQgDqRHZ8XFLkDqxRmMmmhEm4UDA1caYM7UkELE_Mg5ztGmfs4GigNwWjXn1SbjGOWFJVPNmzna0IZClItbyEen0/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTfXl2sSdNp-YGRExtS0tkjG4rKixp5MXXPniEi_hs38AB0j20YQLvQgDqRHZ8XFLkDqxRmMmmhEm4UDA1caYM7UkELE_Mg5ztGmfs4GigNwWjXn1SbjGOWFJVPNmzna0IZClItbyEen0/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/AVvXsEijmXqSQnYpDnF4i_1YU5fYx6eBXtKxY5WRbmwNtS_8XgqUfrQS2_Jr991tn2QR-QnHU9SIHz_UB7Gz-McpeirdDvjqRHGT6oSIAhw4sVGGMmuKPWhVPya1wexXVUJJbJA21mKrlatiQz0/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijmXqSQnYpDnF4i_1YU5fYx6eBXtKxY5WRbmwNtS_8XgqUfrQS2_Jr991tn2QR-QnHU9SIHz_UB7Gz-McpeirdDvjqRHGT6oSIAhw4sVGGMmuKPWhVPya1wexXVUJJbJA21mKrlatiQz0/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/AVvXsEhWTeh_dM9RdfQXM82gSq0rz6M5C5jB3sS520odjjlhbXXEqKjcY9ESrDbyb2lGMwgQUGTjtP5c0JyvhJsleJY25lMarqOCZORdyZPPaTDaKs_k4AF6AUk97SimQa4j8tJBfwjs__EFPG0/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWTeh_dM9RdfQXM82gSq0rz6M5C5jB3sS520odjjlhbXXEqKjcY9ESrDbyb2lGMwgQUGTjtP5c0JyvhJsleJY25lMarqOCZORdyZPPaTDaKs_k4AF6AUk97SimQa4j8tJBfwjs__EFPG0/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/AVvXsEhOZvh4ImeCXQuAXkgZg47IU5PhZ0emwWG3OePSVBPpMaPDanLiytVeVnVioJTZwEb69QvKcLybHhchhtOJ_NPYFWB6xZf4S1GDu47EPKidBiCe7fbxWwsuHlAyQvQPa6lOs1ixF3mDqvw/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOZvh4ImeCXQuAXkgZg47IU5PhZ0emwWG3OePSVBPpMaPDanLiytVeVnVioJTZwEb69QvKcLybHhchhtOJ_NPYFWB6xZf4S1GDu47EPKidBiCe7fbxWwsuHlAyQvQPa6lOs1ixF3mDqvw/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/AVvXsEi8_LgA9Ivgy6TtYOU_6zhXswN2QOtpfwHpz2f4Y7JjTwVEHSj8zU2rCQuHytZhuS6sCXZFpCyM_mi42rJ59aWvQvVd3OJ-d4SEidcss-MCijQr_oTs66Z3b__6O5tZjp4qtffq2fxcIPE/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/AVvXsEi8_LgA9Ivgy6TtYOU_6zhXswN2QOtpfwHpz2f4Y7JjTwVEHSj8zU2rCQuHytZhuS6sCXZFpCyM_mi42rJ59aWvQvVd3OJ-d4SEidcss-MCijQr_oTs66Z3b__6O5tZjp4qtffq2fxcIPE/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/AVvXsEi8_LgA9Ivgy6TtYOU_6zhXswN2QOtpfwHpz2f4Y7JjTwVEHSj8zU2rCQuHytZhuS6sCXZFpCyM_mi42rJ59aWvQvVd3OJ-d4SEidcss-MCijQr_oTs66Z3b__6O5tZjp4qtffq2fxcIPE/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/AVvXsEigegWT5l9zGP9pb85ACioAZHE5yuEb-C0iwQ3rcooTHP3MSsAjwsWH_4AuPHnQ5q59RVEZD3AgAFZ1jkpNnvFurA3zludcTB8zlvqx4XfZX7YiudT4kAerMYgh_P3h5OJo8Q2QDQJe5T4/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigegWT5l9zGP9pb85ACioAZHE5yuEb-C0iwQ3rcooTHP3MSsAjwsWH_4AuPHnQ5q59RVEZD3AgAFZ1jkpNnvFurA3zludcTB8zlvqx4XfZX7YiudT4kAerMYgh_P3h5OJo8Q2QDQJe5T4/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/AVvXsEgmBGDHvKv_FUkJp68L12XXXjMnTQFSAw3f6WmH81biY3u-D8SzRPQyZ6Ht_x4Rrdtohg0YMqlbX9cWwjnrMFT83J0QkEuXgbgq8COZx_lf5PRu66Ywzq5c7aKMB0xPF2Yc1hwQqbmuTkQ/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/AVvXsEgmBGDHvKv_FUkJp68L12XXXjMnTQFSAw3f6WmH81biY3u-D8SzRPQyZ6Ht_x4Rrdtohg0YMqlbX9cWwjnrMFT83J0QkEuXgbgq8COZx_lf5PRu66Ywzq5c7aKMB0xPF2Yc1hwQqbmuTkQ/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/AVvXsEgmBGDHvKv_FUkJp68L12XXXjMnTQFSAw3f6WmH81biY3u-D8SzRPQyZ6Ht_x4Rrdtohg0YMqlbX9cWwjnrMFT83J0QkEuXgbgq8COZx_lf5PRu66Ywzq5c7aKMB0xPF2Yc1hwQqbmuTkQ/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/AVvXsEg6eWPU_TAXfQSqoiOiKgD_h6NvKowaQIaAF_7zjIgEqGgPm4XoEafU3ZFoNFnOtyXEY-DeZUY62xlLCVRWYlMzJJpDvTI95wY-QCHSl0Wg2aGHSC0rwjutHDTTtufsKsaQZRXpuW3ukxo/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6eWPU_TAXfQSqoiOiKgD_h6NvKowaQIaAF_7zjIgEqGgPm4XoEafU3ZFoNFnOtyXEY-DeZUY62xlLCVRWYlMzJJpDvTI95wY-QCHSl0Wg2aGHSC0rwjutHDTTtufsKsaQZRXpuW3ukxo/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/AVvXsEhYrPTeGZESjvE38QxcxHJxL3IL8HiUaQvvwNwkNLJ01XqI2oQdJs70Kb0XyH-kgmyeym7Ev12RFjKn92lN80bKCNO5mhZNbqlWIMUv3N2wSLxN1RZj4ZWUsNltC2Jj7LKWwiA1AOlJm7w/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYrPTeGZESjvE38QxcxHJxL3IL8HiUaQvvwNwkNLJ01XqI2oQdJs70Kb0XyH-kgmyeym7Ev12RFjKn92lN80bKCNO5mhZNbqlWIMUv3N2wSLxN1RZj4ZWUsNltC2Jj7LKWwiA1AOlJm7w/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/AVvXsEgHXa6zK4-zIU6hKiHEcmmbzQAEvxPzdcUdZrmuGIe01hxXR744eyBNIrVruWHdQMasKCzc2u7wGt2vk42x6dHTck99AAqyW2kAkfE_z9d64HEbQiGSLn8qqS7HnL-MN0SpTeQlAxGsLxs/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHXa6zK4-zIU6hKiHEcmmbzQAEvxPzdcUdZrmuGIe01hxXR744eyBNIrVruWHdQMasKCzc2u7wGt2vk42x6dHTck99AAqyW2kAkfE_z9d64HEbQiGSLn8qqS7HnL-MN0SpTeQlAxGsLxs/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>

That’s All!
Hope you have enjoyed the post. Feel free to ask any question related to these navigation menus. I am happy I fulfilled my promise of publishing this post :)

Sunday, November 21, 2010 by Rishikesh · 0

Monday, June 20, 2011

Learn CSS, HTML and JavaScript Offline! using MBT HTML Editor

Downloading Instructions

Instructions For Using MBT HTML EDITOR

Playing With A Code

How To Post HTML Code In Blogger Comments Form?

Wednesday, December 15, 2010

30+ “Horizontal” Navigation Menus For Blogger With CSS & HTML Codes

How To Add These Navigation Menus To Blogger

MBT Navigation Menu #1

MBT Navigation Menu #2

MBT Navigation Menu #3

MBT Navigation Menu #4

MBT Navigation Menu #5

Tabs Menu #6

Tabs Menu #7

Tabs Menu #8

Tabs Menu #9

Tabs Menu #10

Tabs Menu #11

Tabs Menu #12

Tabs Menu #13

Tabs Menu #14

Tabs Menu #15

Tabs Menu #16

Tabs Menu #17

Tabs Menu #18

Tabs Menu #19

Tabs Menu #20

Tabs Menu #21

Tabs Menu #22

Tabs Menu #23

Tabs Menu #24

Tabs Menu #25

Tabs Menu #26

Tabs Menu #27

Tabs Menu #28

Tabs Menu #29

Tabs Menu #30

Sunday, November 21, 2010

25 “Vertical” Navigation Menus For Blogger – CSS-HTML Tab Menus

How To Add A Vertical Navigation CSS Menu To Blogger?

Editing The Links In The Navigation Menu

Navigation Menu #1

Navigation Menu #2

Navigation Menu #3

Navigation Menu #4

Navigation Menu #5

Navigation Menu #6

Navigation Menu #7

Navigation Menu #8

Navigation Menu #9

Navigation Menu #10

Navigation Menu #11

Navigation Menu #12

Navigation Menu #13

Navigation Menu #14

Navigation Menu #15

Navigation Menu #16

Navigation Menu #17

Navigation Menu #18

Navigation Menu #19

Navigation Menu #20

Navigation Menu #21

Navigation Menu #22

Navigation Menu #23

Navigation Menu #24

Navigation Menu #25

Popular Posts

Tags

Recent Activity

Total Pageviews

Disclaimer