Make Blogger Home Page Full Width and Hide Sidebar

Make Blogger Home Page Full Width and Hide Sidebar

20
data:blog.title
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.
Make Blogger Home Page Full Width and Hide Sidebar
4 Stars stars - "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 va...

Post a Comment

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

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

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

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

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

ভাই আপনি বাংলা কথা জানেন? রাব্বি ভাই আপনি কি বাংলাদেশি?
খুব ভাল লাগছে। আপনার সাইট থেকে অনেক কিছু শিখেছি।
আচ্ছা ভাই, ব্লগার ডিফল্ট 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

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

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

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

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

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

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

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

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

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

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. :)

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *