How to add the sidebar to your Blogger pages

Hi guys! Let's talk about removing the full-page option from your Blogger pages today. We code most of our templates to be full-width on any page (what's in your navigation bar). This is a highly requested feature, so we made the decision to make all our templates like this last year.

Not everyone loves this feature, though, so I wanted to give those of you who don't want it the ability to change this to the Blogger default (where the pages look just like the posts, with the sidebar displayed) without having to pay us to adjust your code. If you'd rather not tackle this (though it really isn't too tough!), you can add this listing to your cart and let us know in the Notes at checkout that you'd like your sidebar reinstated on your Blogger pages. 

If you're up for the job, follow along! Or if you prefer video tutorials, you can checkout the video tutorial here.

The full-page width Blogger pages look like so:

You'll notice there's no sidebar. This can be a handy feature since it gives your blog a professional, website-like feel. It distinguishes the pages from the posts. But if it's not your cup of tea, let's jump right in and add the sidebar back! To start, you want to backup your template. From "Template," hit the "Backup/Restore" button:

Then hit the "Download full template" button and that will save an XML file for you. This is your backup in case anything happens to your template when you adjust the code.

Now let's go back to "Template" and hit the "Edit HTML" button:

You'll want to hit the "Format template" button and wait for a second until the button is no longer highlighted, or until the page appears to sort of refresh. 

You'll know it's done if you hit Control or Command (depending on whether you're on a Mac or a PC) + "f" and you get a search box:

In the search box, you'll paste the following and hit enter.


(if that doesn't work, you can just paste: /b:skin)

It should highlight the code like you'll see below:

Directly below </b:skin> you'll see the code I've highlighted below. You'll want to grab and highlight the code from <b:if all the way to </b:if>, like so:

And delete it. Then hit "Save template"

Refresh your blog on a page and you should now have your sidebar!

Chelsea Hibbard

Greenville, SC