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

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 27, 2007

Digg This Story

Three Columns Sand Dollar Template

The Blogger Sand Dollar template takes up the full browser width and has a nice color scheme. Some people may find that the empty space in the sidebar can be put to better use. We can add another sidebar to the right and this tutorial will show you how to convert your Sand Dollar layout into a three column template.

Here, we are specifically dealing with 3 column Sand Dollar templates. If you are not sure what your template is, under Template -> Edit HTML, look for the “Blogger Template Style” name. If it is “Sand Dollar” follow this guide to customize your template.

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 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.


This is how the eventual Three Column Sand Dollar template should look in Firefox:-

Three Columns Sand Dollar Template

Or in Internet Explorer. Notice the text indent in the sidebars:-

Three Columns Sand Dollar Template

Even without any addition of a third column, this difference already exists when you view your Sand Dollar template blog in the 2 browsers. This is one of the several template designs which is not interpreted in the same manner by the different browsers. Since there may be people who are interested in having a consistent layout especially in Firefox and IE, we shall further explore this in a separate article. For this article, we shall focus our discussion on converting the template into a three column template.

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



Login to your Dashboard and scroll to these lines:-

@media all {
div#main {
float:right;
width:66%;
padding:30px 0 10px 1em;
border-left:dotted 1px $bordercolor;
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 */
}
div#sidebar {
margin:20px 0px 0px 0;
padding:0px;
text-align:left;
float: left;
width: 31%;
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 */
}
}


Amend the above to this (take note of the portions in red):-

@media all {
div#main {
float:left;
width:49%;
margin:0 1%;
padding:30px 1em 10px 1em;
border-left:dotted 1px $bordercolor;
border-right:dotted 1px $bordercolor;
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 */
}
div#sidebar {
margin:20px 0px 0px 0;
padding:0px;
text-align:left;
float: left;
width: 23%;
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 */
}
div#newsidebar {
margin:20px 0px 0px 0;
padding:0px;
text-align:left;
float: right;
width: 23%;
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 */
}
}


Further down the template, you can see these lines. Insert the portions of the code, including the commas (shown in red):-

#sidebar h2,#newsidebar h2 {
color:$sidebarcolor;
margin:0px;
padding:0px;
font:$headerfont;
}

#sidebar .widget,#newsidebar .widget {
margin:0px 0px 33px 0px;
padding:0px 0px 0px 0px;
font-size:95%;
}

#sidebar ul,#newsidebar ul {
list-style-type:none;
padding-left: 0;
margin-top: 0;
}

#sidebar li,#newsidebar li {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
list-style-type:none;
font-size:95%;
}


Also, insert the CSS codes (in red) to these lines:-

#sidebar a:link,#newsidebar a:link {
color:$sidebarlinkcolor;
text-decoration:none;
}

#sidebar a:active,#newsidebar a:active {
color:#ff0000;
text-decoration:none;
}

#sidebar a:visited,#newsidebar a:visited {
color:sidebarlinkcolor;
text-decoration:none;
}

#sidebar a:hover,#newsidebar a:hover {
color:$sidebarcolor;
text-decoration:none;
}


Note that we have adhered to the same link and hover styles for both the sidebars. If you have already customized your existing sidebar to display rollover and hover effects, they will apply as well to the new sidebar.

Amend the layout editor tweaks by adding this code (in red):-

body#layout #main,
body#layout #sidebar,
body#layout #newsidebar {
margin-top: 10px;
padding-top: 0;
}


After that, we move on to the <body> section of the template. Look for <div id='main-wrapper'> and change/insert the codes as follows:-

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</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>

<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>


In so doing, there will be a Profile in the new right sidebar. This can be removed later. “Preview” the template to view the changes and if you like the new three column layout, click “Save Template”. Go back to Template -> Page Elements, remove the Profile page element. Refresh your Blog to see your new Three Column Sand Dollar layout!

Align Header Title and Description

The Header title and description in the Sand Dollar 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 (II).

© 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

19 comments:

Tonino said...

I'm dying to get to the "Three Columns Dark Dots".
Please let it be the next one! :'(

ICLfan said...

thanks a ton, with your help I am able to add the third column in my blog. I was searching for this from quite a long time but everywhere there was just to download, and you know if I donwload my widgets will gone.
you can see the difference now in my blog cirket-fan-india.blogspot.com

1001 noisy cameras said...

This is the best blogger tutorial ever! I thought I would spend hours and hours sorting through CSS and such trying to do this, but by following the excellent instructions on your blog I was done in just a few minutes!

Thank you Tips for Bloggers, thank you!

Fran Civile said...

Thank you so much for all your good
information! I do have a link to your blog on mine, and I come here
often to learn something new...

Today I discovered the difference
between html and xhtml - I often sondered about the messages I would
get about my .....not being accepted! Now I know why and like you suggested I probably will have to come back whenever I get one of
those messages and take another lesson :)
I love the Sand Dollar template - I have 3 blogs using it and I am
going to try the change to 3 columns in one of them.
I also would like to have comments
show up under the posts - is that
feasible?

Thank you again...

Fran

bizwhiz said...

Hi Fran Civile

If you have selected "show" comments in Settings -> Comments, comments will be displayed under every individual post.

By default, only the comments count will be shown on the main page and not the full comments, primarily because there can be several posts on the main page and having comments shown as well will make it lengthy and unsightly. Even then, some users have asked whether this can be tweaked to have all the comments shown on the main page. Probably, but we have not looked into it.

Faith said...

Thank you so very much for this post. I was very nervous following your directions and got a little confused with the last step but it worked. I now have 3 column Sand Dollar and love the look so much better.
http://natureinspired.blogspot.com/

Andy said...

Thanks for the great and simple instructions - worked well for me @ www.financeviewpoint.com

Andy

South Boise Girl said...

I have tried and tried to us the Sand Dollar Template I can't see my error: See Below. What have I missed? Any ideas?
myra.christensen@raymondjames.com


I tried to attached what I did but I guess I can't. I really think I've followed it but I can't preview or save

nathanburrblair said...

Your tutorial is awesome! So simple! Everyone else makes it so confusing. I converted to 3 at nateburrblair.blogspot.com

MBWatcher said...

thanks - I already use a downloaded 3-column of Sand Dollar, but here's my question -

How can I determine what the width of the side columns is?

I found a new problem when I used the Blogger Poll widget, which assumed a 2-column format and therefore was too wide to display.

I see in a separate article of yours some of your ideas for changing the Poll widget (thanks!) but I don't know what the width might be in px.

Chris said...

awesome, thanks mate. Your blog is really making my blog look good.


http://ismooch.blogspot.com/

Flo23aug said...

http://flo23aug.blogspot.com/

i must thank you first because the tip for three dots worked wonderfull.
For this one though...Here is what is the matter: If my bookmarks are on the left when I access this page, the third column goes down to tha last row of the main. Any idea why this happens?

Courtin.Aurelien said...

Merci pour votre aide claire et précise.
Celà m'a permis de modifier sans problème le modèle de adonfff.blogspot.com

ruthEbabes said...

Thank so much for this!!!! Got my sand dollar theme to have 3 columns and this was so straightforward!

http://justaddeggs.blogspot.com

irma said...

thanks a lot! the tutorial is awesome..it easy to follow..I just need to change the left to startside and voila.. :)

do you have any idea how to make a 'read more link' under the post?

Sara, a rock climber girl said...

Thank you -- your instructions are very helpful. Question, though -- I am having trouble with the sand dollar three-column layout. I moved the columns so that the body is on the left, the first column in the middle, and the new column on the right, see:

http://www.rockclimbergirl.com

But, if the browser window is smaller than about, say, 950 pixels, then the third (new) column gets bumped down to the bottom of the second column. See the URL above -- make your browser window smaller and you'll see the third column bump down. If you make the window bigger (like, 960+ pixels) then the third column comes up where it's supposed to.

Did I miss something? Any suggestions?

Thank you very much for making this helpful info available!

Carena said...

Could you please have a look at my blog,I'm getting a error message when applying the template.
"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag "
Link to my blog:http://www.blogger.com/html?blogID=8653372703909922579

JES said...

Thanks so much, it worked! I was ready to move on to another blog provider, but I didn't like them as much. All I needed was the three columns.

Anonymous said...

You made my day :D. I spent a good 8 hours trying to do this and after finding this page I managed to do it in 8mins. Thanks a million.