Saturday, March 21, 2009

Win of the Week: Creating a third column on your blog

Well hello again! This week I'll be sharing with you the code needed to create a third column for your blog. Again, this will work for Blogger blogs only (as its XML). This is also useful info if you already have a third column but one gets bumped down below your posts or otherwise doesn't look just right.

Again we're working with your blog template, so you want to make sure you have it backed up first. The instructions for doing that are here - just make sure if you added a navigation bar after backing up that template that you go ahead and do it again so that your backup includes the nav bar code.

Once you've got that squared away, we're ready to work.

As always, I recommend you work on this in Notepad first. Take your template backup and do a "save as" so that you're working on a copy of your backup and have one you can use should something go wrong and you need to restore your blog template to its previous state.

Search for the styles section of your template. You'll see things like #main, #sidebar, etc. Look for something like #outer-wrapper. Its important to note that you may not have this code exactly. Hopefully the designer of the template you're using named it in such a way that you can figure out which is the outer wrapper.

The "outer wrapper" is like a bucket that will hold all of our other elements.

You need to adjust the width of this outer wrapper to be wide enough to hold the other elements. Most computer monitors are at least 1024 px wide. I made my outer wrapper slightly wider than that:

#outer-wrapper { width:1040px; margin:0px; text-align:$startSide; }

Its also important to note that while my blog has 'wrappers' for every element yours may not.That's OK. Just know that instead of looking for #sidebar-wrapper, you'll look for #sidebar, etc.

The column you have existing may be on either the right or left sides. Find the styles for that. Mine looked like this:

#sidebar-wrapper { width:220px; float: $startSide; }

So let's do a little math. If my sidebar (which was on the left to begin with) is 220px, the right-side one should be 220px also. That's 440. If the width of my outer wrapper is set to 1040, then my "main" or body section can be 600. Simple, right?

If you adjust these numbers and the preview of your blog is still off, it could be margins that are throwing you off. The margin is an area around the outside of the element. I made sure mine were set to zero. If you have 'margin' defined anywhere in the styles for each element, you can either delete it or set it to 0px.

I wanted to create a column on the right side that was exactly the same as that on the left. I basically did a copy and then paste of the #sidebar-wrapper and renamed it. So

#sidebar-wrapper { width:220px; float: $startSide; }

#right-wrapper { width:220px; float: $startSide; }

You can call this element anything you'd like, but you'll have to stay consistent throughout your code. Obviously if your pre-existing column is on the right, you could name this left-wrapper, etc.

The float:$startSide code is very important here. It tells the element to fall in line after the one before. If you don't put that in, the column will end up below the others instead of beside it.

(At the same time, if the column widths + main section width is greater than the outer wrapper width, this could cause your 3rd column to be bumped down much in the same way.)

If your blog's template does use wrappers, you'll also need to create a style for the sidebar itself. Again, I just did a copy/paste of the existing style for my left-hand sidebar.


#sidebar { padding:15px 15px 15px 10px; width:215px; background: #453531; color:#ffffff;


#right { padding:15px 15px 15px 10px; width:215px; background: #453531; color:#ffffff;

Next, scroll down until you find an area where the styles for the content of your sidebars is defined. You'll see things such as .main and .sidebar. (Preceded with a . instead of a #.)

Again, because I want them to be the same, I found the .sidebar code, did a copy/paste and renamed it.

.sidebar ul li { margin:0; padding-top: 0; padding-bottom:5px; padding-$startSide:15px; padding-$endSide:0;}

.sidebar p { margin:0 0 .6em; }


.right ul li { margin:0; padding-top: 0; padding-bottom:5px; padding-$startSide:15px; padding-$endSide:0;}

.right p { margin:0 0 .6em; }

Don't change anything else about this -- you may or may not have some of the code I show above. That's OK. We just need to add exactly the code that's already there for your new sidebar.

Alright - you still with me? We're almost done, I promise!

Scroll down some more and look for a section like this:

body#layout #sidebar, body#layout #sidebar-wrapper { padding: 0; width: 220px; }

This will appear further toward the bottom of your template. Again, we're just going to do a copy/paste and substitute the name we gave our new column. So in my case, this becomes

body#layout #right, body#layout #right-wrapper { padding: 0; width: 220px; }

(The section bolded is what I changed.)

OK, last thing folks. Next we'll look for the tag. This is the section that actually tells your blog what to look like; what appears where.

Again, you'll see something like this

You'll need to add an entry similar to what's there for the sidebar you're creating. Put this immediately below the other tags, inside the /div tag if there is one.

Further down from there, you'll see things like

You'll probably have a lot more rows that contain 'widget id'. These represent each of the items you have in your sidebar.

Again, we're going to copy/paste this sidebar-wrapper code (or similar if yours doesn't use wrappers) and change it from sidebar-wrapper and sidebar to right-wrapper and right.

You can cut out all but ONE of the widget id items. If you choose to put widget id 6 in your new column, then make sure you then delete the line containing widget id 6 from the other sidebar section.

You may find that you don't want whatever widget #6 is in your new column, but once you've completed these steps, your new column will show up on Page Elements screen under Layout and you can drag and drop elements back and forth.

That's it.

When you copy and paste your new blog template code into the 'Edit HTML' box, you'll want to preview it first to make sure it looks right. Code is tricky, in that if you have one small letter or character off the whole thing may not work. (Trust me - I know its infuriating!)

Once it looks good, click 'Save template'. You'll now see your new column under the Page Elements screen under Layout.

If this was helpful to you, please Stumble this post so that others may find it as well! You may want to subscribe to my feed so you don't miss other weekly 'wins'!


SkylarKD said...

Thanks for the tips! I've bookmarked this for future reference!

NicEmMOM said...

Can't you just do it for me? Just kidding planning on working on it this weekend since we have 5 days off! Talk soon!

flowerpot said...

You are clever! I am bookmarking this.

Kat said...

This was actually something I did by myself once. I am quite proud. Haven't been able to do a darn thing sine then though.... sigh!

NicEmMOM said...

i tried it, and i think i screwed it up so i will call you

Anonymous said...

I recently came accross your blog and have been reading along. I thought I would leave my first comment. I dont know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.


Anonymous said...

I recently came accross your blog and have been reading along. I thought I would leave my first comment. I dont know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.