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:-
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
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
50 comments:
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.
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.
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!!!
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
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?
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.
Thanx a lot!!!!! my Stretch Denim template looks GREAT now!!!
hi bizwhiz ..
I was curious if in converting two to three column can we add one more "post body " instead of side bar ?
Hi suhas D
Is this another hypothetical question?
Yes, hypothetically possible.
big help for new bloggers like me. keep posting useful tips like this. thanks!!!
Thanks for helping us to improved our blog. I always check your blog if there's new tips that you can give us.
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
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.
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/
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!
Hi Sijo
You are using a Minima Stretch templates. We have done three column articles for Minima but not the stretch template. Maybe soon.
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.
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!
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
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*
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.
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.
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!
Great stuff ..Thank you very much .
My site looks cool with the three column look
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.
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...
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
This blog is just great. I have used three column in my two blogs.
Thanks for posting.
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 ?
You rock!! This was so helpful and easy to follow. Thank you so much for sharing your knowledge. Really can't thank you enough!
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
cool!!!
Nice blog
i have some Blogger template.. plz use this templates for your blog..its free...(i m not spammer)
thank you...
Actually, now that I look even further, I think my template may be outdated. I'll keep looking. Thanks.
Thank you very much.
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!
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
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.
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.
Hi, pls ignore my previous comment. i managed to have 3 columns now. Thanks so much for the tips!
thank you very much. Well explained and easy to follow.
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?
Thank you for the information. I have recently created a new site with this information and will give you credit.
:)
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.
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!
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
How come i got this
The new widget id "NewProfile" is invalid for type: Profile
???
I followed your instructions properly.
:(
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...
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?
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.
I have something to say ...