At the top of Blogger Blogs you will a navigation bar known as Navbar.It enables your readers to sign in to their blogger account,search for blogs, go to next blog, customize, etc...But many of us wants to remove Navbar to give a professional look to our blog.In this post I am going show you 4 simple tricks to remove or auto-hide the Navbar.



Four Tricks To Remove Blogger Navbar


Now lets go to the tutorials.



  1. Go to Blogger Dashboard > Design > Edit HTML.
  2. Backup/Download your template. 

    1. Hide Blogger Navbar

    • In your template search for ]]></b:skin>
    • Add below code just above it.          

     

    #navbar-iframe {
    height:0px;
    visibility:hidden;
    display:none;
    }
     
    Preview your template, you will find out that the Navbar is not visible (hidden), and then save your template. 
     

    2. Auto Hide Navbar (i.e visible on hover) 

    Add below code just above ]]></b:skin> if you want to visible the navbar on mouse hover.

     

    #navbar-iframe{
    opacity:0.0;
    filter:alpha(Opacity=0);
    }
    #navbar-iframe:hover{
    opacity:1.0;
    filter:alpha(Opacity=100)
    }
     

    3. Remove Blogger Navbar Completely

    Add below code just above </head> tag in your template.


    <!-- <body>
    <div></div> -->
     
     
    This will not only completely remove the blogger navbar but you may also
     find that the quick edit pencil and wrench icons are also removed. This
     can be a big help for those people who are trying to validate their 
    blogger templates.
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
     
    
    

    4. Remove Navbar from New Designer Templates from Blogger

     

    For the new template designer, follow any one of the tutorials above but use "navbar" instead of "navbar-iframe". So the example of whole code is:


    #navbar {
    height:0px;
    visibility:hidden;
    display:none;
    }
     
     

     

     
Next
Newer Post
Previous
This is the last post.

0 comments:

Post a Comment

 
Top