How to Create a Full Width, Sidebar-Free Blog in Blogger

In this article, I’m going to walk you through a super useful trick how to make your blog page full width in Blogger by hiding the sidebar. Now, if you’re someone who likes a clean, minimal, and modern look for your blog, this is something you’ll definitely want to try.

A full-width layout helps remove distractions and gives your content more focus. We’re not going to use any third-party plugin or complicated stuff just a simple custom CSS code. And don’t worry, I’ll guide you step-by-step, starting from backing up your theme to adding the CSS code and adjusting the layout using inspect tools.

So grab your laptop, follow along, and by the end of this article, you’ll have a sleek, distraction-free blog layout ready to go. Let’s dive right into it!

Why Make the Blog Page Full Width?

Making the blog page full width gives you a:

• Cleaner look
• More modern appearance
• Minimal and distraction-free design

You can remove all the clutters and keep it simple!

Step 1: Backup Your Blogger Theme

Before we begin, it’s important to take a backup of your theme:

1. Go to Theme.
2. Click on Backup.
3. It will download an XML file.
4. You can later use this XML file to restore your Blogger website.

💡 I have already made an article on how to take backup in a Blogger website, so you can reference that article as well.

Step 2: Inspect the Blog Page

To make the blog page full width:

1. Right-click on the blog page.
2. Click on Inspect.
3. Set the display mode as Responsive.
4. Increase the width of the display.

Step 3: Hide the Sidebar Using CSS

1. Select the sidebar element by clicking through the DOM tree in Inspect tool:
   • You will find elements like:
     • main flex
     • content dropper
     • container
     • main
     • sidebar
2. Click on the sidebar wrapper.
3. Add the following CSS:display: none;

The sidebar is now removed!

Step 4: Center Align the Content

Now we need to center align the content:

1. Right-click on the page again and click Inspect.
2. Select the main container.
   • You’ll see something like:width: calc(100% – 320px);
3. Change that to:width: calc(100% – 0px);

Now the content should be displayed in full width.

Optional: Create a Narrow Width Layout

If you want a narrow width layout instead:

1. Right-click and click Inspect.
2. Select the main element.
3. Change the width to a fixed value like:width: 250px;
4. Select the main section and find the container that includes both main section and sidebar.
5. Add these CSS rules:display: flex;
   justify-content: center;

Step 5: Add CSS to Blogger Theme

1. Go to your Blogger theme.
2. Click on Edit HTML.
3. Scroll to the end of the CSS code, just before the </b:skin> tag.
4. Paste the CSS rules for:
   • Hiding the sidebar:.sidebar-wrapper {
      display: none;
     }
   • Center aligning the container:.main-container {
      display: flex;
      justify-content: center;
     }
5. Click Save.

Step 6: Refresh and Check

• Refresh your blog page.
• Check if the content is now center aligned.
• Everything should look clean and organized.

How to Restore the Sidebar (Optional)

If you want to restore the sidebar, follow these steps:

1. Right-click on the page and click Inspect.
2. Search for the sidebar element.
3. Remove the display: none CSS.
4. Select the div container and remove:display: flex;
   justify-content: center;

Alternatively, you can use the theme backup file to restore your website.

Summary

Here’s what you need to do to hide the sidebar and make the content center align:

• Use a little bit of CSS code.
• Inspect elements to find the sidebar element.
• Set display: none.
• Select the container holding both the main section and sidebar.
• Set display: flex and justify-content: center.