Hide or remove sidebar in static pages of blogger blog

If your blogging platform is blogger or you  are conversant  with it, you will notice that all blogger pages are not different from blogger posts in terms of appearance

Sometimes people want to display their content without sidebar. At that time, you will remove all sidebar widget from your blogger sidebar, that idea is wrong. But here I mentioned you simple and easiest way to remove sidebar from the static pages.
if you notice.... This blog about us page doesn't have a sidebar
 But Today, I'll teach you how to make your pages different from your posts by hiding the sidebar of all of some of your pages

I'll be giving out 2 different ways to hide side bar for static page in blogger



METHOD 1

APPLYING THE STYLE TO ALL STATIC PAGE

Hiding the Sidebar and Footer :




Note: Always Back Up Your Template
before making any change to it.


  • Use CTRL F to locate ]]></b:skin>
  • Copy and paste the below code snippet just after/below ]]></b:skin>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.sidebar,.footer {display:none;}
#main-wrapper{width: 95%; float: none; margin: 0 auto;}
</style>
</b:if>

For bloggers operating on mobile devices and you cannot edit your template. Trust me I gat your back... Lol

  • Log into your Blogger dashboard
  • Go to template 
  • Then to customise 
  • Then to advance 
  • Click on add css 
  • Paste the code given inside the box then
  • save template 

That's all

Click here :Easiest method to remove Powered by blogger Attribution

METHOD 2

APPLYING THE STYLE TO ONLY SELECTED STATIC PAGES

If you use the above code, it hides all static page sidebar
But if you want to hide specific page sidebar and not all your page
Then follow the instructions below


  • Log into your Blogger Dashboard if you are not already logged in
  • Navigate to Pages
  • Locate the Static Page you want to add the style to
  • Click on Edit
  • Switch to HTML section  and paste the below code snippet above the whole page content


<style>
.blog-pager, .footer, .post-footer, .feed-links, .sidebar { display:none !important;}
.main-inner .columns {width: 100%;padding-left:0 !important;padding-right:0 !important;}
</style>

That's all.
Feel free to contact me if you had a problem  about this tutorial

Click here :Tutorial on how to submit your blog Sitemap to Google without error



author-picAbout author
olaitan Michael aka CRYSTAL is a professional blogger and a freelancer,he designs and sell professional templates and blogs you can contact him through 08106511037 and 07053356460 or his mail Olaitanmichael94@gmail.com

Comments