Wednesday 4 December 2013

How to Hide Sidebar in Blogger and Create a page without Sidebar

 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!

How to Create a Page and Post 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.

Need Help
? If you need further help regarding this tutorial or regarding this blog then just leave your comment on ASK QUESTION page on my blog. I will be happy to answer your queries shortly.

Socialize This Post
SOCIALIZE IT →
SHARE IT →