Bloggers Festival Guru: CSS

Showing posts with label CSS. Show all posts

Saturday, August 25, 2012

Add Page Numbers Inside Every Post

Continuing from my recent post about the Page hack in Blogger, I have been asked by some of my readers to implement the same thing inside a Post. Well some might why is it needed in the first place? , the reasoning behind that is to make your Post look a little short (Even when they are not). The method I will be employing is in no ways a clean one and will require to include a JavaScript file individually in each post followed by a full rearrangement (Just Copy-Paste) of the contents.

Saturday, August 25, 2012 by Wajahat · 1

How to Make First Latter of Paragraph Large in Blogger

A very popular effect used in magazines and newspapers is a drop cap first letter to paragraphs.This effect can also be found on many blogs and websites.The effect is a large first letter stretching down three or four lines with the text wrapped around.The drop cap letter can also use a different font and can be a different color to the rest of the text.Almost two years ago i published a post showing how to add a Drop Cap to your blog, in this post i have an even easier more effective method.This method needs just a few lines of Css to be added to your template then the first letter of every post on your blog will automatically be a drop cap.You can then choose the color and font of the drop cap.Check out the Blogger screenshot, demo and tutorial below.Wordpress users can use the Wordpress Drop Cap Plugin.

by Wajahat · 0

Thursday, April 12, 2012

Add Icons Next To Hyperlinks Using CSS3

Cascading Style Sheet is the heart of designers and with latest web technology such as CSS3, designing has become even more interesting. Thanks to CSS3 attribute value selectors, now you can style any file extension or tag.

I am using CSS3 attribute selector property in this tutorial to add Icons to hyperlinks. Previously we had to use JavaScript to add an icon next to the hyperlink on your blogger blog or website but now you can do it easily using CSS3. The icon will depend upon the type of file extension. If your link is pointing to a mp3 file then it will add a music symbol next to the link and so on. See the demo which shows 13 file format links,

Live Demo

How To Add Icons to Hyperlinks in Blogger?

Go To Blogger > Design> Edit HTML
Check the "Expand Widget Templates" Box
Search for this,

]]></b:skin>

4. Just above it paste the code given below,

/*--------- MBT Hyperlink Icons ----------*/
a[href*='.js'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVQgnVnCoHedbZhKs3krmDYBnrD1QBKX4RfZyPiNj0P698lpVjwBunNWge7e3W1wQ2H3nN_XaEePTbEa6N5PNwcQNJEnutM6KM3ql0QSP1lPszH4w5UcNYLU9axQq2x4416EK_3Jt9YVU/s400/file_js.png) no-repeat 0 0;
padding:7px 0 0 25px;
}
a[href*='.gif'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtgr7pvNmLvCp6-KdSwECGWaFv8GCVRW1yS5axbpAbMNnuG8p_tRcfSo1c8iK_ETvwhO5AEHU-07gyNExsErG3Ut8oyMi8QeXiTykNlka5TOnq5RepOSslOis5jslHCGV_Imqh1VmWdDc/s400/file_gif.png) no-repeat 0 0;
padding:7px 0 0 25px;
}
a[href*='.doc'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfBxBAM-610D8oHPSUPtZj96pz-bl1jVg2t-GbigpTX63kMPqdz8a8FcvKQjif1odgv80EVoOfOilgqLyiA_Ap25jBxi_fFVmQDjBff_7Jiq5N3hRcwYa8xcl9yKXGMcdFfnrfHQHiVvg/s400/file_doc.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}
a[href*='.rar'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxiMPh1FhwC8_2IxwgRxfkwHGfRnH9H5IxuJHV353K_5WaH2amxmt2hI4Luaj8SrlFSpTswV5ksgUxtcRgPFf880_SHIXNOFl3eyfa9JQZUg7eZjFLCPQzFseNdkyMkSGAehF_Ato0pYU/s400/file_rar.png) no-repeat 0px 0px;padding:7px 0 0 25px;
}
a[href*='.zip'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLsnQW7HV2K5Ko7mxrD6xiZUHhNgDCbvRDD6R7HtTMMmb-HUz6vT7saLNtzAEjQtU1GPCUxO93WP_jiFozyt0-KypCf5LwJaFPtNhWoghv9AT_tGuII0D7xFiMN-WYUEdfD-EFbd-IqLk/s400/file_zip.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}
a[href*='.mp4'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVkjOF7dJWx_E4kp5vImPmKiah0RhK9SHChnO4JpOZYlaK96LBB5LV2OZuU7m55R3gV5gA5058387cSVyv9T8hoD74XbBlVgmVNAxShlgSRUwLjKDQPmoLCqXCnEi5zN0GU8c5sLgJdlA/s400/file_mp4.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}
a[href*='.php'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2x5e3FsoQwxvcD3UknBDWxmXvlJGHRpQGmceWpMhmJM8_vbDeptKm5fZM676kA5UFLajHz-q_UAK8tZ1EVwWlTensyBHjlSQrHXm-3jXoiqkx9tJWLnK9YxVvuqkKRoSkbhvvXgNILFY/s400/file_php.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

a[href*='.xml'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWtAUpJvv_iCFQg_IXl_1qzzZId8eL2e7AgG0pDOGrZQaO_WsJApEF8ojHu_WzsFYiUl5SvNNtVxKoshEMnJfE6FbznFOC59Iie2aCrkrlJBWOVeoJdcfunjG6Nld7qfJQ67mPP0TVK0o/s400/file_xml.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}
a[href*='.pdf'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0MbSQvMkObBhhOf1lMY1AEXJnH-O4GfP-Qs2qGL6u3sGIbz7I9hZ6WCQSCid7at07S_O0opIk6NVtQv47IKu8gwq8YyBfl7LqcclglhRVM34P2TKixqUjI1vjw02TfcKpPRIKqYhZ9fw/s400/file_pdf.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}
a[href*='.xls'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrYm3oHJYMH-nUdFEX1O-JVbFJfnw4si2kCnNgrFtNvj_UcGCmFhfEujbZC8-pr8lhNNN5jJ63hKLHie1eEZ7lT-rBXSKVDMX305kaFsNivXbHZJDEyUBE7ZG5em0ZMYwK31hWSjwvpEA/s400/file_xls.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

a[href*='.mpg'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSpKXkW2m03MGaRHVTvV5YSAWNYN79BU-zXRnNP3VnjJfCyH0eWvcDZmR-9-9ANhPC6YibNTt136UaCI0YANxTg4n8Elm7dAbwug5g6zryWsoUt8hOjBZJfMsGEt45IlXCSAWSy91ILig/s400/file_mpg.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

a[href*='.bmp'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht_PCPpFcHyetlwCHHBsyr1-T4mcnGHELRKh3NFESCO8P7PP39e1zZNwat7gWU7M4tUxTcsGWcVI47lT-bGp0bZfcrsKFttT2z_RZQ-wh-E9Zm9lup_kcIfn12woBzRewBiphXJivfPJU/s400/file_bmp.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

a[href*='.avi'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoEWRg8A8qnyzUGIikFWAkto3fswB3vH_CMqPGJETLUuQlkqADp2hwgug45aDgb4U1kqpw0Qv-xpwk_r9lwlomUlMWs_zKEhepv6Z3vA8adEyrnPcc_ppMaEW44LacVniDTI6AR2OTHPc/s400/file_avi.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

a[href*='.mp3'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho1_HEIqtDhFVSE3zr157ayv2Gy8v1WcggPNmUTyrwLlWJJhv5r0Z0Hyr6LYGIFhaeGGQFClwVlWFFfuXx4MZjh1OIqQInEzDq1oMbYnzZtL1JkUge_SLTUnUYKG0XVASv1AOJR6v2n4g/s400/audio_alt.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}
a[href*='mailto'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKaxAOWUAgFJ_QWciFFgX3OQYxMe1LqIcDWlcXEf6KLvKyoBvyYdUpoi82ctHr9VgYAutBOOUH6Jp-eQqbkvvbfJSKd-8AByBVi16CJYNvscwWDDYu6vmOAYVAaxUh-tKC4WyMap-24_Y/s400/e_mail.png) no-repeat 0px 0px;
padding:0 0 0 25px;
}

4. Save your templates and you are done!

How it works?

The icons appear when the file extension is detected in the link. For Example if I add a link to pdf file like this,

<a href="http://www.mybloggertricks.com/xyz.pdf">Download E-book</a>

Then the link will appear like this when I publish it,

Now add any Ebook or any image link in your blogger posts, sidebars or footer anywhere you want and you will find cute icons appearing next to the link. You can also use icons of your choice by simply changing the icon image links in the code above. The code is really easy to edit and I hope after having read so much of our tutorials you can at least edit this code. Have fun and let me know if you faced any problem. Enjoy! :)

Thursday, April 12, 2012 by Wajahat · 0

Change Author Comments Color Style In Blogger

Highlighting and customizing author comments differently from visitor comments is a very important step that you must take as soon as possible because this will make author comments more prominent to the visitors and will therefore encourage visitors to take part in the discussion and better communicate with the author. The blogger comment block consists of three important sections which are,

Comment-author
Comment-body
Comment-footer

Our tutorial today is on how to style the Comment-Body section of Author. So lets get to work!

Highlight and Customize Comments in Blogger

Go To Blogger > Design > Edit HTML
Backup your template
Check "Expand widget templates" Box
Search for this.

]]></b:skin>

5. Just above it paste the CSS code below,

.mbt-comment-body {
background: #FFFFFF;
color: #008000;
border: 1px solid #008000;
margin:0;
padding:0 0 0 10px;
width:520px;
}

Make these changes:

To Change the background color of author comments change #FFFFFF
To change font color change #008000
To change border size change 1px, to change border style change to solid, dashed or dotted and to change the color of the border change #008000
To change the width of the comment body change 520px

Tip: Use our color generator for making these changes
6. Next search carefully for this code in your template,
Tip: Press Crtl +F and search for one line at a time

      <data:commentPostedByMsg/>
          </dt>

          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>

7. Replace it with the following code,

      <data:commentPostedByMsg/>
          </dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='mbt-comment-body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
</b:if>

8. Save your template and you are done!
Visit your blogs and see that the author comments now look something like this,

Let me know if you faced any problem. Would be a pleasure helping you. In my next post I will share several ways of customizing author comments. Have Fun! :)

by Wajahat · 1

How To Add A Vertical Navigation CSS Menu To Blogger?

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

How To Add A Vertical Navigation CSS Menu To Blogger?

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

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

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

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

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

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

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

Editing The Links In The Navigation Menu

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

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

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

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

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

See Demos With MBT HTML Editor!

Navigation Menu #1

CSS CODE:

 #menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-mQ5zNiQZuNjUB-5O-2dLLfoKJkQZ0E0Odp36-OFKE6BA64kLhAdaIgyxA4cjKvNYAAmYBQ1XEuAP2BiZGwWYNtzN-Ys6Sy09-DusO3l7t6ePROLdEhmrh4gfIW8nDPOmDUwVaLzEGY/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-mQ5zNiQZuNjUB-5O-2dLLfoKJkQZ0E0Odp36-OFKE6BA64kLhAdaIgyxA4cjKvNYAAmYBQ1XEuAP2BiZGwWYNtzN-Ys6Sy09-DusO3l7t6ePROLdEhmrh4gfIW8nDPOmDUwVaLzEGY/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/AVvXsEitflbyuHtBTug8XWYAvP5MhtjFySX8EQs9F7YVf9KDDwV8Z4C-EhlUtgLGu4onRfwE2zATbP68b_lPWGQvYiisnBWRtu-C2UUM7pwN-5pEyktQmO5T_FGh-uLLKqkz1mTJTlv80zlDyLY/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/AVvXsEitflbyuHtBTug8XWYAvP5MhtjFySX8EQs9F7YVf9KDDwV8Z4C-EhlUtgLGu4onRfwE2zATbP68b_lPWGQvYiisnBWRtu-C2UUM7pwN-5pEyktQmO5T_FGh-uLLKqkz1mTJTlv80zlDyLY/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/AVvXsEg1rohwuAnI52c6lMWB7dx7AESLYFMCamHKkFzKIFhto05OBTp9lzIB290cSvpyjZzmfshAgK9pu18YpdFXPJkMBM-om5SR3vgrCL040N6g_KwwP5tJHcHP4Jt0BzLATrmRNvTLe_I0sK4/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1rohwuAnI52c6lMWB7dx7AESLYFMCamHKkFzKIFhto05OBTp9lzIB290cSvpyjZzmfshAgK9pu18YpdFXPJkMBM-om5SR3vgrCL040N6g_KwwP5tJHcHP4Jt0BzLATrmRNvTLe_I0sK4/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/AVvXsEhu7unBkvxQ1uvr-m9Kr8N95V-rKExVQKrzTI5eazPO6e2PCNkBnFNpckaCaRzorRZhiExUrQdvhz2bnKRqy7nUmtNj6kH1rmAiYqKzk-f2KBIQCR0iauFegOew0_b3YZpSRCvVB_DdtlY/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/AVvXsEhu7unBkvxQ1uvr-m9Kr8N95V-rKExVQKrzTI5eazPO6e2PCNkBnFNpckaCaRzorRZhiExUrQdvhz2bnKRqy7nUmtNj6kH1rmAiYqKzk-f2KBIQCR0iauFegOew0_b3YZpSRCvVB_DdtlY/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/AVvXsEjAL282kuxbcrRKxH5ivgMNToOrDb_ESQ6bBoCvJN-XxNn99ujvpddqYkP3ayC-ioRjAOfXu8rkMCALZkMQpqG5jIBUmy0Xa9e6QNLKdbcZiy3V_02u7QAJeY9Oh55E19K0biWioPGYEyw/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/AVvXsEjAL282kuxbcrRKxH5ivgMNToOrDb_ESQ6bBoCvJN-XxNn99ujvpddqYkP3ayC-ioRjAOfXu8rkMCALZkMQpqG5jIBUmy0Xa9e6QNLKdbcZiy3V_02u7QAJeY9Oh55E19K0biWioPGYEyw/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/AVvXsEhO8JtzA5X1sKY-AriSmp1SjY98mqdhJE8ZdwvoyxusTncUpJNm7yw2ojZlCu0aPaAbl6gIdPbI4XfxzQMt1190gY1tCWV35OXF4OeVqot5Bh8ADaP1FulPq45igg2uEJJnl_5HhlpsjxM/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO8JtzA5X1sKY-AriSmp1SjY98mqdhJE8ZdwvoyxusTncUpJNm7yw2ojZlCu0aPaAbl6gIdPbI4XfxzQMt1190gY1tCWV35OXF4OeVqot5Bh8ADaP1FulPq45igg2uEJJnl_5HhlpsjxM/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/AVvXsEjnfzWTDE4xkR8PIQm3D5OJvUq5_rnPQtVaTVME00SznjRSmd9X7I0BQc-ll6en9fuXkd8Gzc1hoMrTfd9jM-TNUaCXnm8orRDFdTyV_ViQjcAtC2CmdJNmT8GQlcdTbqMqCzrczuum_L8/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/AVvXsEjnfzWTDE4xkR8PIQm3D5OJvUq5_rnPQtVaTVME00SznjRSmd9X7I0BQc-ll6en9fuXkd8Gzc1hoMrTfd9jM-TNUaCXnm8orRDFdTyV_ViQjcAtC2CmdJNmT8GQlcdTbqMqCzrczuum_L8/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/AVvXsEjnfzWTDE4xkR8PIQm3D5OJvUq5_rnPQtVaTVME00SznjRSmd9X7I0BQc-ll6en9fuXkd8Gzc1hoMrTfd9jM-TNUaCXnm8orRDFdTyV_ViQjcAtC2CmdJNmT8GQlcdTbqMqCzrczuum_L8/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/AVvXsEgP5dN3gbSBRYv0PbitanlNdMODC5zfAwv4ku58FQeRbshaNV-T56r3rkNrIKmtB3WcdH-VzLEuK1fP9-iLb0WEBqbWshZ3SN5q_3cX0DluiEbP-q8Dxo4wEJCgBlhZMXThc3WzkqBElaw/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/AVvXsEgP5dN3gbSBRYv0PbitanlNdMODC5zfAwv4ku58FQeRbshaNV-T56r3rkNrIKmtB3WcdH-VzLEuK1fP9-iLb0WEBqbWshZ3SN5q_3cX0DluiEbP-q8Dxo4wEJCgBlhZMXThc3WzkqBElaw/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/AVvXsEgP5dN3gbSBRYv0PbitanlNdMODC5zfAwv4ku58FQeRbshaNV-T56r3rkNrIKmtB3WcdH-VzLEuK1fP9-iLb0WEBqbWshZ3SN5q_3cX0DluiEbP-q8Dxo4wEJCgBlhZMXThc3WzkqBElaw/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/AVvXsEhs0AMYcz_E6xACGxPkHzFFJz5XJ6Bmr_QJkbdxLLp6mSVfUOVTaWszD0ejh888HqNKvItQ0np240Gmkp6LalGteZqE6soMeTXelKiKPy_NUjkDxqjTiabagHpAW5foNbGfDAj8jYWIZ9k/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs0AMYcz_E6xACGxPkHzFFJz5XJ6Bmr_QJkbdxLLp6mSVfUOVTaWszD0ejh888HqNKvItQ0np240Gmkp6LalGteZqE6soMeTXelKiKPy_NUjkDxqjTiabagHpAW5foNbGfDAj8jYWIZ9k/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/AVvXsEjFJMJVljgdCetFMKwWMsfVZkO7udyxDP5WxnlwOYLCwM9AK5VjnIMqhXNeRAFXMdvn56dAtHwPj1j3qJivVOBNBoE8MtF4ZKoUJrgy-8lCzyxCdrD01EQwkxfQwWn0m13zdRKJ6cZO6qo/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFJMJVljgdCetFMKwWMsfVZkO7udyxDP5WxnlwOYLCwM9AK5VjnIMqhXNeRAFXMdvn56dAtHwPj1j3qJivVOBNBoE8MtF4ZKoUJrgy-8lCzyxCdrD01EQwkxfQwWn0m13zdRKJ6cZO6qo/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/AVvXsEjQmX8ly18TcVAPhsQjq0SHVyk0Jii9scz5sAtGLHbQRcq8BbcmDrLsbfRPRuq2Dh8LvIEWZ7fXEdUVohcQ5lGEbZ1T3fwMDM-hidvUTuzxGpyzicfNmqbyc93rrbY-WZCksQGJvL3qYqk/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/AVvXsEjQmX8ly18TcVAPhsQjq0SHVyk0Jii9scz5sAtGLHbQRcq8BbcmDrLsbfRPRuq2Dh8LvIEWZ7fXEdUVohcQ5lGEbZ1T3fwMDM-hidvUTuzxGpyzicfNmqbyc93rrbY-WZCksQGJvL3qYqk/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/AVvXsEjQmX8ly18TcVAPhsQjq0SHVyk0Jii9scz5sAtGLHbQRcq8BbcmDrLsbfRPRuq2Dh8LvIEWZ7fXEdUVohcQ5lGEbZ1T3fwMDM-hidvUTuzxGpyzicfNmqbyc93rrbY-WZCksQGJvL3qYqk/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/AVvXsEhNNLhriowcWerqcWJoEbaYOMo_krfg0Tn9d1SUZU50ZjPSJ-cs_JkA3Gi6VSrQA_yZkEDQBX077WEzyrRUdIYcrmEi36ebRw5xl5beOZ7alRMCrHuyBN66LgMfqKAFTulwC_DKkUjkwLo/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/AVvXsEhNNLhriowcWerqcWJoEbaYOMo_krfg0Tn9d1SUZU50ZjPSJ-cs_JkA3Gi6VSrQA_yZkEDQBX077WEzyrRUdIYcrmEi36ebRw5xl5beOZ7alRMCrHuyBN66LgMfqKAFTulwC_DKkUjkwLo/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/AVvXsEhNNLhriowcWerqcWJoEbaYOMo_krfg0Tn9d1SUZU50ZjPSJ-cs_JkA3Gi6VSrQA_yZkEDQBX077WEzyrRUdIYcrmEi36ebRw5xl5beOZ7alRMCrHuyBN66LgMfqKAFTulwC_DKkUjkwLo/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/AVvXsEgx08dc4BmJoHtw0dETJiDCrFp1m0dxzUnE4uvfoLmAPLRi2LyD76pZmC-lnBPnNq8R1Ke-Y0TQxN5QJHm-194u_wlQpmCYrJ_Ef6T25m7At0PfBg_WqMy7Kfr1yspGwoA8tLrV1CPnHJM/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx08dc4BmJoHtw0dETJiDCrFp1m0dxzUnE4uvfoLmAPLRi2LyD76pZmC-lnBPnNq8R1Ke-Y0TQxN5QJHm-194u_wlQpmCYrJ_Ef6T25m7At0PfBg_WqMy7Kfr1yspGwoA8tLrV1CPnHJM/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/AVvXsEjClvPn6fsU0rBwIUQfKIRr-qQq6LhSR3IAgjVygXG13C-TVI5d_mAlIeR5VyV3dp2z_MzENp5bWUTmzyzw7B_Lf_JQcrNb4D4eMgwTUnxDD_mKYsSDrBsv8Els2n_UbilDMUNx1iwKELA/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjClvPn6fsU0rBwIUQfKIRr-qQq6LhSR3IAgjVygXG13C-TVI5d_mAlIeR5VyV3dp2z_MzENp5bWUTmzyzw7B_Lf_JQcrNb4D4eMgwTUnxDD_mKYsSDrBsv8Els2n_UbilDMUNx1iwKELA/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/AVvXsEhmaDRS5c23zXxGAnyHAVg4KtoE9X24PjC0L7nylKBdrI1DhWpiyZwxRkYJShsuUNivEx2DqhvrIVyTWyAt00nKMNg06IkVhwGdYaFqdAqvHqCgD08kB98Ljh44FfrSOG-m7HhOhyphenhyphenRqEgc/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmaDRS5c23zXxGAnyHAVg4KtoE9X24PjC0L7nylKBdrI1DhWpiyZwxRkYJShsuUNivEx2DqhvrIVyTWyAt00nKMNg06IkVhwGdYaFqdAqvHqCgD08kB98Ljh44FfrSOG-m7HhOhyphenhyphenRqEgc/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/AVvXsEiifVr9v-xzd3jzZpcG29CzXAoq0laXix_lrsnx99hQAy2q9_l67Ti2QsHhIjXicchOySv-CayNKMzXw2PkySZWLw-REizsbsJbkhKNrRxRBzWic-0UQEEl2Gq5QndUIsVkJ0C13VacunY/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiifVr9v-xzd3jzZpcG29CzXAoq0laXix_lrsnx99hQAy2q9_l67Ti2QsHhIjXicchOySv-CayNKMzXw2PkySZWLw-REizsbsJbkhKNrRxRBzWic-0UQEEl2Gq5QndUIsVkJ0C13VacunY/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/AVvXsEj9PFPK3X7imTcr6jZ4mQKjozIzcZsDr5Z3r_ek-Tc37mCGdRq25y3LoOOfeOTWRjRAqHwvqg_HEx9odVRenR03N0CftR6vZsfWOlO9ISnpHb1zpWQMGkrjf40kZvvBlgH8UJPaAyIq2hE/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/AVvXsEj9PFPK3X7imTcr6jZ4mQKjozIzcZsDr5Z3r_ek-Tc37mCGdRq25y3LoOOfeOTWRjRAqHwvqg_HEx9odVRenR03N0CftR6vZsfWOlO9ISnpHb1zpWQMGkrjf40kZvvBlgH8UJPaAyIq2hE/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/AVvXsEj9PFPK3X7imTcr6jZ4mQKjozIzcZsDr5Z3r_ek-Tc37mCGdRq25y3LoOOfeOTWRjRAqHwvqg_HEx9odVRenR03N0CftR6vZsfWOlO9ISnpHb1zpWQMGkrjf40kZvvBlgH8UJPaAyIq2hE/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/AVvXsEjCaQosfSNmx95gfwEqypBXTPu94pZg7qBt-mOTtKsBL6hDr9B7xygamjjvV4jKXD-p5Ov_48bQezw7ydfDGzAG5-Kq-5PjakoVDnIIEZmMOCoXN6Gs3C4tV2l8Ap9LqQRHQem56SBKCWI/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCaQosfSNmx95gfwEqypBXTPu94pZg7qBt-mOTtKsBL6hDr9B7xygamjjvV4jKXD-p5Ov_48bQezw7ydfDGzAG5-Kq-5PjakoVDnIIEZmMOCoXN6Gs3C4tV2l8Ap9LqQRHQem56SBKCWI/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/AVvXsEg6ALi-0m9Do5FQsMf0riEWy3LZgoqSJz1xt2u5CQlBxzPPdTECUsL9CFa1UKj36tSDVEmby40hJLCDofyfLMWhHoqaIur8ub8oyvoHwumJ16DrqGfcDDvFzD9zJbF9Vezkr7aX7XbrfPQ/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/AVvXsEg6ALi-0m9Do5FQsMf0riEWy3LZgoqSJz1xt2u5CQlBxzPPdTECUsL9CFa1UKj36tSDVEmby40hJLCDofyfLMWhHoqaIur8ub8oyvoHwumJ16DrqGfcDDvFzD9zJbF9Vezkr7aX7XbrfPQ/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/AVvXsEg6ALi-0m9Do5FQsMf0riEWy3LZgoqSJz1xt2u5CQlBxzPPdTECUsL9CFa1UKj36tSDVEmby40hJLCDofyfLMWhHoqaIur8ub8oyvoHwumJ16DrqGfcDDvFzD9zJbF9Vezkr7aX7XbrfPQ/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/AVvXsEhVFAzMuC2zVAp5E9rID0SyZSqBhyphenhyphen2g7BTPDm4oYXX3ie-qvz9-5i5nxVHc_mOIyf141vnCxNBY3jgcx7nPUglYxCALwNQNr5S8lJx7sQGdgNWM-n4_pegxgAmYKc105fvZIohsTxK4ktk/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVFAzMuC2zVAp5E9rID0SyZSqBhyphenhyphen2g7BTPDm4oYXX3ie-qvz9-5i5nxVHc_mOIyf141vnCxNBY3jgcx7nPUglYxCALwNQNr5S8lJx7sQGdgNWM-n4_pegxgAmYKc105fvZIohsTxK4ktk/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/AVvXsEgUDIZCmbI7FAE6Oo4zDtjF_o4O_ibQQd7woIUsM1hWi21mPZ_uEPo5nLAy4t8ty7Y_g6TfZO_4x12vnx8EvJk1rdSZyyfM4gYDga0JOCH3igkTun_vTUlm0Ai56ojffdrhAWZkD4crnSA/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUDIZCmbI7FAE6Oo4zDtjF_o4O_ibQQd7woIUsM1hWi21mPZ_uEPo5nLAy4t8ty7Y_g6TfZO_4x12vnx8EvJk1rdSZyyfM4gYDga0JOCH3igkTun_vTUlm0Ai56ojffdrhAWZkD4crnSA/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/AVvXsEhEMS__di12Nj9-CbNWwWyASy5gQvE-y5sMzVPC6bHvsfrwxo9HToRdfimZagDwNqBk4ROEgbgGSM01viUEbCL384T0TQ3fpmX9UwtwMvq2PMMkJa2rVDf69tlEEcmm1R1qs3oxNUKamLI/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEMS__di12Nj9-CbNWwWyASy5gQvE-y5sMzVPC6bHvsfrwxo9HToRdfimZagDwNqBk4ROEgbgGSM01viUEbCL384T0TQ3fpmX9UwtwMvq2PMMkJa2rVDf69tlEEcmm1R1qs3oxNUKamLI/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 :>

by Wajahat · 0

Bloggers Festival Guru

Saturday, August 25, 2012

Add Page Numbers Inside Every Post

How to Make First Latter of Paragraph Large in Blogger

Thursday, April 12, 2012

Add Icons Next To Hyperlinks Using CSS3

How To Add Icons to Hyperlinks in Blogger?

How it works?

Change Author Comments Color Style In Blogger

Highlight and Customize Comments in Blogger

How To Add A Vertical Navigation CSS Menu To Blogger?

How To Add A Vertical Navigation CSS Menu To Blogger?

Editing The Links In The Navigation Menu

Navigation Menu #1

Navigation Menu #2

Navigation Menu #3

Navigation Menu #4

Navigation Menu #5

Navigation Menu #6

Navigation Menu #7

Navigation Menu #8

Navigation Menu #9

Navigation Menu #10

Navigation Menu #11

Navigation Menu #12

Navigation Menu #13

Navigation Menu #14

Navigation Menu #15

Navigation Menu #16

Navigation Menu #17

Navigation Menu #18

Navigation Menu #19

Navigation Menu #20

Navigation Menu #21

Navigation Menu #22

Navigation Menu #23

Navigation Menu #24

Navigation Menu #25

Best WordPress Theme of 2014

Popular Posts

Blog Archive

Follow Us On Facebook

Labels

Followers

Contributors