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

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.

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

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

Comment With:
OR
Choose Wisely!

46 comments

August 27, 2012 at 12:29 PM

thank you body awesome job :)

August 27, 2012 at 2:23 PM

Thanks very much i will use this trick in my blog

August 27, 2012 at 3:04 PM

Awesome article brother. Keep up your hard work.

August 27, 2012 at 6:15 PM

very nice explanation and waiting for widgets. You are helping us very well thanx bro. plz read my comment on last post and bro i have checked the images they have lines in my windows, plz help

thetechshell.com

August 27, 2012 at 6:35 PM

Nice Post about anthor page layout Style ...

Thanks Syed ..

August 27, 2012 at 7:48 PM

Thanks i already use this widget.
check my page demo Contact Us Page

August 27, 2012 at 9:41 PM

Brother I Am Using New Blogger Official Template So That Widget Is Not Working In My Blog...???

SR
August 29, 2012 at 1:01 AM

Nice post bro, but it not working in my template
check my custom search page
Tech Blog

Thanks

August 29, 2012 at 8:16 AM

Plz bro how many days i have to wait for solution of that problem plz reply, because i don,t want to use another template and redesign taht again plz reply.

I think you understand how feels as i am in tention.

TheTechShell

I am very thankful to you every time you helps me.

Editorial Team MOD
August 29, 2012 at 8:35 AM

Brother I Think the POST and SIDEBAR IDs are different on your Template. Send us your Template via contact.mybloggerlab.com and we will optimize the coding for your theme. Peace

Editorial Team MOD
August 29, 2012 at 8:36 AM

Send Us your Template @ contact.mybloggerlab.com and we would find out the problem. Peace

August 29, 2012 at 8:12 PM

Brother On This Email Address Template Doesn't Sending...???
contact.mybloggerlab.com
Bro I Think Something Is Wrong On That Email...!!!
Please Check And Reply Peace...

Editorial Team MOD
August 30, 2012 at 2:46 AM

Dude Attach the XML Template to Mediafire.com then Send its Link in the Contact Us. Peace

August 30, 2012 at 7:02 AM

Dude thats post is really awesome!
But you still not prepared my Logo!
Please send it to me &
I need your help to customize my template!

November 16, 2012 at 9:02 PM

HI I M JATINKHARB :)
I HAD TRIED IT BUT I CAN NOT ABLR TO CREATE FULL WIDTH PAGE.
THE GADGETS AND SIDRBARS APPERS.I WANT FULL WIDTH WITHOUT ANY SIDEBAR OR GADGETS PAGE. PLEASE HELP ME......



MY BLOG ADD. IS HTTP://WWW.JATINKHHARB.BLOGSPOT.COM/

Editorial Team MOD
November 17, 2012 at 1:57 AM

The Blog URL Which you have provided is deleted.

November 18, 2012 at 2:12 AM

soory !!!!!!
the right on is this :::::
http://jatinkharb.blogspot.in/

November 18, 2012 at 2:43 AM

its not working on my blog http://regnumfinancials.blogspot.com/ :( i want to hide sidebar from all static pages.

November 18, 2012 at 4:20 AM

the same problem is mine ... http://jatinkharb.blogspot.in/

November 18, 2012 at 5:41 AM
This comment has been removed by the author.
November 18, 2012 at 5:42 AM

@jatin Kharb try hiding individual gadgets from static pages, and then paste the above given code. i'm working on this right now, http://regnumfinancials.blogspot.com/

November 19, 2012 at 1:44 AM

now i have change my template you can watch and then suggest me the right way :)

November 20, 2012 at 9:49 AM

really awesome dude its really cool but i want to this with my 404 page so please do any help my blog is http://haseebnet.blogspot.com

November 20, 2012 at 5:54 PM

Hi it;s not working on my blog... :(

Editorial Team MOD
November 21, 2012 at 12:32 AM

Can you Provide us the details what problems you are facing? so we can help you.

February 13, 2013 at 11:44 AM

perfect..

February 24, 2013 at 8:00 AM

hello syed i was tried with all the all the google custom templates but no template is working with this code.
please decode it?

March 1, 2013 at 7:15 PM

Please help me. I have a blog and I want a page to remove the side bar. This is the page. I saw your article in the web and I was searching for an answer with no results. Please help me. This is a third party template:
http://www.poemasalacarta.com/2013/01/contenido-gratuito.html

March 6, 2013 at 4:15 PM

I am Mariam used every single spell worker on the internet, spent untold amounts of money and discovered they are all fakes...i was the fool though; doing the same thing over and over again and expecting different results. In the end, I decided that I wanted a tarot reading to know what my future held for me; I contacted a woman who lives locally to me and she told me about a man named (Olalude abija); he does not advertise on the internet, has another job for income, has no set prices, makes no false promises and refuses to help anyone that cannot be helped and even helps
for free sometimes, he will give you proof before taking money. He is a wonderful man and he was the only person who actually gave me real results. I really hope he doesn't mind me advertising his contact on the internet but I'm sure any help/ extra work will benefit him.contact him as oduakar1@live.com He travel sometimes.i cant give out his number cos he told me he don’t want to be disturbed by many people across the world..he said his email is okay and he’ will replied to any emails asap,love marriage,finance, job promotion ,lottery Voodoo,poker voodoo,golf Voodoo,Law & Court case Spells,money voodoo,weigh loss voodoo,any sicknesses voodoo,Trouble in marriage,HIV AIDS,Barrenness(need a child),good Luck voodoo,it's all he does Hope this helps everyone that is in a desperate situation as I once was; I know how it feels to hold onto something and never have a chance to move on because of the false promises and then to feel trapped in wanting something
more!

March 11, 2013 at 9:29 AM

hi,...
I really like your article about hiding sidebar . It was not useful for me. My site is http://www.needonetouch.org/. Do you like to associate with me? We could share our knowledge to improve our blogs simultaneously. So kindly mail me about your opinion. I am waiting for your opinion
one touch
Akhil

June 25, 2013 at 6:07 PM

he can you help me it doesnt work http://ferizaj1.blogspot.nl/ please check it out and let me know

Editorial Team MOD
June 27, 2013 at 12:09 PM

Use this CSS

#rsidebar-wrapper { display: none; }
#main-wrapper { width: 980px!important; }

July 22, 2013 at 4:11 AM

Strange. All that code did was delete the footer for me. For some reason, I can't figure out how to delete the sidebar...

Editorial Team MOD
July 22, 2013 at 10:14 AM

What you are trying. There is no need to edit Footer?

August 11, 2013 at 6:22 AM

Great Bro. This article helped me to make my site awesome

October 6, 2013 at 5:39 AM

It seems not working on me dude..i used blogger.

Editorial Team MOD
October 14, 2013 at 5:24 PM

You BLOG URL? And tell the error

April 27, 2014 at 1:51 AM

i removed one side bar, but the other one is not removed:
http://mntzzr.blogspot.com/p/quran.html

Editorial Team MOD
April 27, 2014 at 6:00 AM

Go to Blogger >> Pages >> Your Page >> Edit PAGE >> HTML TAB

Paste this at the end of the code

<style>
#main-wrapper {
width: 100%;
}
div#main2-wrapper {
width: 100%;
}
div#sidebarleft-wrapper {
display: none;
}
</style>

June 1, 2015 at 6:25 PM

Hi it's working on me but the width is not full. Can you help me?
http://kuyadijae.blogspot.com/p/forum.html

April 11, 2016 at 9:22 AM

Thank you

July 13, 2016 at 6:46 PM

fxscordips.blogspot.in sir its not hiding my middle column ,i have 3 column site

Editorial Team MOD
July 17, 2016 at 2:02 AM

Please provide me your blog URL?

July 18, 2016 at 12:29 PM

I have a third party template, and I successfully removed the sidebar from a single page. But I can't seem to take the page to full width...

Editorial Team MOD
July 26, 2016 at 11:37 PM

Can you please provide me your Blog URL?

Cheers

August 29, 2016 at 9:33 AM

thanks brother,...

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.