Three Column Sand Dollar Template for Bloggers. ~ The Blog Doctor.
Loading...

Three Column Sand Dollar Template for Bloggers.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

A reader wanted to modify the Sand Dollar Template to show three columns. This is a Fluid width template which resizes the blog according to the monitor resolution of the viewer's machine. It has two columns. The sidebar is at the left and occupies 31% of the screen width. The Main or Posts column is to the right and is sized at 66%.


View After Modification. Click on Picture to enlarge it.

Since a Fluid or Stretch Template occupies the full width of a computer screen we need not increase the width parameters in the template..........


Instead decrease the size percentages of the post column to accomodate the new sidebar. This is the opposite of the method we used in Three Column Template in Three Steps. There we had to increase the width of the outer-wrapper to add a third column.


1. FIRST STEP


First Backup the Template. Then login at Blogger.com and click Layout link on Dashboard. On Page Elements tab click Edit Html subtab of Layout tab. In Template Code box scroll down to this code :

@media all {
div#main {
float:$endSide;
width:66%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide: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 */
}


Change the width line from 66% to 35%. This is because we will make the second sidebar of the same width as first sidebar (31%). Save Template. Next this Posts column is at the right ($endside). We want this to be in middle so we change the float line to ($startside). After modification the code will look like this :

@media all {
div#main {
float:$startSide;
width:35%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide: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 */
}



2. DEFINE NEW SIDEBAR


To define a new sidebar copy the following code and paste it immediately after the code for the Main Column shown above in the first step :

div#sidebar2 {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $endSide;
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 */
}


We have floated this new sidebar to the right (float: $endSide;). It has same width as the first sidebar (31%). Also it mirrors the first sidebar in other parameters.




3. MODIFYING THE BODY CODE


Scroll down to see the code after the <body> tag. Use Edit--->Cut (Ctrl+X) to cut out the code for the Posts Column (Main) :

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


and paste it after the first sidebar code block :
 <div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>


Save Template.



4. THE NEW SIDEBAR CODE


Lastly to show the new sidebar column on the blog copy and paste this code after the new position of the (Main) Post Columns code :

<div id='sidebar-wrapper'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
</b:section>
</div>


Save Template. Note the 'sidebar2' in the above code. Perform this step only AFTER completing the THIRD STEP.


Enjoy!

41 comments:

Anonymous said...

Hi Vin,
Please help. I want to upload a slide show in page element which I created in keynote. How do I do that? thanks and more power to you.
dqueenofhearts77

Joe Gelb said...

amazing blog wow

Anonymous said...

Very Good. Worked on the first attempt. Thanks.

Sugar said...

Thanks for this. I'm almost set. Need to know how to put a border in to separate the column. Also, how can I add widgets or move widgets to the second column?

Vin said...

Sugar,

Have a look at Tips to Customize Blogger Template.

On Layout----->Page Elements tab click the Add Gadget link to add widgets. To move them use drag and drop.

Anonymous said...

Hi Vin , can you make a tutorial on how to add a 3rd column for Scribe Template .. Thanks

Vin said...

Anonymous,

The principles are the same. Only the graphics have to be resized. See how that is done in Making the Three Column Rounders Template.

NYIsles1/IslesTigers said...

Vin,

Thank You very much for this, love how my blog looks.

I want to add a second border seperating the center section from the new right section. I resized my width sections to make the center appear larger than the sides and I have my border up seperating the left from the center but not sure how to add another border seperating the center from the right.

Any help would be appreciated.

Thanks again

Vin said...

NYIsles1/IslesTigers,

What is the blog address?

NYIsles1/IslesTigers said...

http://newyorkislanderfancentral.blogspot.com/

Should not be that tough a fix but not sure how to go about adding a border for the right side.

Thanks again

NYIsles1/IslesTigers said...

Vin,

I figured this out for myself by cutting and pasting the border tag from the left sidebar to the ride sidebar exactly where it was in the script and it worked perfectly.

border-$startSide:dotted 1px $bordercolor;

So now that I fixed that let me ask another question instead being that I can change the size of the px in that what options to I have other than dotted for what the border itself looks like?

I'm thinking of a solid orange thicker bar instead of something dotted?

Your blog and it's instructions made this happen and I cannot say thanks enough.

Great resource.

Vin said...

NYIsles1/IslesTigers,

Instead of 'dotted' you can use any of the following words : medium, thin, thick, dashed, double, groove, ridge, solid. Click Preview to see change.

NYIsles1/IslesTigers said...

Ok,

Now I'm stuck on two things, if you looked at my blog now that I added borders to both sides the right side is slightly lower than the left and I noticed the internal layout has one side slightly higher than the other.

Is there a small tweak for that?
******************************
Second and unrelated I have been trying to frame pics or picture links with one color.

I went to the image border width and changed the 0 to a 1 and half the picture or picture link colors turned purple or blue.

How do I make all those picture link or picture borders one color?

body {
margin:0px;
padding:0px;
background:$bgcolor;
color:$textcolor;
font-size: small;
}

#outer-wrapper {
font:$bodyfont;
}

a {
color:$linkcolor;
}

a:hover {
color:$titlecolor;
}

a img {
border-width: 1;
}

Vin said...

NYIsles1/IslesTigers,

Does not appear like that in my Firefox browser! To frame pictures modify this code :

.post img {
padding:4px;
border:1px solid $bordercolor;
}

fbminis said...

Your site has been an amazing help, thank you very much.I was able to setup my blog using your tutorial but I still have a little problem.

Here's my blog:

http://fbminis.blogspot.com/

Here's the template:

http://pastebin.com/m1b3cdbb9

The date doesn't show up on my posts,nor the "poste by...at...#comments". I've changed the configuration of the main body elements but it's probably a html error because it had/has no effects. Here's how I'd want it to be:

http://i4.photobucket.com/albums/y107/Valdispert/blog.jpg

thanks in advance!

Vin said...

fbminis,

I would need to look at the expanded widgets template.

Put a check in the expanded widgets template checkbox at the top of the Template Code box and then copy and paste the template.

fbminis said...

Here it is, Vin:

http://pastebin.com/m57710a8f

Thank you,

Francisco

Vin said...

fbminis,

Your date code seems to be from another template :

<!-- Date Block -->
#
<div class='jackbookDOTCOM_date'><script>jackbookDOTCOM_changeDate('<data:post.timestamp/>');</script></div>

?!!???

fbminis said...

It seems my first response doesn't show up. I'll say it again:

This is the first template I used when I created this blogger account:

http://blogger-templates.blogspot.com/2008/03/darkspark.html

After this one I chose the Sand Dollar and the date above the post stopped showing up.Instead, it was replaced by what we can see now.

I've reverted to the classic style in the HTML edit page but that's too basic. I selected Sand Dollar again and the date still doesn't show up...

What can or should I do?

Vin said...

fbminis,

Create a test blog with the sand dollar template. Copy the expanded widgets template from it and paste in your blog.

That should overwrite the date code from the original template.

Backup widgets before or they may get deleted.

fbminis said...

Ok, can you tell me what is the id of the widget I should replace?

So far I have:

-Gone to fbminis html edit; clicked on expanded widets; saved everything to a notepad file.
-Opened the blog and saved the page source to a notepad file.

Now I need to:

-Select the posts widget from the template of the blog you told me to create
-Replace the fbminis posts widget with this new one


Then I need to open the page source notepad file and select the information contained in the posts widget to paste it in the fresh widget?

Vin said...

fbminis,

Now you need to login at Blogger.com and click Create a Blog link on Dashboard to create a new blog.

Then in new blog go to Layout----->Pick New Template and choose the sand dollar template and save.

Then in new blog go to Layout---->Edit Html and put a check in Expand widget templates checkbox. Then copy the whole template after it expands.

Then go to Layout----->Edit Html tab in your main (original) blog and paste the template there and save.

Brian said...

Hi Vin I tried to make "Three Column Sand Dollar Template for Bloggers."But I always failed after cut the code of main post and paste after the first side bar wrapper code.It said HTML code error since div code should be clesed by correct tag. How can I overcome it?
Thank you

Vin said...

Brian,

In step 3 notice this small tag at the end of the code :

</div>

James said...

Hey Vin

I followed the steps, but all I get is one really think bar on the left instead of two seperate bars.

What am I doing wrong?

Vin said...

James,

Looks OK in Firefox browser!

James said...

Hey Vin,

Thats because I fixed it :)

Thanks for the tutorial.

Is it possible to make the columns non-fluid? So they don't cut off the side columns when you make the window smaller?

Vin said...

James,

For non fluid templates modify the Minima template to add third column.

Try it in a test blog.

sunil said...

Hi Vin, i fallowed your tutorial to make third colomn on myblog site http://tallyguide.blogspot.com/. now only showing one coloumn Left, showing all widgets as earlier, below that blog post showing, and 2nd Or 3rd coloumn not showing please tell me where does i have done mistake and also how to correct it.
please help

Sunil

sunil said...

Hi Vin,
partly solved my problem.
i have drag & dropped my widget to right side bar.
Now my post showing at left, & widgets showing at right.But third column in between is blank space. In layout section adding page element not showing. please suggest the solution.
Sunil
my blog site is http://tallyguide.blogspot.com/

Vin said...

Sunil,

Have you followed the third step of adding the sidebar code in the body part of the template?

sunil said...

Hi, Vin

Mistake corrected as per your direction.My blog post showing at Left,other two coloumn Right.
1) I want my blog post to centered. 2) And in 3rd column only one widget is showing, Remaining widget shows at page element screen But actual site view only one widgets shows remaining are shown below my blog post.
please suggest the remeady.
thanks for your support
SUNIL

Vin said...

Sunil,

Blog posts at the left is best as search engine spiders go through the leftmost column first. Check out this blog.

See what to do if a column is below the other columns.

sunil said...

Hi vin,

my blog site is http://tallyguide.blogspot.com/
1) I want my blog post to be centered.
2) My old side bar shows all the widgets in it.
3) New side bar only one widget is showing, Remaining widget shows at page element screen But actual site view only one widgets shows, remaining are shown below my blog post.
i have checked the possibility of bigger image, long link all are OK
only HTML code mistake not able to locate.
please suggest the remedy.
thanks for your support
SUNIL

Nurainie said...

Thanks Vin!
I made it!

AjemiPutraNobita said...

Now, i have the three column Sand Dollar template. But i feel it is not enough without the footer.
So, how can i edit my HTML so that my blog have footer?

Vin said...

AjemiPutraNobita,

Email me for the code. It is too big to put in comments.

R. Thamilselvi said...

Hi Vin,

If i create a border between posts column and right sidebar, the border appears to near to the side bar content.

How do i give space between border and the sidebar content? I want the border to appear like the space between left sidebar and post content.

Pls guide me.

Vin said...

R. Thamilselvi,

Add these lines to the sidebar div :

padding-left:10px;

or

padding-right:10px;

or

margin-left:10px;

or

margin-right:10px;

REMEMBER : Padding is INSIDE the line and Margin is OUTSIDE the line. Always PREVIEW before saving.

R. Thamilselvi said...

Hi,

I have few questions on this template:

1) When i change the title color only the left sidebar title changed, while the right sidebar title remain the same. How do i change it to same font, size and color?

2) I wanted to change the color of white background... where should i change that? I have tried change few color codes but it doesn't work for background.

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

Vin said...

R. Thamilselvi,

Can you email me the template?

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.