Get the latest updates from us for free

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



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,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.



       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:

 Thanks to all Authors of MegaBloggerLab to develop this amazing page-style.. If have any difficulties during this tutorial then don’t hesitate to drop your comments. Till then peace blessings and happy stretching.

7 comments:

shakeel asghar on 23 February 2013 at 12:49 said...

I could not refrain from commenting. Very well written!
Download book and drivers

Hammad Ansari on 23 February 2013 at 17:16 said...

@ Shakeel Asghar
Buddy thanks for liking and commenting. Keep visiting.

Ronald Ramboanga on 19 April 2013 at 00:54 said...

Yes! The post occupied the full width but the sidebar is still there and overlaps the contents. Can you help me?

Anonymous said...

I find your blog VERY helpful. I did what you ask but I got one tiny problem and I don't know how to solve it. I want my image to be width to width but as you can see there's about 15px on the left post padding that I can't get rid off. how would you suggest i do that?

I really look forward to your help.
http://commasg.blogspot.ca/p/blog-page.html

Sabrina Tan on 21 May 2014 at 00:31 said...

it didnt work on mine :(
www.gypsytan.co

Bihroz Ahmad on 9 December 2014 at 18:25 said...

nice... :-)
http://trailersbbc.blogspot.com/

Mirza abul rahman on 2 October 2015 at 19:40 said...

not work

https://howtomobiles.blogspot.com

Confused? Feel free to ask

 

Techies

Sponsors

Sponsors

Protection Status

Follow me on Google+

MyFreeCopyright.com Registered & Protected

Advertisements!

Advertisements!

Followers

Copyright © 2012 All Rights Reserved. Any Article on This Blog can not be repost or reproduce in any form without the permission of Author.