Home
Blogger

Make Blogger Home Page Full Width and Hide Sidebar

Learn how to make Blogger Home Page Full Width and Hide Sidebar. Display full width content on blogger homepage.
tricks

By using simple trick we can make Blogger template unique. Tweaking is the main part to add variation on it. So in this tutorial I will show you an amazing tutorial where we will able to hide the template sidebar from Blogger home page and make the post area full width both in Blogger custom and default template. But if any user click on post then s/he will able to see blog post with sidebar. This is really amazing trick. Those who are using a Blogger template with medium width then you can use this trick that will help to make your home page widget and sidebar will appear after entering into post page.   Though previously I have shown how to create a Full width page on Blogger static page. But now by following this tutorial you will able to hide sidebar from blogger home page and display full width home page.

 Recommended: 

Applying the trick on Blogger Default Template

Below tutorial for those who are using Blogger default template like Simple, Picture Window, Awesome int. So please follow the instruction from below.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML

Step 3 Now find the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)  

Step 4 Copy the code from below and Paste the code after/below </b:skin> 

<b:if cond='data:blog.url == "http://www.BloggerSpice.com/"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>

Step 5 Now simply hit the Save template Button. 

Customization

  • Replace the http://www.BloggerSpice.com/ with your Blog URL.

Applying the trick on Blogger Custom Template

If you not using Blogger default template then you can use below steps. So please follow the instruction.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML

Step 3 Now find the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)  

Step 4 Copy the code from below and Paste the code after/below </b:skin> 

<b:if cond='data:blog.url == "http://www.BloggerSpice.com/"'>
<style>
#main-wrapper .post {
padding-left: 1px !important;
padding-right: 1px !important;
}
#main-wrapper { width:99%!important;}
.post { width:99%!important; }
#sidebar-wrapper, #midsidebar-wrapper .post-header-line-1, .post-footer, {
display:none !important;
}
</style>
</b:if>

Step 5 Now simply hit the Save template Button. 

Customization

  • Replace the http://www.BloggerSpice.com/ with your Blog URL.
Recommended: 

 You have successfully applied the trick. Now check your Blog and see that sidebar is not showing on your Blogger homepage. But when you entering into your post page then sidebar is showing. Another positive of this feature is that it will increase your page loading time. Because Blogger sidebar always contain 3 to 4 widget, so this trick hiding the sidebar on Blogger home page, for this reason your Blogger template will load faster. Thanks.

29 comments

  1. ভাই আপনি বাংলা কথা জানেন? রাব্বি ভাই আপনি কি বাংলাদেশি?
    খুব ভাল লাগছে। আপনার সাইট থেকে অনেক কিছু শিখেছি।
    আচ্ছা ভাই, ব্লগার ডিফল্ট template কি এস ই ও friendly????????
    • Blogger default template SEO friendly na. But jeheto created by Google hired designer seheto search engine a valo rank a thake. Ami recently SEO 2015 er koyekta basic code share korci. ooita ad korle jekono template SEO friendly hobe. Tutorial ta nicher link a paben.

      http://www.bloggerspice.com/2015/01/search-engine-optimization-SEO-guideline-in-2015.html
  2. cant remove my blogger left side bar .. please help
    my site is www.hindichudaikikahani.com
  3. nothing happen and there is need a
    i changed url added but dont works to me

    • Hi Enis.. The question is what type of template are you using? If you are using default tempalte then it will work 100%. But it case of custom template you must find out your post-wrapper first. Different designer use different type coding. incase of my Blog

      #main-wrapper contains all post. some developer name it #post-wrapper or #content-wrapper so its depend on coding. first find out what exactly your template coding then use script for custom template. :ey
  4. This does not work. If I copy your code it gives you an error message that you are missing a in the first set of code. Even after adding that it does not work.
    • Hi Yuppicide.. thanks for comment. One code was missing. I just added and updated the script. I hope now it will work. :up
  5. Nice... i bet this will surely help you.. visite here http://goo.gl/ASNCvo
  6. Hello bro i want remove my blogger sidebar but my problem not solove ! please vijit my site and give me suggestion website www.kmgweb.in
    • Hi Kavita Verma,
      Do you want to remove or hide sidebar? FOr hiding sidebar please follow the URL from below.

      http://www.bloggerspice.com/2015/02/how-to-hide-sidebar-in-blogger-for-full-width-post-page.html

      :t
  7. mine does not work. can u please check ?
    i'm using this blogger default template
    http://wahteber.blogspot.in/
    • Hi Anys Nadhilah, I just check your blog. It is working. You sidebar is not visible. :)
  8. :) :) :)
    thank you so much ^_^
    • welcome Khaled, nice to see you here..;)
  9. thank you so much :) :) :)
    ^_^ ^_^
  10. Thank you, this worked for me.
    • Hi Lynn Fowler, Congrats..Nice to see you here.. For any further help feel free to write me. :)
  11. It seems that I can't make it work. Can you check mine and see what went wrong?
    http://cv-dsgns.blogspot.com
    • Hi CV-Design, :(
      I can't land in your blog homepage, because it is redirect me to another page. In source code I have added script and it is working.

      Check this script in another site that has couple of Blog post. Thank You.
  12. oh thx i searhed in hours never worked but it works

    • Hi there :)
      I'm very glade to hear that. Thanks.
  13. hi sir, sidebar from homepage in not hiding.... post page and page sidebar hidden successfully,
    in case of homepage, i tried content-wrapper etc, but still sidebar visible.... if you please help me.... thanks... wainting
    my blog link
    https://www.urdutravel.com/
    • Hi,
      It depends on the blogger theme coding. I think you need to use different conditional tags for hiding.

      Please follow this tutorial for comprehensive guidelines to hide and show widgets in the Blogger theme.

      https://www.bloggerspice.com/2014/11/Ultimate-Guidelines-for-implementing-Blogger-Conditional-tag.html

      Thank you
  14. Hi, I used your given code for full width post by hiding sidebar, it works well. But i was just wondering if a user wants to see sidebar then there should be hide and unhide sidebar collapse button. Is this code available then please share.
    • Hi, Thanks for commenting. Unfortunately, I didn't develop this type of widget. However, for show and hide, you can use universal conditional tags. https://www.bloggerspice.com/2014/11/Ultimate-Guidelines-for-implementing-Blogger-Conditional-tag.html
Go Up