Simple CSS menu with hover effect

If you don't like the classic blogger menus you can choose to use simple and cool menu with a hoover effect. The menu will show text and a link to your pages. It is very simple easy and will fit for most of the blogs. So let's get started with this.

First we have to add the CSS. 

• Go to Blogger Dashboard>Design> Edit HTML

• Backup your template 

• Press CTRL+F and find ]]> and paste the following code above it.

    ul#navlist {

        display: inline;

        list-style: none;

    }

    ul#navlist li {

        float: left;

        width: 60px;

        height:60px;

    }

    ul#navlist li a {

        width: 50px;

        height:50px;

        padding:5px;

        display:block;

    color:#fff;

        text-decoration: none;

        font-size:7pt;

        font-family:arial;

        line-height:50px;

        text-align:center;

    border-right:1px solid #fff;

        border-left:1px solid #fff;

        border-top: 5px solid #fff;

        border-bottom: 5px solid #fff;

        background: #003663;

    }

    ul#navlist li a:hover {

        border-top: 5px solid #004a80;

        border-bottom: 5px solid #004a80;

        background:#004a80;

        font-size:9pt;

        font-weight:bold;

    }

Once you have done that save your template.
Now, click on the button below and select your blog and add the code

One

Two

Three

Four

Five

Six

" />

Go to Blogger>Design>Page Element and edit "Custom Menu" and do the following changes

• Change "one" "two"  "three" and so on with the text you want to show up inside the menu
• You can delete a line
• to
if you don't need them all

• Change "#" without quote to the link corresponding to the text you choose for the menu

Optional:

• You can drag the box inside the page element to choose where you want the menu to show up.

• You can change it's color by customizing the CSS by changing the value of color hex #XXXXX

Credit:
The credit for the codes goes to CSSHowto.com