Computer Consultant

    

   - Browse Archives -      May 2008 June 2008 November 2009 December 2009 January 2010

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



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



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