Blogger Tips And Tricks|Latest Tips For Bloggers

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<style type='text/css'>#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;            }</style>

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id="button">

<ul>

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

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

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

<li><a href="#">Java Script</a></li>

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

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

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

</ul>

</div>

You are done.

Demo

File Under : css