Bloggers Festival Guru: How to do?

Showing posts with label How to do?. Show all posts

Monday, September 3, 2012

Easy Way to Permanently Delete Your Facebook Account

If you are not satisfied with latest facebook features like timeline, chat and more or if you are spending large amounts of time on this site then you can delete your account permanently. In this article we will show you how to permanently delete your Facebook account.

Monday, September 3, 2012 by Wajahat · 0

Rename your existing Hotmail Account to Outlook.com

rename-hotmail-account-adress--to-outlook

Microsoft released the new Outlook.com email service and many existing hotmail (@hotmail.com, @msn.com, @live.com, etc.) users upgraded their account to outlook.com services by keeping their email address, contacts, password and old emails.
You can use the new outlook.com mail interface with your old address (@hotmail.com, @msn.com, @live.com ) that you already own. But if you are interested in getting an email address with @outlook.com domain, you can add an @outlook.com alias to your account or Rename your account to an @outlook.com email address.

by Wajahat · 1

Sunday, September 2, 2012

Blogger Permalink - How to Use it

A few weeks back Blogger added a permalink feature to Blogger In Draft, Blogger In Draft is like a separate dashboard they use to test new features.You may have seen some Blogger related sites write about the permalink feature at the time.I held off covering the topic until the permalink feature was added to the main dashboard.OK, If your thinking 'Test Dashboard' and 'Main Dashboard' what's he talking about, don't worry that's not important.The main point is every blogger user can now choose the URL for their posts.This leads to the next question 'What Is A Permalink?'.

Sunday, September 2, 2012 by Wajahat · 0

Custom Domain Buying Procedure in Blogger

SEO

Here on Spice Up Your Blog I have always advised (Strongly) users of Blogger to buy a domain name rather than use the free blogspot sub-domain.I have been such a strong adversary of using a custom domain a year ago I published the strong titled "Why Not Getting A Custom Domain For Your Blogger Blog Is Stupid ".I followed up that post with a Step By Step video tutorial on How to buy a custom domain and connect it to your Blogger blog.So I covered why to get a domain and how to get it.

by Wajahat · 0

Saturday, September 1, 2012

How to Remove Menu Bar From Dynamic View in Blogger

Dynamic Views (DV) templates have become a popular choice with some Blogger users.When you choose dynamic views you select a default template which readers will see when they land on your blog.But in a menu under the header readers have the option to view your blog using any of the other six DV templates.So basically you are giving the readers the choice on how they want to view your blog.But this does not suit everybody, I have recently received a few emails asking is there a way to remove the choose template options on Dynamic Views.Chuck at The Real Blogger Status has also seen some enquiry's about this in the Blogger Help Forum.So, can you remove the options for readers to choose the template ? Yes, and with credit to Southern Speakers and here is how.

Saturday, September 1, 2012 by Wajahat · 0

Saturday, August 25, 2012

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.

Saturday, August 25, 2012 by Wajahat · 0

Friday, August 17, 2012

2 Ways to Create and Add Signature to Blog

If you look at the bottom of the posts in many blogs you will see they finish with a signature.I think the signature looks great and adds a bit of style to the posts.These signatures are very easy to create and add to your blog and in this post i will show you how.You can actually use a small pad to write you signature or pick from one of hundreds of pre-made signatures.I suggest using the pre-made signature, using the pad to create your actual signature is almost imposable.

Friday, August 17, 2012 by Wajahat · 3

Tuesday, August 14, 2012

Where to Put Adsense Ads Between Blog posts or Inside Blogger Post

How to add adsense ads inside Blogger blog posts or between blog posts:-
Adding adsense ads inside blog posts is a very good thing to do to increase your CTR.
CTR means"(the number of times your ad clicked) divided by (number of times it is shown).So,the more CTR you have,the more $$ you get.

As we know,there are more chances for the ads to be clicked when they are in the middle(blog posts) rather than at the sidebars(especially the right sidebar),footer,etc.So,

Tuesday, August 14, 2012 by Wajahat · 1

3 Easy Steps to Hide Blogger Navbar

Learn how to hide,disable or remove the blogger navbar(navigation bar) from your blog.
First,let us see what blogger navbar is:

by Wajahat · 0

How to Embed Pdf , Doc , Xls From Google Drive

Friends of the blog to writing Some types of files can be shared with friends .. It

Sharing files

However, many sites in Google, the god of the Internet service to us

Provides ..

by Wajahat · 0

Thursday, April 12, 2012

Customize Blogger Comment Form – Make It Possible!

Today's tutorial is the most demanded and most wished but rarely answered in blogosphere. For some designers customizing the Blogger Comment Form is somehow not possible whilst for others it is tricky but from today onwards InshAllah every blogger will actually be able to customize the Blogger Comment Form in the best way possible! After some trial and errors we actually succeeded in altering Blogger’s official CSS coding. We are happy to have brought you with a tutorial that will indeed enable you to have a customized Comment Form far better than that of Wordpress, Typad etc. Please have a look at some examples below,

Now Hover Your Mouse Cursor at these comment forms for 3-4 seconds to see something different!
Baby Comment Form with message for spammers

Simple Comment Form with message for spammers

Orange Comment Form with message for spammers

We hope you liked this new discovery! Lets now learn how to customize the blogger comment form/box to suit your preferences.

Adding A Customized Comment Form To Your Blog

Note:- The Following CSS code is for the Comment Form With a Baby in it. Other CSS codes will be provided to subscribers only. If you haven’t subscribed yet kindly subscribe now and inform us by leaving a comment with your Email ID.
Follow these steps,

Go To Blogger > Layout > Edit HTML
Check The Box “Expand Widget Templates” at the top right corner.
Search for the code below, Tip:- Press Ctrl + f

<div class='comment-form'>

4. Replace this code with the code below,

<div id='mbt-form'>

5. Now Search for ]]></b:skin>
6. Just above ]]></b:skin> paste the CSS code below,

#mbt-form iframe{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyANsFsAu-f1Vpz1OJ-qEF6lTn9OGI2rBjq9OYUHKDytHi0FaDW2UqtRGds4dVZ7kxXwhgwS4BTiaIoX5QKBM4t9Y4-3g5p99Yim_x4KWaljH-xQYsUzoZ6qbz-XLArTg7wG1khAI6HdnY/s400/plz-do-not-spam1.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px; font:normal 12pt "ms sans serif", Arial; color:#7EB2AC; width:450px; }
#mbt-form iframe:hover{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2uMQOS6if_cRT3bewUp4XxDbL8NyOl41gTLJLFiRL9aSuOoOmqb3mP1PvJeIPgmg0-V5pKxF4R-tkrJX14JaETZbyuekpJnuthuxQLHbek6Qu8o6Ngi6m09wbsd2CpnaFvqggHh7NBln3/s400/plz-do-not-spam2.gif) no-repeat bottom right; border:7px solid #7EB2AC;
}
#mbt-form a{
color:#7EB2AC;
}

7. Save your template and view your blog to see a different touch :>

Customize The Blogger Comment Form To Suit Your Blog Layout

Now Lets discuss the important areas in the CSS code above to help you customize your Blogger comment form according to your preferences.
There are three important areas, which are,

#mbt-form iframe
#mbt-form iframe:hover
#mbt-form a

Here are the details for each section
1. Customization For Active Mode

#mbt-form iframe

This part is responsible for the active appearance of comment box when mouse cursor is not hovered on it. It includes the following style properties,
background: This property is responsible for the background color, background image and background image’s position. Where,

#ffffff : This is the background color. You can change it using our Color Chart
url : This is the URL for the background image. I used the baby in this case. You can change this image with anything you like.
bottom right: This positions the background image. I positioned the baby on bottom right corner. You can position the image at bottom right or bottom left or top right or top left

border: This CSS property defines the border size/width, style and color of the comment box. I have set these values for the Comment form in active mode(not on mouse over),

border size to 7px,
border style to solid. You can choose solid, dotted, dashed etc. See this page on border styles
border color to #C7C7C7. Use our CSS Color Chart for using a different color.

padding: This CSS property is responsible for the distance/gap between the Comment Form border and its text area. You can increase this value if you wish to insert an image at top right or top left corner of the form.
font: This CSS property defines the boldness, font family and the size of the text. I have set the following for the text “Comment as:”

boldness to normal,
size to 12pt
font family to "ms sans serif". If in case the browser doesn’t has the "ms sans serif" font then I have set Arial as a backup.

color: This property defines the color of the text “Comment as:” . Use our Color Chart for changing the text color.
width: This property sets the width of your Comment Form. You can see the comment from of my blog is wider than normal because I have adjusted its width. Set the width of your comment form a bit smaller than that of your post width. You can find your post width by finding the following code in your template (Edit HTML)

.post

2. Customization For Mouse Hover Mode Now lets discuss the CSS properties for the form’s appearance when a mouse cursor is hovered on it.

#mbt-form iframe:hover

It has almost the same explanations for background and border as we discussed earlier. Setting these two CSS properties will effect the second image only that appears on mouse hover.
3. Customization For The Link Colors

#mbt-form a

This part defines the color of these two links -> “Sign out” and “Subscribe by email” . These links appear at bottom right corner of every Blogger Comment Form.
color: This sets the link color. Set a link color as contrast to the background color.

That’s All!

I hope this tutorial will be of great help to bloggers and designers. We request everyone to kindly link back if you wish to share this unique tutorial with your readers and friends. We thank you for your patience.
Any question is welcomed :>

Thursday, April 12, 2012 by Wajahat · 0

Remove Blogger Navigation Bar

Removing blogger navigation bar is as easy as drinking a cup of tea! Below I have shared a pretty easy way of getting rid of that annoying nav-bar. The blogger navbar is a default feature that appears at the top of every blogger hosted blog. There are many reasons why you should remove the blogger navbar, some of which are mentioned below,

It makes your blog look less professional
You can be flagged by anyone!
It allows your readers to view other member blogs by clicking the “Next Blog” button, which may contain objectionable content like adult explicit content!

Now you would agree with me, why I called it annoying. Before you may remove or hide blogger navigation bar please ensure that you have made a backup of your template.

BACKUP YOUR BLOGGER TEMPLATE

As we are adding code directly to the Blogger template for this customization, it is necessary to make a back-up of the existing template code. If suppose you get an error while customizing your template or you delete or break a code accidently, you will be able to easily restore your template.

To make a back-up of your Blogger template, go to Layout>Edit HTML in your Blogger dashboard, and look for the “Download full template” link near the top of the page.

Clicking on this link will prompt you to save your existing template to your computer hard drive. Save it somewhere so that you could find it easily while restoring your template.

REMOVING BLOGGER NAVBAR

Simply do the following,

Go to layout > Edit HTML in your blogger dashboard
Copy the code below, [Press “Ctrl + C” to copy & “Ctrl + V” to paste a code]

#navbar-iframe { height:0px; visibility:hidden; display:none }

3. Press Ctrl+F and search for Variable definitions
3. Paste the above code just before/above Variable definitions

4. Save your template and enjoy the new look of your pro blog :)

by Wajahat · 0

What Is A Blog and How To Create A Blog?

There are many people who still do not understand what a blog is or why is blogging so much expanding in the cyberspace. I feel all these people deserve the right to know what a Blog is and how can a Blog be created along with some other similar questions. So for those who just heard of a Blog from their friends, media or any other source, here is a short and precise illustrative tutorial to help you find answers to four important questions in most people’s mind.

Which are,

What is a Blog?
How do I create a Blog?
What is the advantage of blogging?
What is Blogger or Wordpress?

Now here comes some useful answers for each demanded question

What is a Blog?

A blog is nothing but an Online Notebook Diary. What do we write in a notebook diary? Of course stuff that we like and things that we feel important to be recorded and shared with our friends and family. A notebook diary can be based on any topic that you like for example you can write on your hobbies, activities, poems, songs, tutorials, pets, home and family, your personal thoughts etc. People will read your Online Notebook Diary on daily basis and will leave you a comment, suggestion or feedback.

If you write about your personal experiences in a notebook made up of papers, then your writings will reach only limited people around you but with an online diary like a Blog you speak to the world!

So in short a blog is your Personal website where you write and share things you like with millions of people out there who are eager to read what is cooking in your mind!

The video below will give you a more illustrative view of a Web Blog.

How do I create a Blog?

Creating a blog is absolutely free. There are many quality Blogging hosting services that you can choose to create a blog but the best among them is Blogger. I have created this blog with Blogger without even paying a penny! Want to know how? Watch this video to know how to create a blog in less than Five minutes!

What is the advantage of blogging?

You pay nothing Instead you Earn in $$ !! You earn by displaying advertisements on your Blog. People are earning from $100 to $100,000 monthly! I am not kidding an example is shoemoney.com and problogger.net

Plus you will make new friends in the Blogosphere and you earn respect in the eyes of thousands of people. You can become a celebrity! But all this with a little hard work and great patience.

And the best advantage which I have experienced is that you learn every second online! Your internet and computer skills will improve to an extreme edge and this is what the coming era demands from you. Every second on blogging is undoubtedly a new experience! I have learnt HMTL, CSS, XML and a bit of JavaScript without taking any classes. I learnt them all within a year of my blogging career and today I am able to design a quality blogger template in less than three hours MashAllah!

What is Blogger or Wordpress?

These are the major blogging platforms which help you create a free Blog. But if you are confused which one to start with then go for Blogger. It has many features which wordpress doesn’t have and the best part is that Blogger allows you to customize your template in any way you like by editing the CSS style sheet! So what are you looking? Start blogging now and build up a new cyber life. Best of luck!

To know in detail whether Blogger is better or WordPress then read this post –> Comparison Chart 2010 for WordPress Vs Blogger

Feel free to ask any question that is still troubling your mind. Take care :>

by Wajahat · 0

How to Design a Professional Looking "About Us" Page

Giving a mature and professional look to your "About Us" webpage should be amongst your first priorities. Visitors have the right to know who you are and what you do and where you belong. Your About Us page is your Identity page where you add a little bio of your self and then explain the purpose of your blog or website. It's the most important page for both your regular visitors and advertisers. So Make sure you leave a good impression on them by presenting your self well. Just an hour ago I designed my personal "About Me" Page and I hope the tutorial today will make sense once you see this new proposed design,

Live Demo

What's New In it?

The Design includes 4 most important features which are:

All Blogger Widgets below Post titles and at the bottom are kept hidden
Three beautiful Rows Describe your Entire Concept of Website i.e 1- Your Bio, 2- Blog Purpose and 3- Concluding paragraph.
Passive Voice Speech is used to make things look professional
It Loads in Seconds

If you think you really need one like that then I am sure you would love to read the tutorial below.

How To Create this About Us page?

For this tutorial I will suggest that you use Windows Live Writer. WLW will make your page design even more neat and clean. So lets get to work!

Copy all data in your about us page in a notepad and keep it safe.
Delete every thing in your about page and start writing a fresh bio about yourself in no more than 3-4 lines. Then add an your best picture to the left of your bio. See the example below,

3. Now you need to add some rows/paragraphs where you can talk about your services, goals etc. I would advise that you create at most two-three rows and keep them short in length. Use passive voice and avoid using "I am this and that" rather use a tone that may sound as if someone else is describing the author. Once you have written down the paragraphs then start enclosing each paragraph one by one between this code,

<div style="border: #686868 5px solid; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px">
<div style="text-align: justify"><img style="display: inline; float: right" align="right" src="ADD IMAGE LINK HERE" width="128" height="128" /></div>
<div style="text-align: justify"><font color="#666666">
ADD PARAGRAPH TEXT HERE
</font></div>
</div>
<div style="text-align: justify"> </div>

Do it for each paragraph. For example if you have written three paragraphs then enclose them in the codes like this,

<div style="border: #686868 5px solid; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px">
<div style="text-align: justify"><img style="display: inline; float: right" align="right" src="ADD IMAGE LINK HERE" width="128" height="128" /></div>
<div style="text-align: justify"><font color="#666666">
ADD PARAGRAPH-1 TEXT HERE
</font></div>
</div>
<div style="text-align: justify"> </div>

<div style="border: #686868 5px solid; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px">
<div style="text-align: justify"><img style="display: inline; float: right" align="right" src="ADD IMAGE LINK HERE" width="128" height="128" /></div>
<div style="text-align: justify"><font color="#666666">
ADD PARAGRAPH-2 TEXT HERE
</font></div>
</div>
<div style="text-align: justify"> </div>

<div style="border: #686868 5px solid; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px">
<div style="text-align: justify"><img style="display: inline; float: right" align="right" src="ADD IMAGE LINK HERE" width="128" height="128" /></div>
<div style="text-align: justify"><font color="#666666">
ADD PARAGRAPH-3 TEXT HERE
</font></div>
</div>
<div style="text-align: justify"> </div>

Make these changes:

To change the border color of the paragraph edit #686868 with your preferred color choice. Use our color generator tool.
Replace ADD IMAGE LINK HERE with the URL of your image. Try to you use a small image 128px by 128px in size.
To adjust the image size edit width="128" and height="128"

4. Finally save your page and publish it. Visit your About Us page to see it in action! :>

Hide Widgets

Now we need to hide all widgets that appear below post titles and at the bottom of posts. These widgets are normally the social bookmarking icons, AdSense code and related post widget which appears on all your posts. To hide them kindly follow these steps,

Go To Blogger > Design > Edit HTML
Backup your template
Check the "Expand Widget Templates" box
Search for ,

<data:post.body/>

and just above it enclose all your widget codes between the code below,

<b:if cond='data:blog.url != "ADD YOUR ABOUT US PAGE URL HERE"'>
WIDGET CODES
</b:if>

Add all your widget codes between these two bolded lines. Replace ADD YOUR ABOUT US PAGE URL HERE with your About Us page link.
5. Do the same for all the widget codes below <data:post.body>
6. Finally save your template and visit your blog to see the page loading in seconds with a neat and clean look.

Need Help?

If you needed any help just feel free to post your queries. I will reply the earliest possible. I just hope you succeed in creating an attention seeking About Us page that may let your blog stand out! Have fun. :>

by Wajahat · 0

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

Monday, September 3, 2012

Sunday, September 2, 2012

Saturday, September 1, 2012

Saturday, August 25, 2012

Friday, August 17, 2012

Tuesday, August 14, 2012

Thursday, April 12, 2012

Adding A Customized Comment Form To Your Blog

Customize The Blogger Comment Form To Suit Your Blog Layout

What's New In it?

How To Create this About Us page?

Hide Widgets

Need Help?

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