CLASSIC MENU FOR MY BLOGSPOT

Menu is good !dea if your blog content many post so, with menus you can easily arrange them. Menu should be good looking for any blog so visitor attract by it. Here you get a classic menu for your blog and a way to get any color for it so it can match with your blog theme. 

Why you should get a menu for your blog?

I advice you create a menu in your blogger if you have lots of content on different topic.

If you are writing on lots of topic then you should use label widget for your blog.

• A menu can easily let visitors know on how many topic you are writing.
• Visitors can divert on your other posts.
• It's increase time spend on your site.
• If visitors once like your content then they also visits your other posts and pages.

GET THE MENU

           STEPS:-

• Firstly open Blogger<layout<add a gadget
• And add a page gadget to your blog.
  
• Now open Blogger<template<edit.
• After that press ctrl+f and type ]]> .
  
• Just above it paste the code given in BOX-1.

/*
BOX-1
MENU
----------------------------------------------- */
.uppermenu{
padding:50px;
width:180px;
font-family: 'Open Sans',arial,sans-serif;
position:relative;top:auto;lefT:-50px;
box-shadow:3px 0px 0px #0066cc;
-moz-box-shadow:3px 0px 0px #0066cc;
-webkit-box-shadow:3px 0px 0px #0066cc;
list-style-type:none;
text-transform:capitalize;
background:#eeeeee;
border-top:10px solid #eeeeee;
border-bottom:10px solid #eeeeee;
text-align:left;
}
li.listli{
padding:10px;
}
a.listlia{

padding:10px;
}
a.listlia:hover{
background:#none;
}
.selected{
box-shadow:6px 0px 0px #0066cc;
-moz-box-shadow:6px 0px 0px #0066cc;
-webkit-box-shadow:6px 0px 0px #0066cc;
}

• After pasting code of box-1 type <ul in serachbox and press enter .
  
• now carefully replace this with code given below in gray box then click save template.

                            <ul>

        <b:loop values='data:links' var='link'>

          <b:if cond='data:link.isCurrentPage'>

            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>

          <b:else/>

            <li><a expr:href='data:link.href'><data:link.title/></a></li>

          </b:if>

        </b:loop>

      </ul>

  <ul class='uppermenu'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected listli'><a class='listlia' expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li class='listli'><a class='listlia' expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>
        </b:loop>
      </ul>

How to change font align center, right and left.

• For left: do not need to change anything it is by default left 
• For center: If you want the links on center then replace  text-align:left; with text-align:center; in uppermenu.
• For right:  If you want the links on center then replace  text-align:left; with text-align:right; in uppermenu.

How to change menu color
It is very easy to change the color of menu side border but be careful.

• First open the given link w3school colors.
• Now choose the color that you want for your menu from w3school colors.
• carefully replace 0066cc in box-1 from everywhere with your six digit code.
• and click save template again.

Be careful when you changing the code '#' and ';' are important code do not remove single of them by mistake. 

UPDATE:-
When you hover the menu you get that it is going to click.
Add the following code in box-1 

li.listli:hover{
box-shadow:4px 0px 0px #0066cc;
-moz-box-shadow:4px 0px 0px #0066cc;
-webkit-box-shadow:4px 0px 0px #0066cc;
}

You get a classic menu for blog. Hurry up manage your pages. I will be back soon with new menus, searchboxes, labels etc. with there new looks...