Add Fixed Horizontal Menu to Blogger Blog

This navigation bar gets semi-transparent if you scroll on the next paragraphs and it is slightly listed by fading out and becoming almost transparent. If the user hovers over it, the menus becomes opaque again.  Inside of the navigation there are many links, a search input plus a bottom and top button allowing the user to navigate a bottom or top of the page.

Step 1. Go To Blogger >> Template >>Edit HTML

Step 2. Search Below Tag ( CTRL + F  )

</head>

Also Like :- How to Show and Hide Widgets in Blogger 

Past below code above/after </head> tag. 

<style type="text/css">
#nav{
    height:35px;
    border-bottom:1px solid #ddd;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfwZ2dGU2ml2JdXr0fGoxdMsjtbE45ikEKoMLPlsBIbGXEtESTou_dxedOn-7kbL9VpvbZVDHVjvB22swjnb6PmaYf-osImeQRn23RvGM_gfOsBEoj_2z1fs19ckVoFjj561UU6-htFv-5/s1600/navbar.png) repeat-x center left;
    z-index:999999;
}
#nav ul{
    height:25px;
    list-style:none;
    margin:6px auto 0px auto;
    width:600px;
}
#nav ul li{
    display:inline;
    float:left;
    margin:0px 2px;
}
#nav a{
    font-size:11px;
    font-weight:bold;
    float:left;
    padding: 2px 4px;
    color:#999;
    text-decoration: none;
    border:1px solid #ccc;
    cursor: pointer;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-1rxSjkqjHlPMKh6-KzGqloKt8MBrLF91_3mS1-nFfnB__Z4caQklTvacZ4tyYsepqmsXJmVz0G1x-OmDMtQNZk6k0pVXT8tyc_U2EOu-3i0-XjRFZL69IAGNvejWKACA_BwT2Z7pq5V/s1600/overlay.png) repeat-x center left;
    height:16px;
    line-height:16px;
}
#nav a:hover{
    background:#D9D9DA none;
    color: #fff;
}
#nav a.top span, #nav a.bottom span{
    float:left;
    width:16px;
    height:16px;
}
#nav a.top span{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4jD3Av2xQ_ta7oghRLxkhcnS9gF339rs_xoquDRRdvi9ph4iOIBx0QKEFFYicvpJq6RLH6y6jsngddv6i6se8ghKECZyV6RVUoRl8-zoISKmqrtI-6mVXJFpAePfcPEPm_7LsRmv_jaU/s1600/top.png) no-repeat center center;
}
#nav a.bottom span{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTKrEAkCsp66kM5asvwYT-9L5eksYReChK8iixSMGm-717O73B1fnKm48-obm82M_0LKuM8zoZc44GnuVtcvfRQ0VCv0asIrAFACEbFD50MZIQruEZ5yi2_-urxG8YnKmeD9Nh_OZhzdoU/s1600/bottom.png) no-repeat center center;
}
#nav ul li.search{
    float:right;
}
#nav input[type="text"]{
    float:left;
    border:1px solid #ccc;
    margin:0px 1px 0px 50px;
    padding:2px 2px 2px 2px;
}
input.searchbutton{
    border:1px solid #ccc;
    padding:1px;
    cursor:pointer;
    width:30px;
    height:22px;
    background:#E8E9EA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOyAPzDyVS0HS3ldVaC0g13gFyRuAFdLEvDaIatUxHfAIsi6ZfHeFHz6tWyau1ZIdouIX9Tr-z74VySAU9s_WPo5-rc7JT_Ff4XDcTS-syQ3JnU_XzQat0h-WI2fRyCsoRE0ruaRkjeTby/s1600/search.png) no-repeat center center;
}
input.searchbutton:hover{
    background-color:#D9D9DA;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type="text/javascript">
            $(function() {
                $(window).scroll(function(){
                    var scrollTop = $(window).scrollTop();
                    if(scrollTop != 0)
                        $('#nav').stop().animate({'opacity':'0.2'},400);
                    else
                        $('#nav').stop().animate({'opacity':'1'},400);
                });
                $('#nav').hover(
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'1'},400);
                        }
                    },
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'0.2'},400);
                        }
                    }
                );
            });
        </script>

Step 3. Now Search ( CTRL + F ) This Tag

</body>

Also Like :- How to add page number navigation in blogger

Step 4. Above </body> tag Paste Below Code.

<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a href='URL address'><span>Link 1</span></a></li>
<li><a href='URL address'><span>Link 2</span></a></li>
<li><a href='URL address'><span>Link 3</span></a></li>
<li><a href='URL address'><span>Link 4</span></a></li>
<li><a href='URL address'><span>Link 5</span></a></li>
<li><a href='URL address'><span>Link 6</span></a></li><li class="search">
<input type="text"/><input class="searchbutton" type="submit" value=""/>
</li>
</ul>
</div>
<div id="top"></div>
<div class="desc"></div>
<div id="bottom"></div>
<div class="scroll"></div> 

Note: Replace URL Address and Links with the name of links that will appear in the menu

Now Save the Template