Hide Sidebar and make a full width Page in Blogger

Hello Friends, In this tutorial we will discuss in four sections or we can take four Cases. Our topic will be “how to hide a sidebar in static pages and create a full width page on blogger”. We will first take an example to show importance of hiding the sidebar and make a full width page. Suppose you had to create a 404 error page to your blog-spot blog, now you need a full width page in which you had to put your content, then what will you do? Don’t worry we will here to solve your problem. Now you had to put this syntax on blog template. We will discuss this problem by taking four cases. So First Let me clear about this tutorial.

Hide Sidebar and make a full width Page in Blogger

Why We Need To Create A Full Width Page

Uses Of Full Width Pages In Blogger-Full Width Pages are used to create a neat and clean page which is commonly called a 404 error page. Do you ever noticed that our contact page, color code generator page, error 404 page doesn't contain sidebar . Yes this is possible due to A CSS Code That i am using in my blog. Now I am going to share that codes with you. Now let's Consider Your Blog , it doesn't automatically adjust width of your pages but if you put this little code on your blog you will able to customize the whole sidebar in static pages or posts.

Advantages Of Creating Full Width Page Or Post

There Are many advantages  of creating a full width page some of them are listed below-

• Neat And Clean Page Or Post
• Attract More and More Visitors To your Blog
• You Can Hide Things Like Sidebar, Header And Footer

So There Are 4 Cases In which I will tell you how to hide
sidebar and make a full width page

  Also Read:
Hide Blog Widgets In Certain Pages.
Best Time To Post On Social Media

CASE 1

In Case 1, If you want to Hide Sidebars and header only then you can use this css code.
Now Follow These Steps to hide sidebar and header.
Note- You can Apply this code to pages as well as posts.

• Go To Blogger > Dashboard > Templates.
•  Now Click On Edit HTML.
• Search For </b:template-skin> and paste this code below.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>  
        .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;
        }
</style>
    </b:if>

•  Now Save Your Template, And Visit To your Site or a particular page you will see these changes. 

CASE 2

In Case 2, If you want to Hide The Whole Contents Including Header, Sidebar, Footer, Side Columns  on a Particular Post or Page then you use this code so it will hide the whole contents except body of the page.
Now Follow These Steps to hide sidebar and header.
Note- You can Apply this code to pages as well as posts.

• Go To Blogger  And Open a Post Or Page.
•  Now Click On HTML section.
• Now Paste This Code Below.

<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>

•  Now Save Your Template, And Visit To your Site or a particular page you will see that the whole Contents is hided except post body. 

Conclusion

This Tutorial is all about hiding sidebar, in case if you have any problem with this content then please give us feedback to improve more. Kindly Share Our Post To Social Sites. Have Fun :-)

Share This

Related Post