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.

Comments: 29
data:blog.title
Make Blogger Home Page Full Width and Hide Sidebar

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.

How to Make Blogger Home Page Full Width and Hide Sidebar?
Make Blogger Home Page Full Width and Hide Sidebar

Related Post

Speak Your Mind

মোঃখায়রুজ্জামান বাপ্পি says: 2/10/2015

স্যার আমার ব্লগের নাম টিউনসহট
কিন্তু গুগলে সার্চ দিলে আসে না ।
আবার ব্লগের লিঙ্ক দিলে আসে ।
কি করবো?

Mohammad Fazle Rabbi says: 2/10/2015

Bangla site search engine a enlist hote time lage. But ulta palta SEO code add korle Google Boat sitemap a dhokte pare na.

মোঃখায়রুজ্জামান বাপ্পি says: 2/10/2015

স্যার আশা করি ভালো আছেন ।
আপনার 3D Mug Templete এ কোন পোস্ট এ ক্লিক করলে Related Posts আসে ।
আমার প্রশ্ন ব্লগে Related Posts এর নাম পরিবর্তন করবো কভাবে ?

আবার ওই Related Posts এ Read More এর নাম পরিবর্তন করবো কভাবে ?

Mohammad Fazle Rabbi says: 2/11/2015

Edit HTML option theke Related Posts search dau tarpor text ta change koro. Read More eki vabe change koro.

Salek ahmed says: 2/11/2015

ভাই আপনি বাংলা কথা জানেন? রাব্বি ভাই আপনি কি বাংলাদেশি?
খুব ভাল লাগছে। আপনার সাইট থেকে অনেক কিছু শিখেছি।
আচ্ছা ভাই, ব্লগার ডিফল্ট template কি এস ই ও friendly????????

Mohammad Fazle Rabbi says: 2/14/2015

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

Lund ki pyasi bhabhi says: 7/08/2015

cant remove my blogger left side bar .. please help
my site is www.hindichudaikikahani.com

Enis Baydemir says: 2/23/2016

nothing happen and there is need a
i changed url added but dont works to me

Mohammad Fazle Rabbi says: 2/23/2016

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

abul kalam says: 4/08/2016

Your article is Very well examined and well presented. And thank you for all.
For more about It.
http://blogsnucleus.blogspot.com

Mohammad Fazle Rabbi says: 4/13/2016

Welcome Abul Kalam. I am very glade to hear that. :dn

yuppicide says: 4/16/2016

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.

Mohammad Fazle Rabbi says: 4/17/2016

Hi Yuppicide.. thanks for comment. One code was missing. I just added and updated the script. I hope now it will work. :up

Farooq Ahmad Bhat says: 5/03/2016

Nice... i bet this will surely help you.. visite here http://goo.gl/ASNCvo

Kavita Verma says: 10/02/2016

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

Mohammad Fazle Rabbi says: 10/02/2016

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

MH Shakil says: 11/03/2016

My blogger site www.codefighter.cf shows more reply thread in one comment.... how can i change it ?

Mohammad Fazle Rabbi says: 11/03/2016

Hi MH Shakil, I didn't understand what exactly you want to ask. I just visited your Blog. but this template has many problem. I think you didn't install it properly. Next and previous button is not displaying and added many wrong script. :ey

anys nadhilah says: 12/05/2016

mine does not work. can u please check ?
i'm using this blogger default template
http://wahteber.blogspot.in/

Mohammad Fazle Rabbi says: 12/06/2016

Hi Anys Nadhilah, I just check your blog. It is working. You sidebar is not visible. :)

khaled SH says: 1/07/2017

:) :) :)
thank you so much ^_^

khaled SH says: 1/07/2017

thank you so much :) :) :)
^_^ ^_^

Mohammad Fazle Rabbi says: 1/07/2017

welcome Khaled, nice to see you here..;)

Lynn Fowler says: 1/11/2017

Thank you, this worked for me.

Mohammad Fazle Rabbi says: 1/11/2017

Hi Lynn Fowler, Congrats..Nice to see you here.. For any further help feel free to write me. :)

CV Designs says: 3/27/2017

It seems that I can't make it work. Can you check mine and see what went wrong?
http://cv-dsgns.blogspot.com

Rabbi Khan says: 3/27/2017

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.

Anonymous 5/30/2017

oh thx i searhed in hours never worked but it works

Rabbi Khan says: 5/31/2017

Hi there :)
I'm very glade to hear that. Thanks.

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *