We have been receiving a number of queries by users who wish to insert a third column into their Blogger templates but are using other templates like Scribe, Denim, Thisaway, No. 897, and so on. We have therefore set up a test blog using a different template each time and converted them into three column templates. In this article, we shall outline how you can add a third column or a second sidebar into the Scribe template. We have done up new background images to cater to the wider format.
For other templates, please refer to our articles and guides on:-
1. Three Columns Denim Template;
2. Three Columns Dots Template;
3. Three Columns Minima Template;
4. Three Columns Rounders Template;
5. Three Columns Rounders 2 Template;
6. Three Columns Rounders 3 Template;
7. Three Columns Rounders 4 Template;
8. Three Columns Sand Dollar 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 Scribe template will 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.
Scribe Template
When you are at Template -> Edit HTML, scroll to these lines:-
#outer-wrapper { background-color:#473624; border-left:1px solid #332A24; border-right:1px solid #332A24; width:700px; margin:0px auto; padding:8px; text-align:center; font: $bodyFont; } #main-top { width:700px; height:49px; background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_top.jpg") no-repeat top left; margin:0px; padding:0px; display:block; } #main-bot { width:700px; height:81px; background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_bot.jpg") no-repeat top left; margin:0; padding:0; display:block; } #wrap2 { width:700px; background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_mid.jpg") repeat-y; margin: -14px 0px 0px 0px; text-align:left; display:block; } |
|---|
If you view the .jpg images by entering the URLs into the browser, you will see that these are the images that form the backdrop of your post body and sidebar. To expand the template and insert a third column, we will have to enlarge these images as well. Change the above code to these (note the portions in red):-
#outer-wrapper { background-color:#473624; border-left:1px solid #332A24; border-right:1px solid #332A24; width:900px; margin:0px auto; padding:8px; text-align:center; font: $bodyFont; } #main-top { width:900px; height:49px; background:#FFF3DB url("http://www.blogpulp.com/imagehost/images/483717931.jpg") no-repeat top left; margin:0px; padding:0px; display:block; } #main-bot { width:900px; height:81px; background:#FFF3DB url("http://www.blogpulp.com/imagehost/images/529102364.jpg") no-repeat top left; margin:0; padding:0; display:block; } #wrap2 { width:900px; background:#FFF3DB url("http://www.blogpulp.com/imagehost/images/437454966.jpg") repeat-y; margin: -14px 0px 0px 0px; text-align:left; display:block; } |
|---|
We move on to the style definitions for the mainbody and sidebar. Scroll to these lines:-
#sidebar-wrapper { clear:left; } #main { width:430px; float:right; padding:8px 0; margin:0; 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 { width:150px; float:left; padding:8px 0; margin:0; 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 */ } |
|---|
The present sidebar is on the left. We want to insert a new sidebar on the right. We can use the same sidebar settings and change the above code by amending or inserting the parts shown in red.
#sidebar-wrapper { clear:left; } #main { width:430px; float:left; padding:8px 0; margin:0 0 0 30px; 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 { width:150px; float:left; padding:8px 0; margin:0; 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 { clear:right; } #newsidebar { width:150px; float:right; padding:8px 0; margin:0; 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 */ } |
|---|
Just below the Header and above the Footer, you can see a nice divider image. We have redone this image and replaced the divider.gif with this new image.
Scroll to:-
#footer { clear:both; background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat top left; |
|---|
Change the image location to this:-
#footer { clear:both; background:url("http://www.blogpulp.com/imagehost/images/1182140476.gif") no-repeat top left; |
|---|
Also, go to:-
#header { background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat bottom left; } |
|---|
And change the image URL to this:-
#header { background:url("http://www.blogpulp.com/imagehost/images/1182140476.gif") no-repeat bottom left; } |
|---|
We shall also change the layout editor to cater to the new sidebar. Scroll to where you see this:-
/** Page structure tweaks for layout editor wireframe */ body#layout #outer-wrapper { margin-top: 0; padding-top: 0; } body#layout #wrap2, body#layout #wrap3 { margin-top: 0; } body#layout #main-top { display:none; } |
|---|
Update:
Add these lines after the above:-
body#layout #outer-wrapper, body#layout #wrap2, body#layout #wrap3, body#layout #header, body#layout #footer { width: 750px; padding: 0px; } body#layout #main { width: 400px; margin-left: 20px; } |
|---|
Further down the template, you will see this:-
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/> </b:section> </div> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> |
|---|
Insert these lines (shown in red):-
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/> </b:section> </div> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> <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> |
|---|
What it does is to place your Profile on the right sidebar. If you don't want it there, you can remove the page element later. Now, “Preview” your template, and if you like the new three column Scribe template, click “Save Template”. Refresh your Blog to see your new three column Scribe layout!
Align Header Title and Description
Update: We have a more detailed guide on alignment of the Header Title, Description and background image. In the article, you would learn how to move these to the center, or towards the left or right of the Header. Check out the guidelines at Header Image and Title Alignment (I).
In the Scribe template, you would notice that the Header title and description are aligned to the left. If you want that to be in the center of the page, insert the text-alignment code (shown in red).
.Header { text-align: center; |
|---|
© Tips for New Bloggers
35 comments:
I found your blog to be very helpful with all its lucid instructions about getting things done in blogspot.
Thanks.
Hi, my template is "dots dark".
Would this method work for that one?
Hi Tonino
Please don't use this guide for Dots template. We'll probably write an article on that.
Hi, this works really well... thank U so much for this post... i was desperately waiting for this...
ya..and one thing missing... how can we get the header title at the center? It is showing at the left hand side..
Thanks once again...
Hi Amber Shukla
We have just included that in the article. The code should move both the header and the description to the center.
hi i try this but it when i preview it, it just says error. i think its because of the last line. mine seems to be different. can you figure out which is wrong? i would be very much thankful for that.
this is the link of my code:
http://www.freewebs.com/shivarules2/blogerror.htm
i hope youll gonna help me with it thank you so much!
Hi Mark
When you insert the codes, you don't need to check the "expand widget template" box. The head section is ok. But in the body, the section on div id='newsidebar-wrapper' should appear after the id='main' section, and not before. If it is placed correctly, you should be able to preview the blog.
Thanks for the template, it works great and I love the variety it gives my page.. only one problem I'm having is that now the edging of my page is white instead of the patterned colour of previous. I checked my backup template against the current one and that section of the html is the same yet it does not work. Do you have any ideas why this might be? Thanks.
Hi Hannah
Your template looks alright. The default background style is this:-
body {
background:#483521 url("http://www.blogblog.com/scribe/bg.gif") repeat;
}
You can copy and replace the current one you have. Preview the template to see if the color appears.
Thank you so much for this - I'm very new to blogging and this worked wonderfully!
Hi bizwhiz,
I uploaded a 3 column Scribe template several months ago from Blogcrowds and its been working pretty well. Now I've started to add widgets and a search bar and find that, particularly, the width of my right sidebar needs to be bigger. Any suggestions for changing (increasing) the width of the sidebar on this template.
http://thesilverpeoplechronicle.blogspot.com
Hi Roberto
You can reduce the width in #main{ and increase the width in .sidebar{ This will increase the widths in both sidebars.
Unlike our template guide here, your template currently does not have a separate class for the right sidebar and you would need to modify your template further to include that if you want to change the width only for the right sidebar. You may want to check with them before any such modification.
Bizwhiz,
Thanks for your timely response. I suspected what you've told me about my "pre-fab" 3 column template from Blogcrowds so I think I will start from scratch and upload the original Blogger Scribe template (only 1 sidebar), and apply your wonderful instructions to add a second side bar (right). Your guide worked real well on my other blog (minima) and I have more control over modifying it.
If you think what I'm thinking is too drastic, let me know. Thanks.
http://thesilverpeoplechronicle.blogspot.com
Hi Roberto
What is important is that before you make any modification, download and backup the template in full. After making any change, whether to your existing template or a new template, if it is not what you want, you can at the least switch back to the saved template.
I believe templates created by third parties have built-in features which may be useful. You can assess what these are and decide whether you want to retain them.
Over here, we can only advise people who are using the standard Blogger templates because we try and test our guides before writing them and we can't do that with other third party templates.
Hi, very helpful, but my problem is that my new column starts at the middle of the right hand side. Why doesn't it start at the very top like left column?
Hi, its me again, I'm having another problem. I now notice that the writing from my center column with my posts is way too close to the left column. Is there anyway to fix that? Thanks and to see what I'm talking about, go to:
www.politidose.com
Hi Joseph Patrick
I see that your columns are evenly spaced now. If you face alignment problems, look at the template code again and see that there are no typo errors, like missing semi-colon, margins, braces {}, etc.
Yea, I realized that I misspelled a word. But now I have another question, is there anyway to get the background on the scribe template(the dark brown flower looking things) to change to just a solid color? Same thing with the flowers that appear by the posts.
Thanks,
JP
www.politidose.com
Hi Joseph Patrick
Scroll through your template code and identify the background images ending with .jpg or .gif If you want to replace them, create your own images, host them on a server and replace the image URLs.
Hello bizwhiz,
First of all, awesome site! I'm a newbie to blog, but wondering if you can help me by providing guidance to make 3 column to the "harbor" template that I"m using on blogspot. I noticed that there are wasted space on the right side, so I would like to create "Add a Page Element" on the right side, similar to the left side.
http://www.beautifulthingsinlife.blogspot.com/
Any information will be helpful. I tried using the instruction above for Scribe template, but I have been unsuccessful at it. Should I be using Scribe template for Harbord template? Are you planning to create an instruction for Harbor template?
Thanks in advance,
Hi MinMayBee
This guide is for the Scribe Template and will not apply to the Harbor Template. If our Poll is any indication, not many people use the Harbor Template. We will be doing more three column guides and will probably come to that in due course.
Hi bizwhiz,
I decided to use a template that you already had instructions. I don't want you to spend the time to create one for Harbor just for me when you have time :) Again, thank you.
Hi Bizwhiz,
Your instructions to get my modifiable three column Scribe template has worked perfectly, as usual. I didn't even take an hour with all the changes. My next step is to widen the two sidebars to accommodate my new widgets. Is there anything I should look out for in particular? Which of your instructions should I use?
Thanks again!
http://thesilverpeoplechronicle.blogspot.com
Hi Roberto
In this template, the widths of the columns are all stated under:-
#main - the main blog post column
#sidebar - the left sidebar
#newsidebar - the right sidebar
You can adjust the values by adding to one and subtracting from another. Meaning to say, if you want to add 10px to the right sidebar, you will have to minus 10px from the main column width, so that the overall width remains the same.
Should you want to change the overall width of 900px, you would have to redo all the background images to cater to the new width.
Bizwhiz,
I followed your tip to widen my sidebars by reducing the width of main column to 850px and increasing width of sidebars to 175px. The resulting sidebars were widened satisfactorily but the right sidebar (the new one) got pushed down to the bottom, below the last blog post.
I wonder where I went wrong?
Appreciate suggestions.
http://thesilverpeoplechronicle.blogspot.com
Hi Roberto
I don't know where your 850px comes from. In our example, the width of the main column is:-
#main {
width:430px;
If you want to increase the sidebar width, you have to reduce the above width.
Thanks for the nice and easy explanation. All worked fine. Good job..
Bizwhiz,
This is just to say thank you so much- Again! This time, I finally got it! New dimensions: #main 403px, left sidebar remains 150px, new (right) sidebar is now 175px, and it accommodates everything just fine.
Sorry for my nagging:-))
http://thesilverpeoplechronicle.blogspot.com
Fantastic!
I was actually experimenting with my blog layout earlier today and gave up because I couldn't get a background image to work with it... that is, until I bumped into this site!
Excellent work!
Thanks a lot.
Bizwhiz,
My scribe template is now looking like I wanted it to thanks to your patient guidance. I've giving your bog a plug over at my site at:
http://thesilverpeoplechronicle.blogspot.com/2007/10/in-recognition-of-our-technical-help.html
out of appreciation. Thank you a bunch!!
Just wanted to say thanks :o) Your instructions were very easy to follow and worked on the very first try, even with 3 toddlers running around the house!
Thanks again.
So, everything worked out fine, except when I go to add/arrange page elements. I can't add anything to the left side bar, and the "add page element" box is in the bottome left corner. What did I do wrong and how can I fix it?
Hi Maria
You have widgets in the left sidebar but nothing on the right. Is your problem with the 'right' sidebar?
See that you added the part on <div id='newsidebar-wrapper'>.
I have something to say ...