blogging rocks the world: blogger templates

Showing posts with label blogger templates. Show all posts

Monday 13 August 2012

set backgrounds in ads like chitika

15:22 By Unknown ads, blogger, blogger templates, blogger tips and tricks No comments

<table align="center" width="your_image_width" height="your_image_height" border="0" background="your_image_path">
<tr><td width="your_image_width" height="your_image_height">
<div align="center">
Put Ads_code_here
</div></td></tr>
</table>

Edit the above code properly as below..

Replace Put_Google_Ads_code_here with your adsense code.

Replace your_image_width with the width of your image

Replace your_image_height with the height of your image

Replace your_image_path with your image file's url

After editing put this code in the place you need your ads to appear(with background image)

When you choose the background colour and border colour in Adsense for content setup please try to use colours matching with your back ground image..

touch-me-sharing-widget-for-blogger

07:58 By Unknown blogger, blogger templates, blogger tips and tricks, gadgets, widgets No comments

The rapid advancement and development of Social Media and growing interest of people in social networking sites has given birth to dozens of social sharing tools and services. Web masters are getting addicted to these tools because unlike organic traffic from search engines, web traffic from social channels have overtaken search traffic. Bloggers today depend largely on networks like Facebook, Google plus and twitter to drive traffic to their blogs. These tools are good only if they can attract a visitor to bookmark and share your content. From your website quality content till your blog design, every single bit counts in turning a visitor into a follower. To help you with your dream of increasing fans and readers we bring you "Touch Me". Its named such due to its appealing look that forces a visitor to roll hover the cursor over the icons and hit follow! :) This gadget is neatly structured using buttons from popular services like Google Plus, Facebook, Twitter and RSS. We have coded it neatly using basic HTML and some spicy CSS styles.

Live Demo

Please take less than a minute to like and bookmark this page as a token of favor for our small effort. :)

Where should you add it?

Its is standard practice to add social counters inside posts and social sharing buttons in a sidebar. I would therefore advise that you add this widget towards the top right section of your blog above all ads and gadgets.

Read my article on How to force a visitor to subscribe in order to understand why this location is the best.

Add it to blogger

I am sharing below the steps for BlogSpot users. If you are a wordpress or Joomla user or running a normal website then you just need to copy and paste the following code inside your templates.

Following are the steps for blogger users

Go To Blogger > Layout
Choose add a gadget
Select HTML/JavaScript
Paste the following code inside it,

<style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;

}

.touchme a.googleplus {
background-position: 0px -58px;

}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}

.touchme a.twitter {
background-position: 0px -290px;

}
.touchme a.twitter:hover {
background-position: 0px -232px;

}
.touchme a.facebook {
background-position: 0px -406px;

}
.touchme a.facebook:hover {
background-position: 0px -348px;

}

.touchme a.rss {
background-position: 0px -174px;

}
.touchme a.rss:hover {
background-position: 0px -116px;

}

</style>

<div class='touchme'>


<a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a>


<a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='external nofollow' target='_blank'></a>


<a class='facebook' href="YOUR FACEBOOK LINK" rel='external nofollow' target='_blank'></a>


<a class='twitter' href="YOUR TWITTER LINK" rel='external nofollow' target='_blank' ></a>

</div>

Please fill these requirements:

Replace YOUR RSS LINK with your Feed burner link.
Replace YOUR GOOGLE PROFILE LINK with your Google+ URL
Replace YOUR FACEBOOK LINK with your Facebook URL
Replace YOUR TWITTER LINK with your Twitter Profile URL

5. Hit save and you are all done!

Visit your blog to see it working just perfectly. Move your cursor over the icons and enjoy playing!

Credits

The icons used in the widget are designed by Umar Irshad from Design Kindle. You are requested to link back to this page if you wish to share this gadget with your audience.

-============Credits===============-

myblogger tricks

top-3-beatifull-backgrouds-for-stylish-blogs

09:06 By Unknown blogger, blogger templates, gadgets No comments

jquery-slideshow-in-dropdow-menu

02:32 By Unknown blogger, blogger templates, blogger tips and tricks, gadgets, jquery No comments

How it works?

I have made the steps extremely simple so that even beginners may love to implement this modification inside their blogs or websites. We just need to create two CSS classes and insert them inside the link list tags of the menu and then finally attach the necessary call functions to trigger the effect. Follow these simple steps for blogger:

Go to Blogger > Template
Backup your template
Click Edit HTML
Search for <head>
just below it paste the following code.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Note: If you have previously added the jquery link then you remove the previous one and use this update done instead. Your old widgets will still work.

6. Next search for ]]></b:skin> and just above it paste the following CSS classes

.mbt_navigation {
        position:absolute;
        display:none;
    }

    .mbt_navigation li {
        clear:both;
    }

7. Now the last part. Search your menu code and to the part from where the drop down list starts, add the class dropdown1 to the main tab (li tag) and add mbt_navigation to the ul tag of the column. Please see the our code to get an idea and carefully observe the locations of the two classes. We have replaced links with # symbol for simplicity.

<li class='dropdown1'><a href='#'>Tools »</a>
<ul class='mbt_navigation'>
<li><a href='#'>HTML Editor</a></li>
<li><a href='#'>Multiple SITEMAP Generator</a></li>
<li><a href='#'>Encode HTML Characters</a></li>
<li><a href='#'>Count Characters</a></li>

<li><a href='#'>Meta Tag Generator</a></li>

<li><a href='#'>Color Code Generator</a></li>

8. Finally just after the entire HTML code of your Menu (where your menu ends, it can either be </ul> or </div> depending on your menu code), paste the following code:

<script type='text/javascript'>
            // Wait for the page and all the DOM to be fully loaded


                    // Add the 'hover' event listener to our drop down class
            $('.dropdown1').hover(function() {
                            // When the event is triggered, grab the current element 'this' and
                            // find it's children '.sub_navigation1' and display/hide them
                $(this).find('.mbt_navigation').slideToggle();
            });

    </script>

9. Save your template and you are all done!

bussiness-solutions-template-for-blogger

12:58 By Unknown blogger, blogger templates No comments

769 Downloads 1,094 views

Features:
Instructions:	Template Settings / How to use this template
Template author:	ChicaBlogger
Description:	Business Solutions is a free blogger template with 2 columns, right sidebar, exclusive design for Blogger, space for ads, footer columns, slideshow, social icons and neutral colors. Excellent layout for blogs about business. Download Business Solutions for free in BTemplates.
Rating	3.3 out of 5 based on 6 bloggers.
Compatible with:	FFIEChrome
Share:

30-amazing-vertical-menu's-for-blogger

12:55 By Unknown blogger, blogger templates, blogger tips and tricks No comments

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 :>>

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/AVvXsEjF4l5B0N-iQZuMWTQ-LirEDu32siRXJq7iwCtv4kbqe2_LADQ7q35QKavZG3udGA1EM9WG8m12LuOMfdoavDNXaNgIzueWRW7BAssYMmmLQV1SkR95dr0Jz5wIk6oM-t77qFoGDdMIx4I/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF4l5B0N-iQZuMWTQ-LirEDu32siRXJq7iwCtv4kbqe2_LADQ7q35QKavZG3udGA1EM9WG8m12LuOMfdoavDNXaNgIzueWRW7BAssYMmmLQV1SkR95dr0Jz5wIk6oM-t77qFoGDdMIx4I/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/AVvXsEh8Bkb663v1YVICkNWlcF07SJOatnBJfAV69eK-mbF0ZTorqpInLQH-J1ae8FxsQub0NfM0QtLXWKHCgSg8sujLR45ou7N1MNzSpo77IqCr_cXYaclAJdy98Qdnp2Z8SQ_zmpE7TDa1Lrs/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/AVvXsEh8Bkb663v1YVICkNWlcF07SJOatnBJfAV69eK-mbF0ZTorqpInLQH-J1ae8FxsQub0NfM0QtLXWKHCgSg8sujLR45ou7N1MNzSpo77IqCr_cXYaclAJdy98Qdnp2Z8SQ_zmpE7TDa1Lrs/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/AVvXsEjd1ourafkuVusPyF2Z-ujIh9R2urB213eSAMf_agvtGCIxcKGd_I-WBe5KCZBHDukvMNwX_mjcg225GHaOraL0zFi8GjdgHwjffVItvmB4ZYZuufep1znmAe4UU-RyrdDMepzFGao24b8/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd1ourafkuVusPyF2Z-ujIh9R2urB213eSAMf_agvtGCIxcKGd_I-WBe5KCZBHDukvMNwX_mjcg225GHaOraL0zFi8GjdgHwjffVItvmB4ZYZuufep1znmAe4UU-RyrdDMepzFGao24b8/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/AVvXsEjQ_39DnmNYFQ6gWQB9X5q9GBp3Eg4GHuGbX6qm9ZP_nTtuQDYzq0q6dY46ccn-8_fjp7ZIJy5H4RXq1bK6_cF43BU2hXJSjDciHvgHRT0t1OnQnKRAu3S539tCUFHKLCd3C2VNC8EaxSQ/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/AVvXsEjQ_39DnmNYFQ6gWQB9X5q9GBp3Eg4GHuGbX6qm9ZP_nTtuQDYzq0q6dY46ccn-8_fjp7ZIJy5H4RXq1bK6_cF43BU2hXJSjDciHvgHRT0t1OnQnKRAu3S539tCUFHKLCd3C2VNC8EaxSQ/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/AVvXsEjTvBYLgt2aVeAVPk7Z9RV81RKD4Dnw4DCKRPqXxl4Ecg9BUMbOLKEXTu-kSNBHBASyQBqCgaO1ivYwn454x_CHLFgtGpXTd-n3wUoZW6kwIzVsABO1jszoxWZsvFzURT33BrRrruyNFu0/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/AVvXsEjTvBYLgt2aVeAVPk7Z9RV81RKD4Dnw4DCKRPqXxl4Ecg9BUMbOLKEXTu-kSNBHBASyQBqCgaO1ivYwn454x_CHLFgtGpXTd-n3wUoZW6kwIzVsABO1jszoxWZsvFzURT33BrRrruyNFu0/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/AVvXsEiDO5Cc_XgitewfhT-Ln66fcMJlSiUqBsuvciOKrA2m6Z97CyoT3sbfQuM1sANk8ydzZRgxP4WmVmuzYUN6XkSMx8wO1N5Nudx6lsKmT9Ji0ekAq-XjxUrVuVl1FpgwkDpW3b1o83ihjK0/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDO5Cc_XgitewfhT-Ln66fcMJlSiUqBsuvciOKrA2m6Z97CyoT3sbfQuM1sANk8ydzZRgxP4WmVmuzYUN6XkSMx8wO1N5Nudx6lsKmT9Ji0ekAq-XjxUrVuVl1FpgwkDpW3b1o83ihjK0/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/AVvXsEhajhdgYGBPTVk2JUhQLlh7Y6TZKnUCbMDIQKXCPD65rddY3FD70a241N89frFiB0Zx6Aw9CFhcoZtmOYIicin4DdDKRt1zx5CY-FFzgSMcXfKfxU3EtdL9QkwtXjwmgCA7cTJbfPVTGIM/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/AVvXsEhajhdgYGBPTVk2JUhQLlh7Y6TZKnUCbMDIQKXCPD65rddY3FD70a241N89frFiB0Zx6Aw9CFhcoZtmOYIicin4DdDKRt1zx5CY-FFzgSMcXfKfxU3EtdL9QkwtXjwmgCA7cTJbfPVTGIM/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/AVvXsEhajhdgYGBPTVk2JUhQLlh7Y6TZKnUCbMDIQKXCPD65rddY3FD70a241N89frFiB0Zx6Aw9CFhcoZtmOYIicin4DdDKRt1zx5CY-FFzgSMcXfKfxU3EtdL9QkwtXjwmgCA7cTJbfPVTGIM/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/AVvXsEjzxD_0cQkjet_OeVXDlOolgQl7Fx2UYJW_zFA5zbb7mB1NfwiWTKoXwcDd3frXNsUKymRb9q62-JDBTV7AHN3RW57N9I6qz-6MrX-YIYAHNrDwMSHUCFOeguLTpCaRMMTscKZav3HXMzg/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/AVvXsEjzxD_0cQkjet_OeVXDlOolgQl7Fx2UYJW_zFA5zbb7mB1NfwiWTKoXwcDd3frXNsUKymRb9q62-JDBTV7AHN3RW57N9I6qz-6MrX-YIYAHNrDwMSHUCFOeguLTpCaRMMTscKZav3HXMzg/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/AVvXsEjzxD_0cQkjet_OeVXDlOolgQl7Fx2UYJW_zFA5zbb7mB1NfwiWTKoXwcDd3frXNsUKymRb9q62-JDBTV7AHN3RW57N9I6qz-6MrX-YIYAHNrDwMSHUCFOeguLTpCaRMMTscKZav3HXMzg/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/AVvXsEhW9FgeN3Jnn0YzoyKqOvD9mB_l4097DF1ogbZ2XmwU8h1N4IFm43fGl3-D6dWj7q1suRr6dYcG3py08jrMZWUl_CEjSAMxxUlQi00vRat1C2FLuzR9_yMXOVy8gMALaY692HaXa-f3O0o/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW9FgeN3Jnn0YzoyKqOvD9mB_l4097DF1ogbZ2XmwU8h1N4IFm43fGl3-D6dWj7q1suRr6dYcG3py08jrMZWUl_CEjSAMxxUlQi00vRat1C2FLuzR9_yMXOVy8gMALaY692HaXa-f3O0o/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/AVvXsEil2SF_wOiYQIwen0IvNjPTHE8DHZegNYQ5ENpKHtr8ycpL4MRu5L04olHjIKSiztEFtQq8TTDLfVYJ8B21Xn7b54g5H33PiBq2JR0BJ4R7jMCouFnYEtFm_UgTYKnaRSSE5Qbas18ZdZ8/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil2SF_wOiYQIwen0IvNjPTHE8DHZegNYQ5ENpKHtr8ycpL4MRu5L04olHjIKSiztEFtQq8TTDLfVYJ8B21Xn7b54g5H33PiBq2JR0BJ4R7jMCouFnYEtFm_UgTYKnaRSSE5Qbas18ZdZ8/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/AVvXsEhD7Ev18yTQHJDffrKVF2yRYt7j2nzBJLMcYlBKV1_Ph09KwYXZZYuU373evo5L8MqhAmmLuvsEnWCZU1UKhYBlXdDUFI87SW758mGyNsaSCDHhmPwld1ViQ2igDpsVdsmPJhHY_fedeCg/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/AVvXsEhD7Ev18yTQHJDffrKVF2yRYt7j2nzBJLMcYlBKV1_Ph09KwYXZZYuU373evo5L8MqhAmmLuvsEnWCZU1UKhYBlXdDUFI87SW758mGyNsaSCDHhmPwld1ViQ2igDpsVdsmPJhHY_fedeCg/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/AVvXsEhD7Ev18yTQHJDffrKVF2yRYt7j2nzBJLMcYlBKV1_Ph09KwYXZZYuU373evo5L8MqhAmmLuvsEnWCZU1UKhYBlXdDUFI87SW758mGyNsaSCDHhmPwld1ViQ2igDpsVdsmPJhHY_fedeCg/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/AVvXsEiEWCCVsvOUZOQRsWnn-oKPgl8rBP_capp8nFQYq3A90DyABdp208S6Js5MFe_58w3C60VK8Ryl8_DVLgosgg5Xxh2xwf31dJuTC45Oi3q26-l9oD69TrMYzJ5yCHEaTZv0YQueIrQoQTs/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/AVvXsEiEWCCVsvOUZOQRsWnn-oKPgl8rBP_capp8nFQYq3A90DyABdp208S6Js5MFe_58w3C60VK8Ryl8_DVLgosgg5Xxh2xwf31dJuTC45Oi3q26-l9oD69TrMYzJ5yCHEaTZv0YQueIrQoQTs/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/AVvXsEiEWCCVsvOUZOQRsWnn-oKPgl8rBP_capp8nFQYq3A90DyABdp208S6Js5MFe_58w3C60VK8Ryl8_DVLgosgg5Xxh2xwf31dJuTC45Oi3q26-l9oD69TrMYzJ5yCHEaTZv0YQueIrQoQTs/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/AVvXsEgSPe4ZfV2CwW6-J-tMzem-tWLr09fZ3imB8hBxSRABrV7KdImGQT6tWVpS86jrpMt0FcII3VlNPHrlCKQbjaKf4uDLZheAIsY3tClYtFxrovPwkGEj52zY5K0wO9pmeJOHO5YVio9ihSY/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSPe4ZfV2CwW6-J-tMzem-tWLr09fZ3imB8hBxSRABrV7KdImGQT6tWVpS86jrpMt0FcII3VlNPHrlCKQbjaKf4uDLZheAIsY3tClYtFxrovPwkGEj52zY5K0wO9pmeJOHO5YVio9ihSY/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/AVvXsEhG4vKfhyimqbWir3Fipr8ECpNrfwXY_Q-U2lkFNd48dIBxJskCaq2YXXfe1Qb1I_J7lnb2Gt3aHjjc5E4ucNljk0HNIORaBA7lEgGXBSttY_6VVVdHme_PwPOZFavqZjAm8LjMdJB_Maw/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG4vKfhyimqbWir3Fipr8ECpNrfwXY_Q-U2lkFNd48dIBxJskCaq2YXXfe1Qb1I_J7lnb2Gt3aHjjc5E4ucNljk0HNIORaBA7lEgGXBSttY_6VVVdHme_PwPOZFavqZjAm8LjMdJB_Maw/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/AVvXsEhHtmB2uErgCQtengJuhPNdsPOgWJOrHOCo5FzooRl_FI3utuS-jZStzOSiJBWYTP2X7pE_NVkItq7iskubXn5wR_EHwtBzmF_RE0q9u4LWANW71eKz_b_sGDP3c5IkeURoPigS7BFtw9U/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHtmB2uErgCQtengJuhPNdsPOgWJOrHOCo5FzooRl_FI3utuS-jZStzOSiJBWYTP2X7pE_NVkItq7iskubXn5wR_EHwtBzmF_RE0q9u4LWANW71eKz_b_sGDP3c5IkeURoPigS7BFtw9U/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/AVvXsEgqxygr_9m1D0eMeuEfi8tDs9nrPpGIB-NqwExx_a5x5v89vR3CNiNyxE5HuZxEcjOCG3but0rM0e16yLjYM_MmUQnIhRDu9dGVrpbq4TGR8OBRptkIt9kk0c3kMAnldVEN9w8wi8uLrLU/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqxygr_9m1D0eMeuEfi8tDs9nrPpGIB-NqwExx_a5x5v89vR3CNiNyxE5HuZxEcjOCG3but0rM0e16yLjYM_MmUQnIhRDu9dGVrpbq4TGR8OBRptkIt9kk0c3kMAnldVEN9w8wi8uLrLU/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/AVvXsEgRFizc-La-o3PP9aSkN7FPI75QTRlKvnyCwEqdjkOBPCwL4jyIAMHHOUbHmekL5niTzkcMpUyFJ92u52mBgsH2TwV9kPXQP_At65a2ek2E52zmZMxZA1Pu8O5KGEs-CWu9Vm2vAnnmeCc/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/AVvXsEgRFizc-La-o3PP9aSkN7FPI75QTRlKvnyCwEqdjkOBPCwL4jyIAMHHOUbHmekL5niTzkcMpUyFJ92u52mBgsH2TwV9kPXQP_At65a2ek2E52zmZMxZA1Pu8O5KGEs-CWu9Vm2vAnnmeCc/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/AVvXsEgRFizc-La-o3PP9aSkN7FPI75QTRlKvnyCwEqdjkOBPCwL4jyIAMHHOUbHmekL5niTzkcMpUyFJ92u52mBgsH2TwV9kPXQP_At65a2ek2E52zmZMxZA1Pu8O5KGEs-CWu9Vm2vAnnmeCc/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/AVvXsEg5ydtNKBj4mK1gxTYNd0gOTy4XGWtdznd2zGcd6hkpazIeon8U4_ie75Q3fpbmcqKvnJ1c75dn_AZRQre58uvbkeHeEpLLYaor_RBOdKYwmsxrRZ5X6wha0u1Cgnos-mtnVDhhmPbGXUg/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ydtNKBj4mK1gxTYNd0gOTy4XGWtdznd2zGcd6hkpazIeon8U4_ie75Q3fpbmcqKvnJ1c75dn_AZRQre58uvbkeHeEpLLYaor_RBOdKYwmsxrRZ5X6wha0u1Cgnos-mtnVDhhmPbGXUg/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/AVvXsEg7axmOuSaJ3HErmcPH8ngFFg1ZEoBM7ZNaklHIAi_NT5x0R-A6uCbvYszKDHuhQBP7V4ubaALECgRuBmtYORwt_BU-_ntEWim5DMxzCTjDkHKjFAxWFrMFeZSRUojSVsOToyw7R1ka3nE/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/AVvXsEg7axmOuSaJ3HErmcPH8ngFFg1ZEoBM7ZNaklHIAi_NT5x0R-A6uCbvYszKDHuhQBP7V4ubaALECgRuBmtYORwt_BU-_ntEWim5DMxzCTjDkHKjFAxWFrMFeZSRUojSVsOToyw7R1ka3nE/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/AVvXsEg7axmOuSaJ3HErmcPH8ngFFg1ZEoBM7ZNaklHIAi_NT5x0R-A6uCbvYszKDHuhQBP7V4ubaALECgRuBmtYORwt_BU-_ntEWim5DMxzCTjDkHKjFAxWFrMFeZSRUojSVsOToyw7R1ka3nE/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/AVvXsEhyidp1mQFK-AOQxYbQO_pJtu9S41AXJe96PQGUhSeM9VbgZ881cq_gwtdxNdELywVxc7dXTMEErJ5MLuM6bwXlamPlfqzoAO7nrHk0UfOMhTbQQ3Yy3wE39vM2cM0yL5kGeAOnjRT8RWE/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyidp1mQFK-AOQxYbQO_pJtu9S41AXJe96PQGUhSeM9VbgZ881cq_gwtdxNdELywVxc7dXTMEErJ5MLuM6bwXlamPlfqzoAO7nrHk0UfOMhTbQQ3Yy3wE39vM2cM0yL5kGeAOnjRT8RWE/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/AVvXsEi1OzLkdzr2IKB_384KxsZAyWNsHfsGyZ7D7qSQBOKy652x2-VpTaHgFmTXhUU7_OseRUb9MT-oZc0pdi20Epkvgp1kD58Ifx0mh6lqt4JtCfp32cJXVB7oM5u22DqYgxnA4GnUZS1b-7A/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1OzLkdzr2IKB_384KxsZAyWNsHfsGyZ7D7qSQBOKy652x2-VpTaHgFmTXhUU7_OseRUb9MT-oZc0pdi20Epkvgp1kD58Ifx0mh6lqt4JtCfp32cJXVB7oM5u22DqYgxnA4GnUZS1b-7A/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/AVvXsEjuYDOxRz6fbg4hsym7Xp9hJUgYKkAb-hdJ31N_NFxoslbubNHkBQn05C48k1dGvUSOa3wjCIikx1c8Kg1yrw6lJICdFPZZZp7Xvn7S-aGL5-9e9HkQ1WhCO8N8yGU4udcYWK8xEsbMDGc/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuYDOxRz6fbg4hsym7Xp9hJUgYKkAb-hdJ31N_NFxoslbubNHkBQn05C48k1dGvUSOa3wjCIikx1c8Kg1yrw6lJICdFPZZZp7Xvn7S-aGL5-9e9HkQ1WhCO8N8yGU4udcYWK8xEsbMDGc/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!