How To Create a Full Width Page and Remove Sidebar in Blogger

Socialize It →

Tweet

46

Advertisements

Do you think in blogger platform you can neither hide a Sidebar nor can create a full width page? Blogger is not a flexible platform though, with the help of XML and CSS we can remove the sidebar and can even increase the width without facing difficulties whatsoever. If you have observed our 404, Advertise Here and Search engine page, then you may sense a massive difference between these and normal pages. The main intention behind increasing the width and hiding sidebar on certain pages is to transform your blog into a gorgeous looking website. If you are thinking to stretch the width of your site by removing sidebar, then you have landed on right destination because today we will be learning How to Optimize the Width of BlogSpot blogs.

Check Out Demo Of Full Width Page

How To Remove Sidebar and Increase Width of Certain Pages:

The steps are straightforward and would hardly soak 10 minutes to complete so just do as follows.

1. 1. Go to Blogger.com >> Add NEW Page/Post
2. 2. Now select HTML TAB on Blogger Post Editor
3. 3. Paste the following CSS and XML Code:

<style>
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }
</style>

1. 4. Replace width:98% according to your needs, you can even uses pixels instead of percentage i.e. 960px.

Additional Tips: If you want to exclude Titles from a certain page, then just paste the following code before </style> in above coding. Bots and crawlers will continue to fetch your Title, but human visitors will not view them because with the help of CSS we have concealed them.

.post-title, .post-labels, post-icons, post-author {display:none!important;}

1. 5. Now Publish it and then visit your site to witness a perfect full width page without sidebar.

How Does the Whole Process Works:

Now after successfully increasing the width of your page, you would be curious to learn how the whole process works. Fundamentally, there is no magic behind it because the whole credit goes to Style sheet (CSS). If you have noticed in above CSS, we have used {display:none !important;} which is responsible for hiding the sidebar and etc. Moreover, you can even use display:none to hide any widget from any page or post but make sure you attach proper CLASS Ids to complete the process.

Where and Why You Should Use Full Width in Pages?

Before we could jump onto our tutorial, let us first quickly rap up, where we can utilize the full-width pages. Now you may have seen those WordPress websites which uses stretched in size, whenever they want to add an Infographics to their posts. In that same way, you can either use them in about us or advertise here pages, so that you can gain maximum attraction out of your every visitor.

From The Editor’s Desk:

If you have noticed, we have also customized our 404 Page to Full-width and soon will be revealing its secret. Our developers are busy to create some marvelous widgets for blogger that will be released once the work got finalized. Alhamdulillah we have achieved more than 2000 fans on Facebook, while more than 4000 twitter followers and the number is rapidly multiplying.

Special thanks to Mustafa Ahmed Zai for helping us. From the beginning, he has been our mentor and continues to help us whenever it is required. If have any difficulties during this tutorial then don’t hesitate to drop your comments. Till then peace blessings and happy stretching.

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).