How To Create a Full Width Page and Remove Sidebar on Blogger

Blogger is a powerful blogging platform that allows users to create and manage their own blogs. One of the features of Blogger is the ability to create full width pages, which means that the page will take up the entire width of the browser window. This can be useful for creating pages such as landing pages, contact pages, and about pages.

To create a full width page on Blogger, follow these steps:

Step 1: Go to Blogger.com >> Add NEW Page/Post

This will open up the Blogger post editor.

Step 2: Now select HTML TAB on Blogger Post Editor

This will switch the post editor to HTML mode.

Step 3: Paste the following CSS and XML Code:

<style>
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer {
  display:none !important;
}
#main-wrapper {
  width: 98%;
  float: none;
  margin: 0px auto;
}
html {
  overflow-x: hidden;
}
.post {
  width: 97%;
  margin: 15px auto;
}
.post h3 a {
  text-align: center;
  padding: 5px;
}
</style>

This CSS code will hide the sidebar, pagination, and other elements from the page, and make the main content area full width.

Step 4: Replace width:98% according to your needs, you can even uses pixels instead of percentage i.e. 960px.

You can adjust the width of the main content area to your liking.

Step 5: Now Publish it and then visit your site to witness a perfect full width page without sidebar.

Once you have published the page, you can visit your blog to see the results.

Explanation of each line of code:

#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer {
  display:none !important;
}

This line of code hides the sidebar, mid-sidebar, gapad2, blog pager, post header line 1, and post footer elements.

#main-wrapper {
  width: 98%;
  float: none;
  margin: 0px auto;
}

This line of code sets the width of the main content area to 98%, and centers it on the page.

html {
  overflow-x: hidden;
}

This line of code prevents the horizontal scroll bar from appearing.

.post {
  width: 97%;
  margin: 15px auto;
}

This line of code sets the width of the individual posts to 97%, and centers them on the page.

.post h3 a {
  text-align: center;
  padding: 5px;
}

This line of code centers the post titles and adds 5px of padding to them.

You can adjust any of the CSS code to your liking. For example, if you want to change the width of the main content area, you can change the width: 98% value.

Once you are happy with the CSS code, simply publish the page and visit your blog to see the results.