You probably have seen full width pages on Blogger and you wanted to make that happen on your own blog powered. Well there is no magic to making it work for you. In few easy steps I will walk you through how to remove Blogger Sidebar and create that most wanted full width page.
Remove Blogger Sidebar: How It Works
1. Create a new page
2. Edit the page in HTML mode
3. Insert this line of code below immediately after your content.
4. Save and publish page.
Hint: Some Blogger themes use Class instead if ID. If the above code doesn’t work for you, replace “#” with “.”
This procedure will only remove Blogger Sidebar from your page but it won’t display in full width. If you want full width, the procedure below will make that happen.
Activating Full Width Static Pages
Add this line of code to your page in HTML mode
Save and preview your page to reveal full width page.
Removing Meta Data
If you want to remove post author, post-icon, post-footer, post-header, you can use the snippet below on your page in HTML mode.
<style type=”text/css”>#.blog-pager, .post-footer .author, .feed-links, .footer-outer { display:none !important;} </style>
Global Edit
Now if you want to full width for all pages instead of selected pages, we will have to add a few line of codes to Blogger template.
Hint: Backup your Blogger template before proceeding with the process below.
1. Go to Blogger dashboard > Template > Edit HTML
2. Locate the snippet below using “Ctr + F”
</style>
3. Add the following codes below directly above the snippet above.
4. Save your template and create all your pages in full width without any sidebar.
Recommended: How To Install CommentLuv Enabled IntenseDebate On Blogger
Your Turn
If you follow this easy tutorial correctly, the entire process should work like a charm for you and your pages will no longer Blogger Sidebar. It’s that easy but I understand it can still be hard for a few persons, if you fall into this category it hasn’t worked for you, feel free to drop a comment. If it works for you, do not hesitate to drop a “thank you” comment. 🙂
Remove Blogger Sidebar: Update 1.0
Thanks to Valentin
Let us know what works for you. Cheers.
Hot:
17 Comments
Karnal Singh
Many a times we want to remove that sidebar on blogger.You have explained the topic in a very simple language….
Nosa E Nosa
Thanks for your warm comments Karnal.
Karl Bellz
Gracias! I really wanted to get rid of these sidebars on some of my pages
Nosa E Nosa
I am glad it worked for you Karl
obed
Thank you for this, i have been having a zeal to remove it but i really did not find it easy and you have just made it easy to move it out. Nice posts, thanks
Nosa E Nosa
Thanks Obed, enjoy the rest of the day friend.
rehan
thanks.. helpful
larry
Hi, I’ve tried this method several times now but it wont work. I only want 1 page on my blog to not have a side bar. its http://empireambition.blogspot.com/p/forum_6.html . I’m using the travel template on blogger. Can you tell me why its not working? Thanks for any advice
amy gretchen
I added the codes above to get rid of my sidebar and activate full width on my page HTML but it didn’t work for me. Any thoughts?
Mostly Sunny
Those that are having problems, change “sidebar-wrapper” to “sidebar” – it worked for me, anyway.
Sandra Harriette
[code][/code].sidebar{
display: none !important;
}
#midsidebar{
display: none !important;
}
#main{
width: 1000px!important;
float: left;
margin: 0;
#post{
width:1000px}
[code][/code]
Jennifer Tzivia MacLeod
This is the one that worked for me. Thanks, Sandra!
lijokv
It worked for me.thanks.if u do everything right as mentioned u will succeed.
Roadstar
I’m using a 2 sidebar, left and right layout. I have tried the code and sidebars hide but the page does not go full width. It’s as if the left sidebar was still there. How can I adjust the code?
Thanks!
Jitu
there are many times repeated “. which one is for the remove sidebar? I want to remove on my blog. http://www.sms-nepali.blogspot.com. plz, give me suggestion.
Valentin
Guys, I found a great solution from another blogpost.
It is very simple, just paste this at the end of the HTML of the page you want to remove the sidebar and go full width.
.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;
}
It worked really well for me 😉
Thiranja Lakrandika
Thank you very much. I just wanted to make a forum to my blog. However, when the forum has a sidebar It’s just like a joke. I tried so many things but nothing worked. So really thank you for guide you given.