blogging rocks the world

Friday 8 June 2012

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

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

social-sharing-widget-for-blogger

02:34 By Unknown

The Social networking sites growing traffic is indirectly to webmasters themselves. the more they receive traffic the more visitors we receive when people share you content with friends and colleagues. The widget today consists of Facebook, Twitter, StumbleUpon box counters along with Addthis Counter which makes it a complete package of social media sharing buttons. To Add this widget to your blogspot blogs kindly follow the steps mentioned below.

Live Demo

Add Social Share Widget To Blogger

Go To Blogger > Design > Edit HTML
Backup your template
Check the "Expand Widgets Templates" Box
Search for <data:post.body>
Just above it paste the code below,

<b:if cond='data:blog.pageType == "item"'>

<div align='right'><table border='0' cellpadding='2' cellspacing='0' width='150'><tbody>
    <tr>
      <td valign='top'>    <script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</td>

      <td valign='top'>   <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></td>
    </tr>

    <tr>
      <td valign='top'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </td>

      <td valign='top'>

<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de39fde7c998f6e' type='text/javascript'/>

</td>
    </tr>
</tbody></table></div></b:if>

If you wish to align the widget to left then replace right with left

6. Hit Save and you are done!

Let me know if you needed any help :>

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!

125-x-125-banners-for-blogger-advertise-here

03:42 By Unknown blogger, blogger tips and tricks No comments

Early this morning I tried to create some tables using simple HTML. Remarkably I arrived at a really easy and well optimized code that could be used to show your 125 by 125 Ad banners just like the one on my sidebar. This widget is named “125 by 125 Ad Banner Widget”

See an example below,

125 by 125 Ad Banners Widget (1)

Here is the code to be pasted in your HTML/JavaScript Widget,

<div align="center">
<table border="0" cellpadding="2" cellspacing="6" width="265"bgcolor="#ffffff">
<tbody><tr>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
</tr>
<tr>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
</tr>

</tbody></table>

<table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody>
      <tr>
       <td><center><a href="URL OF ADVERTISER" rel="nofollow"><img width="265" height="37" border="0" alt="Advertise Now!" src="URL OF BANNER’S IMAGE" /></a></center></td>
      </tr>

    </tbody></table>

</div>

Now make the following changes,
1. Replace URL OF ADVERTISER with the website link of the advertiser
2. Replace URL OF BANNER’S IMAGE with the Image link of the Advertiser’s banner
3. Replace AD DESCRIPTION with some information related to the Ad. The description appears when some hovers his mouse cursor over the banner.
4. If you want to increase the distance between the ad blocks then adjust width="265" . By default 265 is the minimum width of this banner widget. You can’t further decrease the width.

If you want to increase the number of rows of this ad widget and want to add two other Ad blocks i.e 6 ad blocks. Then simply copy paste the code below just above</tbody></table>

<tr>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
</tr>

If you want to have a more fancy Ad widget like the one below,

125 by 125 Ad Banners Widget (2)

then copy and paste the code below in your HTML/Javascript Widget

best wordpress plugins ever

01:35 By haseeb malik wordpress, wordpress plugins No comments

W3 Total Cache The ultimate swiss-army knife of caching, from the basic page caching (keeping a static copy of the page), to CSS/JS/HTML minification (making your files smaller), as well as handling uploads to a Content Delivery Network. Download \| Plugin Site	WP-SuperCache If W3TC is too much for you, SuperCache is the answer. Very simply, it makes static HTML files to serve users, and much fewer settings to break. Download \| Plugin Site
Backup Buddy Premium Expensive, but the only plugin that can truly handle both file and database backups easily. Only for pro-bloggers though at that price, but a license lasts a lifetime. ($75 for 2 site license) Purchase	WP-DB Backup Does what it says on the tin – backs up your database. However, certainly not an easy solution and only works with core tables – so plugin data is lost. Download
Vaultpress Premium Another premium backup service from the guys that created WordPress, so you know it’s rock solid. ($15 per month per site) Signup	CloudFlare Caching Service Though not really a plugin, this is a free service that works fantastically with WordPress to reduce the amount of spam requests for your page and cache certain resources in local CDNs around the world. Results in significant speed increases. Well worth it but requires you to adjust the name servers for your domain so can be a little tricky to set up. Signup
WP-Optimize Optimizes the database by running the optimize SQL command, removing post revisions, spam and unapproved comments. It’s essential if you don’t manually manage your database or run your own optimization scripts. Also includes functionality to rename users, useful for changing the default admin user. Download \| Plugin Site	Secure WP From the WebSite Defender guys, this gives you a thorough security check and make a number of small adjustments to harden your Wp install, such as hiding the version number. Also available as an online service. Download \| Plugin Site
Redirection Monitor your site 404 errors and create simple 301 redirects easy to keep the Google link juice flowing and your readers free from 404 pages. Find what’s 404ing, redirect it, easy. Download	Wassup Wassup gives you a full stats dashboard and even real-time monitoring of visitor activity, without needing an external service like WordPress Stats or Google Analytics. Download
Broken Link Checker Dealing with broken links can be pain if you’re waiting for readers to report them – get ahead of the game with this plugin and automatically check all the sites you’ve linked to before they become a problem. Download

Search Engine Optimisation

WordPress SEO by Yoast Widely regarded as the SEO plugin for WordPress. It has an extensive feature set and rave reviews. Give it a whirl, there are alternatives though. Includes XML sitemap features. Download \| Plugin Site	SEO Ultimate Another extensive feature set – this one has a 404 error tracker and well as link cloaking for your affiliate links, as well as the standard features. Each module can be disabled as required, so scales with your needs. Quite heavy when fully enabled though. Download \| Plugin Site
All-In-One SEO A basic set of features, but still a very popular choice for handling SEO concerns. Download	Google XML Sitemaps Creates a site map for you to submit to Google and automatically updates it when you post new content. Essential for getting indexed quickly and accurately. Download \| Plugin Site
SEO Friendly Images Adds ALT and TITLE meta tags to your images so you can start getting valuable Google Images traffic. Download	SEO Slugs Makes your permalinks shorter by removing unnecessary common words such as a/the/or, resulting in shorter URLs and a better rank. This functionality is built into SEO Ultimate but not WordPress SEO, so get an SEO plugin first then see if you need this one too. Download \| Plugin Site

Social and Commenting

Thank Me Later Automatically sends a follow-up email to anyone who leaves a comment at your blog, thanking them for taking the time to comment and encouraging follow up visits. Download \| Plugin Site	Disqus Commenting A full replacement comment system for WordPress offering a range of login options, share buttons, and serious spam protection. Syncs with your WordPress database to ensure you don’t lose any should you decide it’s not for you. Restricts your ability to add other commenting functionality and plugins though, beyond what Disqus provides. Download \| Plugin Site
CommentLuv Automatically inserts a link to the commenter’s latest blog post when they enter a comment (if they provide a website address of course). Superb way to encourage more comments, though also liable to encourage worthless comments posted just for the link. Download \| Plugin Site	Digg Digg Full set of social sharing buttons in a variety of styles – a vertical floating box is usually quite popular. Download
ShareBar Fewer options, but simpler and very attractive alternative for adding a set of vertical sharing buttons which moves when the user scrolls. Download \| Plugin Site	Sexy Bookmarks A unique style and customisable set of social bookmarking buttons with a huge range of services included. Quite recognizable by readers who are fans of bookmark services. Download \| Plugin Site
Akismet Comes with WordPress, but if you haven’t activated and added an API key yet, you’re missing out. It really does stop the hordes of spam comments that come every hour. Download \| Get an API key	Follow me Creates a persistent slide-on sidebar widget you can fill with links to all your social profiles. Essential if you have a lot of accounts, but for one or two, just paste them onto a regular text sidebar widget. Download \| Plugin Site
LiveFyre A revolutionary real-time commenting system with added social login features, CommentLuv-like links to users latest blog posts, user profiles that encourage interaction and more. Definately worth considering to replace your standard WordPress comments! Plugin Site

Core Functionality

WP-PageNavi Replaces the next/previous buttons with good looking paginated buttons. Customizable, and absolutely essential. Download	Revision Control If you edit your post a lot, each autosave will result in a new “revision” stored in the database. Keep those under control by limiting them with this plugin. Download
No Revisions Doesn’t delete previous revisions but does prevent any future ones being made. Install with any new blog. (Note: you can also achieve the same effect by editing the wp-config.php yourself). Download	FD Feedburner Redirects your main feed to the Feedburner site. This reduces the load on your server as well as adding a host of additional features. Download \| Feedburner Site
What Would Seth Godin Do Odd name for a plugin, but it creates a “welcome box” for new users visiting the site. Disappears by default after the 5th visit. Use the box to encourage signup with the newsletter, or RSS feed, or just a personal greeting. Download \| Plugin Site	WP GreetBox Creates a greet box at the start or end of posts, which you can customize specific messages for different traffic sources – so if they came from Google, get them to subscribe; or if they came from Digg then show a Digg button. etc. Download \| Plugin Site
Yet Another Related Posts Plugin Displays related posts at the end of an article, very customisable yet simple to use. Download \| Plugin Site	JetPack Loads of additional features that usually come with a WordPress.com blog – significantly, stats, gravatar hover cards, a grammar checker, and recent tweets widget. Download \| Plugin Site \| Howto and Overview
Popular Posts (Requires Jetpack with Stats enabled) Uses the stats gathered with the JetPack plugin to figure out the most popular posts over X number of days and display them as a widget. Download	SimplePress Creates an entire forum functionality to your site. Simple, customisable, fully integrated. Download and plugin Site
Event Calendar Pro – Premium A gorgeous events plugin with calendar view or event list, iCal and GCal import buttons. Perfect for club or society meet-ups. ($40 per site) Plugin Site	GD Star Ratings An incredibly rich ratings plugin, perhaps overwhelming for most users but well worth the time investment to learn it. A full templating system and a variety of rating types make this the ultimate rating system around. Download \| Plugin Site
Contact Form 7 Create a contact form and embed it on a page with ease. Optional Captcha element to deal with spam. Download \| Plugin Site	WP-Touch Creates a complete mobile version of your site with ease. Premium version also available that removes branding and allows you to embed ads. Download \| Plugin Site
Linktrackr Premium Essential for anyone using affiliate marketing or conversion pages, this plugin performs link cloaking and A/B testing for various conversion page designs. Also includes a viral makreting (sharebar type) module. Full stats and dashboard, various plans available from $9/month. Site	Gravity Forms Premium – $39 Expensive if you just need a form, but the feature set is incredible and the name deceiving. Multi-step, logic, limiting entries for competitions, even a full ordering system. Plugin Site
TinyMCE Advanced An enhanced version of the built-in WYSIWYG editor that gives you a customizable array of extra features, such as being able to add HTML tables. Essential if you use the standard editor but find it a little frustrating. Download	Widget Logic If you’ve ever wanted to dynamically change what’s on your sidebar using standard WordPress conditionals (is_single(), is_page(), is_archive() etc), this is the plugin for you. Download
Syntax Highlighter Evolved Essential for anyone who blogs about code, programming or web development – this plugin gives you an attractive and functional highlighted code block with optional line numbers. You might preferGoogle Syntax Highlighter though, so check that out too – both are good. Download	Members Allows you create additional user levels, as well as crucially blocking actual post content from being viewed by users not of a certain level – so you can set up a premium area of your site for paying users and require membership. I don’t recommend this tactic, but this plugin will handle it all for you smoothly. Download

E-Commerce

WP e-Commerce

The basic package is completely free with additional upgrades for a premium. The most popular WordPress free e-commerce around, there’s a vast list of showcase sites. A good selection of free features, SEO-friendly, highly customisable and works well with other plugins; but perhaps aimed more to web developers who don’t mind editing templates and writing CSS – there are slicker options out there.

Download | Plugin Site

JigoShop

Works great out of the box with the default WP theme, and a very slick style. Built-in payment processors, inventory management and full stats dashboard make this a very attractive and FREE e-commerce solution to rival the best.

Download | Plugin Site

Shopp Premium

$55 for a basic license, plus upgrade costs for payments modules and other plugin functionality; but with rock solid support and a much cleaner backend interface than the free solutions. If you’re serious about eCommerce on WordPress, it should be a negligible expense for the peace of mind and support offered with a premium plugin.

Purchase

Photography and Galleries

NextGen Gallery

The built-in gallery and photo management in WordPress isn’t ideal – this plugin creates a whole new gallery section to manage your photos, disassociating them from posts. You can then embed albums or galleries in posts or collect all your images on a single page. An extensive plugin in and of itself, you can also download plugins for NextGen Gallery to extend functionality further.

Download | Plugin Site

Smush.it

Smush.it is an image optimizer service from Yahoo that can reduce the size of your images by around 10-40% without any loss in quality, and with this plugin your images will automatically be run through the service (they’re still hosted on your server though). There’s also a bulk option to do all your previously uploaded images too. If your site is image heavy, this is absolute must and pretty amazing stuff really.(Note: it doesn’t work on images over 1mb).
Download | Smush.it Standalone Site

WordPress SEO by Yoast Widely regarded as the SEO plugin for WordPress. It has an extensive feature set and rave reviews. Give it a whirl, there are alternatives though. Includes XML sitemap features. Download \| Plugin Site	SEO Ultimate Another extensive feature set – this one has a 404 error tracker and well as link cloaking for your affiliate links, as well as the standard features. Each module can be disabled as required, so scales with your needs. Quite heavy when fully enabled though. Download \| Plugin Site
All-In-One SEO A basic set of features, but still a very popular choice for handling SEO concerns. Download	Google XML Sitemaps Creates a site map for you to submit to Google and automatically updates it when you post new content. Essential for getting indexed quickly and accurately. Download \| Plugin Site
SEO Friendly Images Adds ALT and TITLE meta tags to your images so you can start getting valuable Google Images traffic. Download	SEO Slugs Makes your permalinks shorter by removing unnecessary common words such as a/the/or, resulting in shorter URLs and a better rank. This functionality is built into SEO Ultimate but not WordPress SEO, so get an SEO plugin first then see if you need this one too. Download \| Plugin Site

Thank Me Later Automatically sends a follow-up email to anyone who leaves a comment at your blog, thanking them for taking the time to comment and encouraging follow up visits. Download \| Plugin Site	Disqus Commenting A full replacement comment system for WordPress offering a range of login options, share buttons, and serious spam protection. Syncs with your WordPress database to ensure you don’t lose any should you decide it’s not for you. Restricts your ability to add other commenting functionality and plugins though, beyond what Disqus provides. Download \| Plugin Site
CommentLuv Automatically inserts a link to the commenter’s latest blog post when they enter a comment (if they provide a website address of course). Superb way to encourage more comments, though also liable to encourage worthless comments posted just for the link. Download \| Plugin Site	Digg Digg Full set of social sharing buttons in a variety of styles – a vertical floating box is usually quite popular. Download
ShareBar Fewer options, but simpler and very attractive alternative for adding a set of vertical sharing buttons which moves when the user scrolls. Download \| Plugin Site	Sexy Bookmarks A unique style and customisable set of social bookmarking buttons with a huge range of services included. Quite recognizable by readers who are fans of bookmark services. Download \| Plugin Site
Akismet Comes with WordPress, but if you haven’t activated and added an API key yet, you’re missing out. It really does stop the hordes of spam comments that come every hour. Download \| Get an API key	Follow me Creates a persistent slide-on sidebar widget you can fill with links to all your social profiles. Essential if you have a lot of accounts, but for one or two, just paste them onto a regular text sidebar widget. Download \| Plugin Site
LiveFyre A revolutionary real-time commenting system with added social login features, CommentLuv-like links to users latest blog posts, user profiles that encourage interaction and more. Definately worth considering to replace your standard WordPress comments! Plugin Site

Friday 8 June 2012

Thursday 7 June 2012

Add Social Share Widget To Blogger

Wednesday 6 June 2012

How it works?

Monday 4 June 2012

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

Wednesday 14 March 2012

W3 Total Cache

WP-SuperCache

Backup Buddy Premium

WP-DB Backup

Vaultpress Premium

CloudFlare Caching Service

WP-Optimize

Secure WP

Redirection

Wassup

Broken Link Checker

WordPress SEO by Yoast

SEO Ultimate

All-In-One SEO

Google XML Sitemaps

SEO Friendly Images

SEO Slugs

Thank Me Later

Disqus Commenting

CommentLuv

Digg Digg

ShareBar

Sexy Bookmarks

Akismet

Follow me

LiveFyre

WP-PageNavi

Revision Control

No Revisions

FD Feedburner

What Would Seth Godin Do

WP GreetBox

Yet Another Related Posts Plugin

JetPack

Popular Posts

SimplePress

Event Calendar Pro – Premium

GD Star Ratings

Contact Form 7

WP-Touch

Linktrackr Premium

Gravity Forms Premium – $39

TinyMCE Advanced

Widget Logic

Syntax Highlighter Evolved

Members

WP e-Commerce