LOCK and UNLOCK Blogger Widgets

By default almost widgets in blogger blogs are editable. By Clicking the edit button, you can either perform edit, remove or cancel functions. You may have observed that some widgets can not be removed from page elements for example the Header widget  which lets you add a background image to your header or add your site logo. All those widgets which can not be removed are LOCKED and we learn today how to UNLOCK those widgets. We will also learn how to LOCK any widget we want so that it could only be edited but not removed.

How To LOCK/UNLOCK a Widget in Blogger?

1. Go To Blogger > Design
2. You will see many widgets in your page element  section. Get the ID of the widget you want to remove. You can get the widgetID by placing your mouse cursor at the Edit link of that specific widget. You will see a link appearing near the status bar of your Mozilla/Chrome browser like this,

    3.  Simply note down the widgetID which in my case is HTML12. You widget ID is one that appears between widgetid= and &action
The Widget that you want to lock looks like this in UNLOCK mode,
UNLOCK MODE:



    You can clearly see that there are three buttons which are REMOVE, CANCEL and SAVE
    Now we want to delete the REMOVE button so that the widget could only be edited but not removed.
    4. Now go to Blogger > Design > Edit HTML
    5. Backup your template
   6. Search for your widget ID. (In my case I will search for HTML12
   7. You will find a code similar to this,

<b:widget id='HTML12' locked='false' title='Subscribe Now!' type='HTML'/>

   8. Now to LOCK the widget simply let locked to  true
   9. Save your template and Your Widget is now LOCKED.
Go to Page Elements section and you will see that your widget has no REMOVE button now.
LOCKED MODE:


To UNLOCK the widget back, simply repeat the same process and change locked to  false
That's all! Have fun :>

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

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

How To Add A Vertical Navigation CSS Menu To Blogger?

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

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

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

    3.   Paste the CSS code for your selected Menu just above ]]></b:skin>
    4.   For the HTML code there can be two positions either your right sidebar or left sidebar. Depends how many columns you have.

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

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

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

Editing The Links In The Navigation Menu

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

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

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

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

Live Demo
For Live Demo of Other Navigation Menus Simply use our HTML Editor and Copy and Paste the CSS and HTML code at right areas and then start playing with the code :>>

See Demos With MBT HTML Editor!

Navigation Menu #1

 

CSS CODE:

#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Pb01PuSVJ9GyozMJ2623XYFIZeD5VgOhp4nsWeVPus7fSLxnOz0eYDrHV84dIbBY6afgP6UiBYuGVTos8tPM7xudB7MZOXw5ju0ft4hogd___6-dfp89e51aP2kA1w0IIJCf3QNTvBs/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Pb01PuSVJ9GyozMJ2623XYFIZeD5VgOhp4nsWeVPus7fSLxnOz0eYDrHV84dIbBY6afgP6UiBYuGVTos8tPM7xudB7MZOXw5ju0ft4hogd___6-dfp89e51aP2kA1w0IIJCf3QNTvBs/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/AVvXsEjhVH_mPRjtgwbo_tHfnnN6E72u8LF2n9LcJ7hboCNAr9EoyMGx1sPemwbmApjDtLdrv8S8P-PK2OPnj07_lW8SSEBH1PyDV_ciz_Z_dUcW27mVifV0Tyq_ddF4sFg78ObFj2QYnJ4EzwQ/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/AVvXsEjhVH_mPRjtgwbo_tHfnnN6E72u8LF2n9LcJ7hboCNAr9EoyMGx1sPemwbmApjDtLdrv8S8P-PK2OPnj07_lW8SSEBH1PyDV_ciz_Z_dUcW27mVifV0Tyq_ddF4sFg78ObFj2QYnJ4EzwQ/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/AVvXsEjPhXEPhGGO_OXAJWk0QDiL5sNk3qaz2VOsHlqbKnImXVmeYp6rQ5eKwfKecEDSvuuzvHKTFq1l9NT2QlRt7EOF_KSYoZK6J1uUcDSoG7h5ruSXerCF1Tk79qu9HIr6L2s1ci44aaIGL7w/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPhXEPhGGO_OXAJWk0QDiL5sNk3qaz2VOsHlqbKnImXVmeYp6rQ5eKwfKecEDSvuuzvHKTFq1l9NT2QlRt7EOF_KSYoZK6J1uUcDSoG7h5ruSXerCF1Tk79qu9HIr6L2s1ci44aaIGL7w/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/AVvXsEhBVU32exLelw9iMVoXcUOrlBOW__18H_efY7A8Hs2KVe89SWbylWeWlnPF8FSudKvJCGokXdQpX_6DalOG8kPtLfbSzzXI_-njLRazTKNnfHROm6vHK43f0KqtaeF9ICgDfCRIF8g5KoQ/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/AVvXsEhBVU32exLelw9iMVoXcUOrlBOW__18H_efY7A8Hs2KVe89SWbylWeWlnPF8FSudKvJCGokXdQpX_6DalOG8kPtLfbSzzXI_-njLRazTKNnfHROm6vHK43f0KqtaeF9ICgDfCRIF8g5KoQ/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/AVvXsEiPFLgte0ZH_poMc5OX0EaOAsEi9SCfJo0E23CQKouKlRyKOixR3F2kvjoW__P2kDKWi1-Pean9yziNJ8sKQdmO-n98zS9eqjvlfQEiINgrIthlfZK7qOYAa8-tcjQrvJVETQd4rFSFl4A/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/AVvXsEiPFLgte0ZH_poMc5OX0EaOAsEi9SCfJo0E23CQKouKlRyKOixR3F2kvjoW__P2kDKWi1-Pean9yziNJ8sKQdmO-n98zS9eqjvlfQEiINgrIthlfZK7qOYAa8-tcjQrvJVETQd4rFSFl4A/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/AVvXsEiw05mjr5WXcuaWAwhXBPwgLTzELqWYSDEE9I8wEYFEKoC-f0W7WrXb1QV9RDdNGoVvBXyM_noRv_H4C3MUzIAGqebZ8Fs43SIUvR6bCqJAOtrMB413GkZowsfemix8KiVG7hiFike4Eco/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw05mjr5WXcuaWAwhXBPwgLTzELqWYSDEE9I8wEYFEKoC-f0W7WrXb1QV9RDdNGoVvBXyM_noRv_H4C3MUzIAGqebZ8Fs43SIUvR6bCqJAOtrMB413GkZowsfemix8KiVG7hiFike4Eco/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/AVvXsEhR_5GOY6JUZ_R_n96_e1irX8zIEvHtObNYUtlK2hRfO83cjeWjG7s_Va6GB7_dxIRJ0o-MOtl7PyE4iED3n8JFBo-80Ssy45Yrl73ylrw5sZssy6QvZQE2gR_V-NBGJAdngLYFU-RASK8/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/AVvXsEhR_5GOY6JUZ_R_n96_e1irX8zIEvHtObNYUtlK2hRfO83cjeWjG7s_Va6GB7_dxIRJ0o-MOtl7PyE4iED3n8JFBo-80Ssy45Yrl73ylrw5sZssy6QvZQE2gR_V-NBGJAdngLYFU-RASK8/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/AVvXsEhR_5GOY6JUZ_R_n96_e1irX8zIEvHtObNYUtlK2hRfO83cjeWjG7s_Va6GB7_dxIRJ0o-MOtl7PyE4iED3n8JFBo-80Ssy45Yrl73ylrw5sZssy6QvZQE2gR_V-NBGJAdngLYFU-RASK8/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/AVvXsEguM_RrFchCRlEZ5dFDe3wc-IxYiioNlEVj4OK_FERAdhNo7vgxmznzFWU21jpT56KjsxyaoeWHWDcC5u8qh49ysiFJGSvbR8sk8kfhLdTnpZVzNq1VURJ9YFho70w6c2RRXhQrc3u1-Vo/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/AVvXsEguM_RrFchCRlEZ5dFDe3wc-IxYiioNlEVj4OK_FERAdhNo7vgxmznzFWU21jpT56KjsxyaoeWHWDcC5u8qh49ysiFJGSvbR8sk8kfhLdTnpZVzNq1VURJ9YFho70w6c2RRXhQrc3u1-Vo/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/AVvXsEguM_RrFchCRlEZ5dFDe3wc-IxYiioNlEVj4OK_FERAdhNo7vgxmznzFWU21jpT56KjsxyaoeWHWDcC5u8qh49ysiFJGSvbR8sk8kfhLdTnpZVzNq1VURJ9YFho70w6c2RRXhQrc3u1-Vo/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/AVvXsEgAFDutc-RB53MrNJkbq-cAN71cn5qLsfHhXFD47yyOcMjNEEviEgRgzZ13J_hYCeVpFWPvAkvWnTLgi9CsStS4gZI__Zt9ffessh57EVnEo92_ny8DFjj4rTdQttgCMY9ImiGsnwei1E8/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAFDutc-RB53MrNJkbq-cAN71cn5qLsfHhXFD47yyOcMjNEEviEgRgzZ13J_hYCeVpFWPvAkvWnTLgi9CsStS4gZI__Zt9ffessh57EVnEo92_ny8DFjj4rTdQttgCMY9ImiGsnwei1E8/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/AVvXsEiFjbV3KCmXW58AiHBhi1bv4PMA_Z6A3yMQjLqDxHyPDSrftqeURXnbSRH1pb-WLCVeFRLX0CQd3pAacOPHayQZLzU8Tqll1N4078SdRY4sJHsSWJROwOQX3zFPTKPWmJGj-zalt_uTHgk/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFjbV3KCmXW58AiHBhi1bv4PMA_Z6A3yMQjLqDxHyPDSrftqeURXnbSRH1pb-WLCVeFRLX0CQd3pAacOPHayQZLzU8Tqll1N4078SdRY4sJHsSWJROwOQX3zFPTKPWmJGj-zalt_uTHgk/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/AVvXsEiKf3obiORH_HYWHpyzJxkpjupagiVLHatqItqIuy2vKEBeYSB2X8220wNavjxoXzirRd6bv1X1ezVQF6feFIRFGveB2A0GB7fKBNyJvXphM9-Yawu_CtncnkD_nYcGywV3jpgyR0ihaxY/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/AVvXsEiKf3obiORH_HYWHpyzJxkpjupagiVLHatqItqIuy2vKEBeYSB2X8220wNavjxoXzirRd6bv1X1ezVQF6feFIRFGveB2A0GB7fKBNyJvXphM9-Yawu_CtncnkD_nYcGywV3jpgyR0ihaxY/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/AVvXsEiKf3obiORH_HYWHpyzJxkpjupagiVLHatqItqIuy2vKEBeYSB2X8220wNavjxoXzirRd6bv1X1ezVQF6feFIRFGveB2A0GB7fKBNyJvXphM9-Yawu_CtncnkD_nYcGywV3jpgyR0ihaxY/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/AVvXsEihH9MPhwlIKFtObWH0mZ3TwOT-RFNmTqOFFwxStFTmRm80bLq_HI0mjnEbLJpI92gl8oz8yluYKzI9iMzGwHAUEbfIfIOW0a75IzylW__F60UYw9FNmPKxdLOvRF1_OvB8cxhwkLasGR4/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/AVvXsEihH9MPhwlIKFtObWH0mZ3TwOT-RFNmTqOFFwxStFTmRm80bLq_HI0mjnEbLJpI92gl8oz8yluYKzI9iMzGwHAUEbfIfIOW0a75IzylW__F60UYw9FNmPKxdLOvRF1_OvB8cxhwkLasGR4/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/AVvXsEihH9MPhwlIKFtObWH0mZ3TwOT-RFNmTqOFFwxStFTmRm80bLq_HI0mjnEbLJpI92gl8oz8yluYKzI9iMzGwHAUEbfIfIOW0a75IzylW__F60UYw9FNmPKxdLOvRF1_OvB8cxhwkLasGR4/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/AVvXsEgU5x532UIpUTmXmBWIjp4hVKTTLJvTOUrawgGZCDckdqjbiyjezn0FtjEe05asll_lFSutkv-0phoFlYMvUAfEzys-NcR7r2g2rX7bScvJjZMV5cguXYf-qRJRgIxaP6fVURi2BS7io3g/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU5x532UIpUTmXmBWIjp4hVKTTLJvTOUrawgGZCDckdqjbiyjezn0FtjEe05asll_lFSutkv-0phoFlYMvUAfEzys-NcR7r2g2rX7bScvJjZMV5cguXYf-qRJRgIxaP6fVURi2BS7io3g/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/AVvXsEh3IZsQbiWaMfEJg1wuHEVMALyWg1SpdNJU2HP9jTcj-UCqdZcvOVgqeOI1-2x3Sz5N5mqlDd_7zobFiGA8qC36V4iKwAG3RaSUJuguY_rXyTqyd1skVKlno73IaeTqYKb37AaTedmOJOg/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3IZsQbiWaMfEJg1wuHEVMALyWg1SpdNJU2HP9jTcj-UCqdZcvOVgqeOI1-2x3Sz5N5mqlDd_7zobFiGA8qC36V4iKwAG3RaSUJuguY_rXyTqyd1skVKlno73IaeTqYKb37AaTedmOJOg/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/AVvXsEjXKMSsKxh_SziadZhwClH22G1aocYSej4TWxRpzFMXB-nfFqA3zcdA0lFMZV3gznh5fWjznjgeWn1NfF_EeZRnW2MetlWIUAO6NjWsm9RUhKAAHE6dfh7NQlQIO6sxzWbbgKh28yDdq40/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXKMSsKxh_SziadZhwClH22G1aocYSej4TWxRpzFMXB-nfFqA3zcdA0lFMZV3gznh5fWjznjgeWn1NfF_EeZRnW2MetlWIUAO6NjWsm9RUhKAAHE6dfh7NQlQIO6sxzWbbgKh28yDdq40/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/AVvXsEgfPTKO85GfFes_3NSeENdXDAbpiCB4kYgzakjN1zHzIN88vAdA-_W0xMCspP6_7-ArKmkA1Qi4NgRmUCZ4jVWL_Le3IVyhP-P-_wk7tOfKHaQ69upMlEqv0bh1GG8smReaP7iia5kcZhI/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfPTKO85GfFes_3NSeENdXDAbpiCB4kYgzakjN1zHzIN88vAdA-_W0xMCspP6_7-ArKmkA1Qi4NgRmUCZ4jVWL_Le3IVyhP-P-_wk7tOfKHaQ69upMlEqv0bh1GG8smReaP7iia5kcZhI/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/AVvXsEhdpq_nIXEEHfP1v1zocTfQ8KRbpE8WGC4I8wydSc56Zi-Vi0HYzPNpf48nMhxibn_-wF-Sn_HPwACrvCH_n4-_IGESkkDQL2GXN7Vw82_f6PU4YwUdlpBfplz04wI12JYsmJTbTD7xTZ4/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/AVvXsEhdpq_nIXEEHfP1v1zocTfQ8KRbpE8WGC4I8wydSc56Zi-Vi0HYzPNpf48nMhxibn_-wF-Sn_HPwACrvCH_n4-_IGESkkDQL2GXN7Vw82_f6PU4YwUdlpBfplz04wI12JYsmJTbTD7xTZ4/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/AVvXsEhdpq_nIXEEHfP1v1zocTfQ8KRbpE8WGC4I8wydSc56Zi-Vi0HYzPNpf48nMhxibn_-wF-Sn_HPwACrvCH_n4-_IGESkkDQL2GXN7Vw82_f6PU4YwUdlpBfplz04wI12JYsmJTbTD7xTZ4/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/AVvXsEj7VU5MQa5jB8TU4fUv3cpRCxq8ZaawbRiLwRm3qZzrKu0Sd_6zfNVQp3UCNSfhCetCDAFDYEBeOm8p8IlYlR3yesYume5GbASFGm8IyNfMzhKe2H8m2ZlnTIlUnfIYxzGYeO5OSmKlE7k/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7VU5MQa5jB8TU4fUv3cpRCxq8ZaawbRiLwRm3qZzrKu0Sd_6zfNVQp3UCNSfhCetCDAFDYEBeOm8p8IlYlR3yesYume5GbASFGm8IyNfMzhKe2H8m2ZlnTIlUnfIYxzGYeO5OSmKlE7k/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/AVvXsEigclv4BJWv0RH-i-b4sHd4GkOvrYQOfU7_uWRjPA1Z8v46lGLaT7t4vMC36Oagd7FXF8nkkVs_jL0jTo9KnXKiA2bW29DRD5fj_q4TtQfAql7U_hIHcho1uzqo2eKR41_43Mgp2rByM1Q/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/AVvXsEigclv4BJWv0RH-i-b4sHd4GkOvrYQOfU7_uWRjPA1Z8v46lGLaT7t4vMC36Oagd7FXF8nkkVs_jL0jTo9KnXKiA2bW29DRD5fj_q4TtQfAql7U_hIHcho1uzqo2eKR41_43Mgp2rByM1Q/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/AVvXsEigclv4BJWv0RH-i-b4sHd4GkOvrYQOfU7_uWRjPA1Z8v46lGLaT7t4vMC36Oagd7FXF8nkkVs_jL0jTo9KnXKiA2bW29DRD5fj_q4TtQfAql7U_hIHcho1uzqo2eKR41_43Mgp2rByM1Q/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/AVvXsEjUfI34Bjf0YqMyRZ5lZRCy7ImLAGoUtZakc_LlsOCS4cPZLoYWJSo8gOHDPY8zvUIn7KuIZFtepXzY6qGqHFfzXGO7zOS8vQD6J-ZdiLcIOhsD9kc3kipELIIoPBlShGIZCU5JpqBQH38/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUfI34Bjf0YqMyRZ5lZRCy7ImLAGoUtZakc_LlsOCS4cPZLoYWJSo8gOHDPY8zvUIn7KuIZFtepXzY6qGqHFfzXGO7zOS8vQD6J-ZdiLcIOhsD9kc3kipELIIoPBlShGIZCU5JpqBQH38/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/AVvXsEj8xYC8lAWTN8h0fJsiDyPFvyx5YptwyyGhxX-1WQi2fB0zklBr1VwhDM966nzMJhCr-WPIJu8zyz5vjdfyYafp_F6lPp4oA4roMNERyqs5ZlzCVrl7ApkgLp8seD6z8p7GhspN_nTL-1w/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8xYC8lAWTN8h0fJsiDyPFvyx5YptwyyGhxX-1WQi2fB0zklBr1VwhDM966nzMJhCr-WPIJu8zyz5vjdfyYafp_F6lPp4oA4roMNERyqs5ZlzCVrl7ApkgLp8seD6z8p7GhspN_nTL-1w/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/AVvXsEi_AKKrirM9kKajbquIL0DJU8Us-KHdfla8g1wnY6EiCka_nzCqwmUBbUfKS37evTVNQqA0N9Bj0ZjNvoaDNpYkKOFiW2mjgDTukJXPmpz8zaZW8L9fZ6WMPi0VC_OyVpfjq8TmFgNZW50/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_AKKrirM9kKajbquIL0DJU8Us-KHdfla8g1wnY6EiCka_nzCqwmUBbUfKS37evTVNQqA0N9Bj0ZjNvoaDNpYkKOFiW2mjgDTukJXPmpz8zaZW8L9fZ6WMPi0VC_OyVpfjq8TmFgNZW50/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu10"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>


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

Create Facebook and Twitter Custom Follower Counters

I was thinking as why some services like Facebook, Digg, orkut, stumbleupon has no follower, fan or friends counter. While I was customizing my template I needed a follower counter for Facebook but unfortunately I could not find any. So I decided that why not create my own custom follower counter. This idea enabled me to create a follower counter for any service you like!

This is how our Custom follower counter for Facebook looks like,

227 Followers or a blinking one for browsers other then IE,
227+ Fans
To add a counter you just need to do the following,

1. Go To Blogger > Layout
2. Choose Add a Gadget or Add a Page element
3. Choose HTML/JavaScript
4. Finally paste the code below inside the HTML/JavaScript widget,

<span sans ms style=" background-color:#F2F2F2; border-top: 1px solid #F2F2F2; border-right: 1px solid #8A8A8A; border-left: 1px solid #F2F2F2; border-bottom: 1px solid #8A8A8A; padding: 2px 4px 4px 4px; color: #666; font-family: sans-serif, arial; font-size: 10px;">
<span style=" background-color:#D2E9F8; font-size: 9px; border-top: 1px solid #8A8A8A; border-right: 1px solid #ddd; border-left: 1px solid #8A8A8A; border-bottom: 1px solid #ddd; padding: 0px 1px;">227<blink>+</blink></span> Followers</span>

Customization

The bolded text in the code above are described below,
background-color: This defines the background colour of the counter. To change the hexadecimal color value to something different use our colour chart.
background-color: This defines the background colour of the number count i.e 227 You can change its colour using the same color chart.
color: This defines the color of the text i.e 227 and Followers
<blink>+</blink>: The code in blue is responsible for blink the plus sign. You can write anything between <blink> and </blink> For instance symbols like k (kilo), .. etc If you don’t want this blinking effect simply delete <blink>+</blink> from the main code above.
227 and Followers: Replace these with your own follower count and count name.

Some Example Counters For Feed Readers and Twitter

FEED COUNTER

227 Readers

<span sans ms style=" background-color:#CC9966; border-top: 1px solid #F2F2F2; border-right: 1px solid #666; border-left: 1px solid #F2F2F2; border-bottom: 1px solid #666; padding: 2px 4px 4px 4px; color: #000; font-family: sans-serif, arial; font-size: 10px;">
<span style=" background-color:#CCCCCC; font-size: 9px; border-top: 1px solid #666; border-right: 1px solid #fff; border-left: 1px solid #666; border-bottom: 1px solid #fff; padding: 0px 1px;">227</span> Readers</span>

TWITTER COUNTER

227Tweeters

<span sans ms style=" background-color:#F2F2F2; border-top: 1px solid #F2F2F2; border-right: 1px solid #8A8A8A; border-left: 1px solid #F2F2F2; border-bottom: 1px solid #8A8A8A; padding: 2px 4px 4px 4px; color: #33CCFF; font-family: sans-serif, arial; font-size: 10px;">
<span style=" background-color:#33CCFF; font-size: 9px; color:#fff; border-top: 1px solid #666; border-right: 1px solid #fff; border-left: 1px solid #666; border-bottom: 1px solid #fff;  padding: 0px 1px;">227</span>Tweeters</span>

The Number Count Is Manual!

Since this widget is based fully on CSS and it uses no programming code so you will need to update your follower count yourself each time you receive a new Facebook follower, Feed Reader or Twitter follower etc. I hope that is not difficult to do so :)

I am sure you will enjoy reading these too,

• Facebook Social Bookmarking Widget
• Add Floating Facebook Like and Retweet Counters To Your Websites

Your feedback and suggestions are always welcomed.