Wednesday, July 7, 2010

How I Added Three Columns to my Blog

Have you ever seen a blog on the very popular Blogspot.com that uses more space that the standard template they give you?
Well, I managed to update my blog recently to a three column site.
Here is how I did it.
This works with the minima template which is the one I am using and I believe to be one of the most popular.

Step 1
Go to your blogger dashboard and select the Design tab and then the Edit HTML tab.

Then make a backup of your template before continuing by clicking on Download Full Template.

Then select all the text inside the html edit textbox and copy paste it to Notepad or some similar text editor.


Then save this file as MyBlogOld.txt.
This ensures you have the original html to copy paste back if you don’t like the result or make a mistake.
Then save the same file again as MyBlogNew.txt.
This is the file you will work with.


Now, all you will need to do is make some small edits to specific lines in the html code inside the this file, before copying and pasting back to your blog.
Tip – I copied the entire file back into the blog template after each small change and did a preview to see how it was going.

Now, do a search for the following bit of code:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


Change the line highlighted in red to this:
width: 950px;
(NB 950 is about the widest you should go to allow for different browsers.)

Step 2: Change the width of the sidebar
Search for this section of code:
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Change the line highlighted in red to this:
width: 250px

Step 3 : Add a second sidebar
Find and copy this whole section from your file (this is the section we modified in the previous step):

#sidebar-wrapper {
width: 250px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Then paste this section of code immediately beneath the original set of code. Then change this line in your newly pasted code:
#sidebar-wrapper {
To say this instead:
#new-sidebar-wrapper {
This is because each sidebar must have it’s own unique name.

To get the new sidebar to appear on the left, change the line
float: $endSide;
to
float: $startSide;

when I previewed my blog I found that the post section was too close to the new column. To fix this I added margin-right: 50px;
Underneath the
float: $startSide;
line.

Note: You can add a left or right margin to your right hand column as well as your main section. Once you start adding elements to your new column you may decide to play around with these settings.

The main section code is as follows:
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


You can also try changing the width of the main section to
width: 450px;
I decided to leave mine as is.

Now the really nifty bit – how can I add new gadgets to this new column?
Find the following piece of code :
< id="'content-wrapper'">

< id="'crosscol-wrapper'" style="'text-align:center'">
< class="'crosscol'" id="'crosscol'">
< id="'Image1'" locked="'false'" title="''" type="'Image'/">
< id="'CustomSearch1'" locked="'false'" title="'Search" type="'CustomSearch'/">
<>

!—New lines here
< id="'main-wrapper'">
< class="'main'" id="'main'" showaddelement="'no'">
< id="'Blog1'" locked="'true'" title="'Blog" type="'Blog'/">
< /b:section>

And insert this piece of new code where I have indicated in red above.

Save your text file and then copy – paste the entire contents to your html code box on your blog.

Click preview to see how it looks before saving.

Once you are happy, save your changes.
Then go to the Page Elements tab and you should see three columns like this



Important note:
Do not load heavy java script type gadgets to the left hand column, as this column gets load before the rest of the blog, which slows the loading of your page to the bit that counts – your posts!
Things like simple file links are ok.

I got the How to for this from this really informative site which goes into a lot more detail and also explains many other ways to change the look of your blog.
Things like changing the width of your header and header picture to match the new width of your blog, which I haven’t tried yet.

Thanks also to JohnDeereMom who led me to this site.

No comments:

Post a Comment