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/AVvXsEhLWL5qfByeuZ2bHH84jpYM9ettR2MtWMk9uIm4RBiCLwUcvbdnOmdI9GWPErlLvFxYlAYvg6pDqXOteo7zFtMxYlDJ-SMy6qeFKk7DTBV5_CYShIL06uu3TSgEv-z7BetgD-JNltQz9vw/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/AVvXsEgM6ppySL7nOMhIAEOmsE7LkQ2NaprSix4seYnxB1NAu8wCEs0sUMr9w1YwT4WUJTXCAc1OKQNMOikqZOHMaltV8QXo_12mHdZgUn_mCkZ_FhfHPiusQWsNPuoxK7tdTKJXEsEEaJhB24c/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/AVvXsEhMZeQ570RdNLv7juPY7zmv4BbWvYqJTRzudDbvGJbieUi7jwUL6klmY_sSW0yo3xtq83ZyIM1EUrGnzcMlhg3SSL7rLMbF8Q3M12zwPvvTyG6zFQMI_I4T24S3Ww2-FRoSeE1NPZCN7K0/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.