Hide Sidebar in Blogger blog using Custom or Third party Templates


Sometimes your blog will not have enough space in the post body because of the 2-3 sidebars. This will not allow you to add large images. Hiding sidebars is the best solution for this problem. This article helps you to hide the sidebar of a custom template of a Blogger blog.

Hiding sidebar in Blogger blog


Do you have a 3-column or 4-column custom template and you are not satisfied with the small size of the current post body? Well, sometimes we will need to keep 2 or 3 sidebars or columns to organize the whole content of our blog. This happens when you have a big number of posts of wide variety of catgories. But it might make the post body very short, right? Even though you have used the 100% width of any third party template, sometimes the size of article body will be less and it will not entertain the readers of your blog. If your articles have big sized images, then the page will look weird. By unknowing the right solution for this problem, many bloggers remove any of their sidebars from their template to get more space in the body of the posts. It is definitely one of the available solutions for this problem, but it is never the solution that you really need! This tutorial will help you to hide one or two or all of the sidebar of your blog with custom Blogger template.

In such cases, you can hide the sidebars when the visitor enters to the article page. This can be done by editing your Blogger template and adding a few codes into it. So that you will keep the sidebars safe in the home page and your readers will be happy to read your articles also. To do so, just follow the below steps carefully. In the end, you will say thanks to me, I am sure!


1. Goto your Blogger Dashboard, click Template > Backup/Restore > Download Full Template (downloading your template is not must but it is recommended if you are a newbie in editing template).
2. Now click Edit HTML > Proceed.
3. Put a tick at Expand Widget Templates.
4. Now you have to find the class name used for your sidebars to use them in the code that is to be added. For this, just try to find (ctrl+f) wrapper in your template. You will get a number of results, keep checking until you find something similar to #lsidebar-wrapper or #leftsidebar-wrapper or #rsidebar-wrapper or #rightsidebar-wrapper etc. Here the first two wrapper names indicate your left sidebar and the last two wrapper names indicate right sidebar. Try searching sidebar only if you did not find with 'wrapper'. Now copy the wrapper name of the sidebar that you need to hide and paste it somwhere else.
5. Now find the tag </b:skin> and paste the code given below at the bottom of it.


<!-- Start www.Techulator.com : Hiding the sidebar in Blogger blog -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#lsidebar-wrapper
{
display: none;
}
#main-wrapper
{
width: 70%; background:#fff;
}
</style>
<!-- End www.Techulator.com : Hiding the sidebar in Blogger blog -->


Change the #lsidebar-wrapper with the name of the sidebar wrapper name in your template. This code is to hide any single sidebar in post pages and if you want to hide both the right and left sidebars, then use the code given below.


<!-- Start www.Techulator.com : Hiding the sidebar in Blogger blog -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#lsidebar-wrapper
{
display: none;
}
#rsidebar-wrapper
{
display: none;
}
#main-wrapper
{
width: 70%; background:#fff;
}

</style>
<!-- End www.Techulator.com : Hiding the sidebar in Blogger blog -->


Now change the wrapper names #lsidebar-wrapper and #rsidebar-wrapper with the matching names in your custom Blogger template. And you can adjust the size of the post body by changing width:70% with your needs like 60%, 80%, 100% etc.

6. Now save your template and check whether it works. It will work for sure if you have followed me correctly. I love to hear from you and I am happy to help you. Feel free to add comments. :)


Comments

Guest Author: Nidhi Verma08 Jul 2015

I am unable to remove my blogger left side bar. Please help. My site is hindichudaikikahani.com



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: