Pages

Sunday, October 23, 2011

Remove Navigation Bar, Attribution and Blank Space

Above the blogger in web browser a bar is seen, which is called Navigation Bar; Similarly below the blogger page a space where a text "Simple Blogger: Powered by Blogger" is seen which is called Attribution of the blogger. I found these two bars annoying, it does not look like a professional, so i deleted these two extra features of blogger. There is also a option to report against the blog to Google. So, there is a possibility of getting blacklisted that's why it is always better to remove these. Following is the simple way of removing the same.
At first go to Design -> Edit HTML. Then tick 'Expand Widget Template' as follows:




Now find inside the HTML Code using Ctrl + F, the following code:
/* Variable definitions
Now Paste the following Code above the said code:
#navbar-iframe {
display: none !important;
}
Save template and view the blog. The Navigation Bar should have disappeared.
Now again find the following code using Ctrl + F:
Attribution1
Now select the following code as shown below:


and delete the following selected code:
<!-- outside of the include in order to lock Attribution widget -->
<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
<b:if cond='data:feedbackSurveyLink'>
<div class='mobile-survey-link' style='text-align: center;'>
<data:feedbackSurveyLink/>
</div>
</b:if>
<div class='widget-content' style='text-align: center;'>
<b:if cond='data:attribution != &quot;&quot;'>
<data:attribution/>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget> </b:section>
Now save the template. A Warning message will be shown, Click Delete Widget as follows:


Now you are done. View the blog.
You would notice that Navigation Bar disappeared. But the corresponding space as shown below is present which if you think you can remove the space also.


Simply search the following code:
$(body.background.override)
Put the following code after the said code:
margin-top:-25px;
You will get the space removed as follows:

Update: To remove the space occupied by the navbar, you can do use the following trick:
Replace:
#navbar-iframe {
display: none !important;
}
with:
#navbar {display:none;}