Add Horizontal CSS Menu Bar in Blogger

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

/*NavBar --------------*/
#navbar{
        width: 780px;
        height: 48px;
        overflow: hidden;
        margin: 0px 0px 20px 0px;
        padding: 0px;
}

.navbar-top{
        width: 910px;
        height: 9px;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
 
}

.navbar-bottom{
        width: 910px;
        height: 9px;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
       
}

.navbar-mid{
        width: 910px;
        height: 30px;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
     
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4s0ZDasufsQpYGVlAatE4mdxnn58FhH1TJ-K6mZhxyIO1K7gHw4n8BuCghRPmx3GfjFwBBKIGQKybkMDVjB3WHXSo2MLkGOR1e7WWtjqoUnQJ0bdLVSvAVJd-TqeJmSEiVlf9m6_FgVI/s1600/black1.png);
}

.navbar-mid ul{
        padding: 0px;
        margin: 0px;
        list-style-type: none;
        display: inline;
}

.navbar-mid ul li{
        height: 30px;
        float: left;
        padding: 0px;
        margin: 0px;
        display: inline;
        border-left: 1px solid #292929;
        border-right: 1px solid #555;
}

.navbar-mid ul li a:link, .navbar-mid ul li a:visited{
        display: block;
        margin: 0px;
        padding: 8px 10px 8px 10px;
        font-size: 11px;
        font-weight: bold;
        text-decoration: none;
        text-transform: uppercase;
        color: #FFFFFF;
}

.navbar-mid ul li a:hover{
        font-color: #FFFFFF;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx4BrMvvxzSQCuyZHJD6ElyBPSZcm87GSSKV3tWfztI4q8NphKy2vERI9cr_6Y_l-EfvYtdW45H-p1YP_7eFbWLjkS2WwfiV_Yg2FLO9nbmdEXez6CZ14TEcgVGLVeaxfTHxLu5q9QCEc/s320/hover.png);
}

.single-black-bar{
        float: left;
        width:1px;
        height: 30px;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
        background: #292929;
}

.navbar-mid ul li.current_page_item a:link, .navbar-mid ul li.current_page_item a:visited, .navbar-mid ul li.current_page_item a:hover {
        display: block;
        margin: 0px;
        padding: 8px 10px 8px 10px;
        font-size: 11px;
        font-weight: bold;
        text-decoration: none;
        text-transform: uppercase;
        color: #FFF;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinKkg-cYHnR8DmvKYcvi3V-BQjj8O1pVKeNV_RyKAjVDcDi4hA3EIbZBzDgyEvlftZJ6zLMXI9de_QBZsnb9VO5vp-UIoM7Ut7kLSgieQ9nuFSO4yL8_pgOExreC8PQOUdyH5YdFoYg8s/s320/black2.png);
}
/*Bloggertrix.com --------------*/

5. Now Go to Design >>page Element

6.Click Add gadget (under your header)  and Select HTML/JavaScript  

7. Now paste paste below code

<div id="navbar">
            <div class="navbar-top">
            </div>
            <div class="navbar-mid">
                <ul>
                    <li class="page_item">
                        <a href="Homepage URL" title="Home">Home</a>
                    </li>

<li class="page_item page-item-2"><a href="URL" title="About">About</a></li>
<li class="page_item page-item-18"><a href="URL" title="Contact">Contact</a></li>
<li class="page_item page-item-20"><a href="URL" title="Portfolio">Portfolio</a></li>
<li class="page_item page-item-22"><a href="URL" title="Make Money">Make Money</a></li>
<li class="page_item page-item-24"><a href="URL" title="Themes">Themes</a></li>
<li class="page_item page-item-26"><a href="URL" title="Comments">Comments</a></li>
<li class="page_item page-item-28"><a href="URL" title="Links">Links</a></li>
<li class="page_item page-item-30"><a href="URL" title="Forum">Forum</a></li><li class="page_item page-item-32"><a href="URL" title="Download">Download</a></li>
                </ul>
<div class="single-black-bar">
                </div>         
            </div>
            <div class="navbar-bottom">
            </div>
        </div>

Replace URL With your URL
Replace Blue color words with any names you want to put as menu name.

8. Now save  HTML/JavaScript  
You are done.

Posted by Durgesh on 12:53. Filed under Add Css Menu . You can follow any responses to this entry through the RSS 2.0. You can leave a response or trackback to this entry