How To Remove Sidebar and Create Full Width Page in Blogger

As we've been talking about Blogger design since the creation of this blog and we would like to continue providing you with better understanding of Blogger blogs. As we told, Blogger blogs are entirely customize-able and you can change your blog design by yourself if you have the essential knowledge of web designing. In blogger we always see a static template that usually has a header, a navigation bar, a sidebar, post body and a footer. And whenever, we visit any page of our blogger blog we see all the elements all the time. Whether you visit a tab page or a single post you'll see sidebar and footer etc altogether. Today I would like to share a trick with you guys about creating a full-width page in blogger without sidebars etc. We can change our static blog to a dynamic one by using this trick. We'll use few CSS properties to hide our sidebar and create a full page. CSS3 is a magic, and nothing is impossible now!

Before going to apply this trick on your blog, take a look at the demo which is my about me page: 

LIVE DEMO

How to Create a Page Having no sidebar?

In order to add a page that don't have a sidebar; You'll use few codes of CSS. It shouldn't take you more than five minutes to finish the task. Now follow the steps below:

• Log-in to Blogger 
• Create a New Page or Post
• While editing the page click the HTML Editor tab (Appears at top left)
• At the beginning of the page insert following CSS code

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

Now switch back to compose editor and edit your post/page as the way you want. When you insert all the content in that page; simply publish that. After publishing view that page on the browser, there won't be sidebar and page will be with its full width. 

Note: You can also apply this trick on your existing pages or posts. Just edit those pages/posts and click the HTML tab and at the beginning of the page insert the above CSS code.

Customization

You can change the Width:100% to any value you want. If you want the page smaller then reduce the 100% to your own width.

Why & When Should I Create a full page? 

It's an important question, this trick shouldn't be applied on all pages. However, you can use it on some of your pages which you want to be looking more attractive and professional such as About Me Page, Contact Us Page, Services Page and etc etc. Also you can use this trick on normal posts when you announce something like such as: an offer or an event. 

Need Help?

If you need further help regarding this tutorial or regarding this blog then just leave your comment below the post. I will be happy to answer your queries shortly.

Advertise Here Free

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you Subscribe to our regular Email Updates!

Share This Story, Choose Your Platform! >>