A Great Point to Learn Tutorials

[an error occurred while processing the directive]

Saturday, February 7, 2015

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(http://2.bp.blogspot.com/-bckLuWC19WY/T0fJrpz6iKI/AAAAAAAAA54/MC8DKKhTLIo/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(http://4.bp.blogspot.com/-ShWV7a_7odE/T0fKLcy3gxI/AAAAAAAAA6A/ub4aoZ_NKdI/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(http://3.bp.blogspot.com/-qZmlI1Nz7DM/T0fKY6MehSI/AAAAAAAAA6I/kb4LSXK4SpI/s1600/top.png) no-repeat center center;
}
#nav a.bottom span{
    background:transparent url(http://3.bp.blogspot.com/-kYbPC6fbW8E/T0fKkpgn4uI/AAAAAAAAA6Q/1EMaMEmc51o/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(http://2.bp.blogspot.com/-Z8TTNFUcQmQ/T0fKvZHRH_I/AAAAAAAAA6Y/FFtC1_2_snA/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



Posted by Akhilesh Kumar
I am a blog scientist and a professional blogger. we writes on this blog about Tech, Blogging, SEO, Social Networking Site, News, Search Engines Traffic, Make Money Online, Life Hack and Making Life Successful. our blog NagarUntari receives 10k Pageviews per month. I do share on this blog regularly.

Let's Get Connected: Twitter | Facebook | Google Plus

0 comments:

Post a Comment

Comment FAQs

     * All Comments are Moderation.

     * Please Do Not Spam Us.

     * Please Don't Use any Link or HTML Code with Comment.

FOLLOW ON SOCIAL SITE

774 People
6684 Followers
6584 People
654 Fans
44 Followers
574 People

CATEGORIES

  • Blog Tips (88)
  • Blog Widget (7)
  • Computer Tips (1)
  • make money (33)
  • Mobile Tips (13)
  • nagar untari city (12)
  • Other Tips (16)
  • SEO (41)
  • Social (5)
  • wordpress tips (22)

GET DAILY UPDATES

Subscribe for our all latest news and updates
[an error occurred while processing the directive]