Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

banner
We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Aug 12, 2007

Digg This Story

Three Columns Denim Template

We continue with our series of 3 column templates tutorials, this time outlining the steps to take to convert the 4 standard Denim Blogger Templates – Denim, Washed Denim, Stretch Denim and Stretch Denim Light - into three column templates. Where necessary, we shall reduce the extra space in both the left and right margins of the templates and add a new sidebar. Since we are only expanding the template, the same sidebar colors and styles that make the Denim templates attractive shall be maintained.

If you are not sure what your template is, under Template -> Edit HTML, look for the “Blogger Template Style” Name. If it is “Denim” you can follow this guide to customize your template.

For other templates, please refer to our articles and guides on:-
1. Three Columns Dots Template;
2. Three Columns Minima Template;
3. Three Columns Rounders Template;
4. Three Columns Rounders 2 Template;
5. Three Columns Rounders 3 Template;
6. Three Columns Rounders 4 Template;
7. Three Columns Sand Dollar Template;
8. Three Columns Scribe Template;
9. Three Columns Thisaway Template (I);
10. Three Columns Thisaway Template (II).

Note: Some sites offer free three-column templates for download. If you are starting a new blog, you may look up these sites and use their templates. However, if you have an existing blog and merely want to expand the template to include another column, our guides would be helpful. What we do is to take the standard Blogger templates and show you how to add a new sidebar. This approach gives you total control over the changes, and if you have bookmarked this page, you can revisit it in future should you want to reverse the changes. It is also a safer method, since there could be a few out there who may introduce malicious scripts or blog virus into their customized templates without you knowing.


The final three-column Denim template should look like this:-

Three Columns Denim Template

Before you begin to do anything, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.



Denim and Washed Denim Templates

The steps to add a sidebar to Denim and Washed Denim Templates are the same. When you are at Template -> Edit HTML, scroll to these lines:-

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}


We shall widen the Header to this:-

#header {
width: 950px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}


Next, scroll to these lines:-

#content-wrapper {
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: left;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-left: 14px;
width: 464px;
float: left;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}
#sidebar-wrapper {
margin-right: 14px;
width: 240px;
float: right;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}


Insert/amend the parts (shown in red):-

#content-wrapper {
width: 950px;
margin: 0 auto;
padding: 0 0 15px;
text-align: left;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-left: 14px;
width: 464px;
float: left;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}
#sidebar-wrapper {
margin-right: 14px;
width: 215px;
float: right;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}
#newsidebar-wrapper {
margin-left: 14px;
width: 215px;
float: left;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}


We have introduced a style definition for our new sidebar. You may have noticed that we have modified the width slightly in order to accommodate another column and yet not putting too much squeeze into the template. If you want to change the widths, by all means. Just adhere to the following guideline:-

(#content-wrapper width) = (#main-wrapper width) + (#sidebar-wrapper width) + (#newsidebar-wrapper width) + margins

We will have to insert something into the <body> section of the template before you can preview your new layout.

Further down the template, look for this and add the lines (shown in red):-

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>


The position where the code is inserted is important. The new code has to be above the <div id='main-wrapper'>.

This places your Profile in the left sidebar. Not to worry, you can remove that later. Now, “Preview” the template to view the changes and if you like it, click “Save Template”. Remove the Profile if you don't want it there. Refresh your Blog to see your new Three Column Denim or Three Column Washed Denim layout!

Stretch Denim and Stretch Denim Light Templates

Three Columns Denim Template

When you are at Template -> Edit HTML, scroll to where you see these lines:-

#content-wrapper {
margin: 0 2%;
padding: 0 0 15px;
text-align: left;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-left: 1%;
width: 64%;
float: left;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}
#sidebar-wrapper {
margin-right: 1%;
width: 29%;
float: right;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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/insert the codes (shown in red):-

#content-wrapper {
margin: 0 2%;
padding: 0 0 15px;
text-align: left;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-left: 1%;
width: 54%;
float: left;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}
#sidebar-wrapper {
margin-right: 1%;
width: 21%;
float: right;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}
#newsidebar-wrapper {
margin-left: 1%;
width: 21%;
float: left;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}


After that, scroll further down the template to look for this and add the lines (shown in red):-

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>


You will see your Profile in the left sidebar. “Preview” the template to view the changes and if you like it, click “Save Template”. You may now remove the Profile. Refresh your Blog to see your new Three Column Stretch Denim or Three Column Stretch Denim Light layout!

Align Header Title and Description

The Header title and description in the Denim templates are aligned to the left. To adjust them to the center or a fixed position in the Header, read the guidelines at Header Image and Title Alignment (I).

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

50 comments:

Uzair said...

Hey please don't include these tips like, 3 columns rounders, scribe....Blah blah blah..Plz include some good tips. I have certainly not subscibed to your feed for all these useless things.

bizwhiz said...

Hi Uzair

I am surprised by your comments. If you have followed the queries raised by the readers either in the comments to posts or in the chatbox, you would have noticed the requests by people asking for three column hacks to sand dollar, denim, thisaway, and so on. While they may not be useful to us (since we are using Minima), we think that as a service to these readers, we should include these guides. To say that these guides are 'useless' is an insult to all those readers who have found them 'useful'.

People use our guides for different reasons. While many of them benefit because they applied them to their blogs, there are also a number of others who simply want material to talk about in their blogs. Whatever the reasons, we believe that all bloggers out there respect the underlying principle - that the blog writers have the absolute discretion to write what they like. I am sure you would not want people to dictate what you ought to write about in your own blog.

Finally, based on our past correspondence, we verily believe that we have given you plenty of advice and help, more than what we have given majority of our readers. If you do not wish to continue subscribing to our feed, we can only say we are sorry to lose you.

Lil' Red Box said...

hi bizwhiz, i think i'm not in the same line of uzair. i find out yr blog is superb in giving the info.

not all yr readers are the experts...there r some newbie too. so i think yr blog is splendid and keep up the gud work!!!

Schwerin Moses said...

when i insert an Image in the mail bar, by using the custom layout option, i do not get any image in the blog...

can u pls help me out with this

bizwhiz said...

Hi Schwerin Moses

Are you referring to your "Me, Myself" blog? Where is the "mail bar" you are talking about? Is it in the header or left sidebar or right sidebar? Did you follow this guide to insert a third column? Was there anything else that you added or deleted?

Marsha said...

Thank you for the three column denim guide. I used it and all went well, I even gave you a shout out on my blog.

Raj said...

Thanx a lot!!!!! my Stretch Denim template looks GREAT now!!!

suhas D said...

hi bizwhiz ..
I was curious if in converting two to three column can we add one more "post body " instead of side bar ?

bizwhiz said...

Hi suhas D

Is this another hypothetical question?

Yes, hypothetically possible.

pinayrn said...

big help for new bloggers like me. keep posting useful tips like this. thanks!!!

Janna said...

Thanks for helping us to improved our blog. I always check your blog if there's new tips that you can give us.

cr8on said...

Hi, I have now modified my blog to have three columns, my blog also includes flickr slide show. When I am in Edit Layout the page elements are at the same height on the page. However, when I preview my blog the page elements are at the bottom of the page. I have tried changing the width of the flickr slide show but it does not help. How can I bring the page elements further up the screen?

Thanks

bizwhiz said...

Hi cr8on

Where did you insert the Flickr slideshow and your Profile? If you have inserted them in the 'crosscol-wrapper' section, they will be above your main post and sidebar. Should you want them to be aligned with your sidebar, go to Template -> Page Elements and move those elements to just above the "Blog Posts". Save and refresh your blog page.

Sijo said...

You are doing a great service by sharing this ideas. It is amazing. Really. I think I am too late to find out this blog.

I already designed my blog. It is two column, and I would like to change in to three column. I don't know how to find out the current template of my blog. If it is not in your list of 3 column template, is there common way to make a 3 column for all templates. In my template, the main and column width is specified in %values, not in pixel values. any may to make it 3 column.

I would like to suggest one more post for a method to backup all posts and format in a blog.

My blog http://tectip.blogspot.com/

Jeff Manulid, Philippines said...

FOUR COLUMN DENIM TEMPLATE

I really thank the owner of this site! You have been a great help! My site now looks the way I want it to be, check http://abkdinfo.blogspot.com

It's a four column denim template, I followed your tips on the three column and experimented a little on it and I came up with a four column denim template.

If you look at my blogspot, I used a different name for the fourth column (this is actually the third sidebar) by calling it abkdsidebar instead of newsidebar.

I also adjusted the widths and margins so that it would fit in a 980px (instead of 960px).

I hope this would be of help to others who want a four column blogger layout!

Again, thanks to the author of this blogsite! I can't thank you enough!

bizwhiz said...

Hi Sijo

You are using a Minima Stretch templates. We have done three column articles for Minima but not the stretch template. Maybe soon.

Judy Scooter said...

Thanks for making a years-long quest to find the right 3-column layout so fast and easy. It really comes down to putting the right things in the right places, and your perfect presentation has made this "dummy" feel really smart. Thanks again.

showtrotta said...

Thank you so much for posting this! I had been using the Denim template for a year and my right column always felt so long and cluttered.

Your explanation was so clear - it took me less than 10 minutes to do with absolutely no problems!

Thanks again!

Brisbane Computers said...

I installed your script, it works and looks great..there are a few errors on the page though.. Is anyone else getting that. see at Fill Your Money Box

huamulan03 said...

Thanks for this helpful and so easy to follow post ^^ Been looking for a way to convert my Denim template to three columns without uploading a new template and losing my widgets in the process. This has been a really painless way of doing it.

Arigatou! *bows*

Angie said...

I love this three column for Denim! And, I love how it looks on my blog.

However -- I have already heard from someone who uses Firefox that it has put everything from the third column above the main posting area and the original sidebar. I have tried tweaking numbers around, but I don't think that's it.

Anyone else had this issue or have any insight on why this might be happening? It looks fine in IE, but I would be so sad if I have to change back to 2 column just because it doesn't look right in FF.

Denim 3 Column said...

Tried it! Tested it! And it Works! Perfectly! And the best part is, I am in full control. Loved this tutorial so much, i "dugg" it. I have also used it to create "Denim 3 Column Template for New Blogger". A blog which will never compete with yours, but which I now use to create other blogs. Thanks for the tutorial! And I hope you don't mind my giving you a digg.

Anonymous said...

Thank you kindly for making this info available - one question though - the layout gets skewed when you go to "Edit Layout" to add a widget - you have to scroll across to show the right hand sidebar. I know there are fixes for this (some editing to the "wireframe"? - but I only know how to do it for a 3 column minima template).. If possible could you please let us know the code for fixing this?

Thanks again!

Arun Vijay said...

Great stuff ..Thank you very much .
My site looks cool with the three column look

Richard Neuman said...

I just followed your steps and they work like a charm! Copy and paste. Couldn’t be simpler. Perfect for a newbie Blogger like myself. Excellent site.

Todd Lohenry said...

I have wanted a 3 column format for over a year, but either couldn't find the template I wanted or didn't have the know how to do it myself. Thanks to you, I now have accomplished that objective at http://blog.e1evation.com. Your site is THE best site for modifying Blogger templates I have found - thanks for your great work...

MARKS said...

Many Thanks for this article. I have been trying to create a 3 column template for a while and you have helped me do that. after playing around with where to position the third column I stuck to your guidelines and place it on the left hand side of the page. Many Thanks again

Sunil Kumar Gupta said...

This blog is just great. I have used three column in my two blogs.

Thanks for posting.

radith said...

Hi Bizwhiz..Very Nice tips in here.
I have something problem with my template. If i changes something like size of my sidebar in edit html, another page element setting changes too. Example like adsense setting changes to default setting again but iam not changes the seeting of my adsense. Can you help me ?

Anonymous said...

You rock!! This was so helpful and easy to follow. Thank you so much for sharing your knowledge. Really can't thank you enough!

frnz said...

i've just removed my pyzam template and replaced it with a denim template..i was able to convert it into a three-column template thanks to your blog..keep up the good work..you're helpin' a lot of people

Mohd Faathir said...

cool!!!

Anonymous said...

Nice blog

i have some Blogger template.. plz use this templates for your blog..its free...(i m not spammer)

thank you...

Vraeden said...

Actually, now that I look even further, I think my template may be outdated. I'll keep looking. Thanks.

Nandagopa said...

Thank you very much.

dion said...

Thanks for this awesome tip... it worked well in my new blog.I used the Stretch Light Denim template. One problem i encountered was customizing the Fonts & Colors using Layout, the page just keeps on loading and i can't start editing. I don't know if i missed something. Anyhow, i managed to fix it. I used the Edit HTML instead then changed the color codes and it worked fine.
Cheers!

premierlens.blogspot said...

hi there..you are good at this..nice tutorial from you..i am currently making my very first blog..hope it's going well :) i use blogger and i try to make a stretched denim 3 column with your tuts. it is really works but i noticed that it is not same with your preview. i finally figure it out. there is some of the thing in html preview of the template is not the same as the real one.hope you can fix it. anyways you are really great..thanks

Tarun said...

http://tarun-kumar-goel.blogspot.com/

Please guide me to do my above blog a 3 coloumn Blog.

Pls Help!!

I'll be very Greatful.

Xchange said...

Hi, i tried to follow the instruction. I managed to expand the width, however, unable to see 3 columns after the amendment. can you help me to take a look at my blog: http://diyjewelryclub.blogspot.com/. Pls let me know where i have done it wrongly.

Xchange said...

Hi, pls ignore my previous comment. i managed to have 3 columns now. Thanks so much for the tips!

John Sokolowski said...

thank you very much. Well explained and easy to follow.

One Creative Life said...

Wow Thank you for this great tutorial! I followed your tips and it worked perfect. I have noticed that my pictures in my posts no longer can be clicked open into another window to be viewed larger. Is there a way to fix this?

Gaz said...

Thank you for the information. I have recently created a new site with this information and will give you credit.

:)

Shami said...

That worked perfectly for me. But can you please tell me how to make both sidebars to right side, instead of one at right and the other at left. Thanks.

color of sunshine said...

Hey, I really like your blog and thanks for the info it worked!

But I'm having a little problem. The columns are both on the same side. I can't figure out how to put the new column on the left side.

www.whateversaysi.blogspot.com or you can email me @: tescott608@gmail.com.

thanks for your help!

Julie said...

Hi bizwi

I think Uzair is a rather rude person to comment in such a way when you site is so helpful to various people.

I just wanted to comment on how brilliant I find your site. As someone new to blogging this site has been invaluable and even though I had a minima and am just in the process of trying to change it to 3 column the additional guides help by seeing how the different code lines change.
I am having a few issues getting mine to work, but won't give up!

Many thanks for all your guides and advice

Julie

Muslimah said...

How come i got this

The new widget id "NewProfile" is invalid for type: Profile

???

I followed your instructions properly.

:(

Brigitte said...

hi bizwhiz, i am using denim to convert it to three column, but i can't preview it coz it says that "newprofile is invalit for type - profile" in the div id newsidbar wrapper part.... pls help me...

Always Home and Uncool said...

I've successful switched to a three colum Strecth Demin - thanks! One question: If I wanted to, how would I go about changing the background colors of either JUST the sidebars or the main section?

Dr. Hamid Raihan said...

You have done an excellent job. I was looking for customizing my template. My interest is to start things from scratch. You have helped me a lot though this was my first visit. I think it has impressed me enough to come back again and again.
I still have a problem. While changing the Denim light to three column I added the last piece of code before the div id='main-wrapper'. It shows an error {The new widget id "NewProfile" is invalid for type: Profile} If you could work out a solution its fine. But I enjoyed the whole experience of changing the layouts.