Three Column Sand Dollar Template for Bloggers.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!
Like this article? Subscribe to the RSS feed!
An update on Google+ and Blogger
-
Following the announcement of Google+ API deprecation scheduled for March
2019, a number of changes will be made to Blogger’s Google+ integration on
4 Febr...
41 comments:
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
amazing blog wow
Very Good. Worked on the first attempt. Thanks.
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?
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.
Hi Vin , can you make a tutorial on how to add a 3rd column for Scribe Template .. Thanks
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.
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
NYIsles1/IslesTigers,
What is the blog address?
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
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.
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.
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;
}
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;
}
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!
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.
Here it is, Vin:
http://pastebin.com/m57710a8f
Thank you,
Francisco
fbminis,
Your date code seems to be from another template :
<!-- Date Block -->
#
<div class='jackbookDOTCOM_date'><script>jackbookDOTCOM_changeDate('<data:post.timestamp/>');</script></div>
?!!???
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?
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.
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?
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.
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
Brian,
In step 3 notice this small tag at the end of the code :
</div>
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?
James,
Looks OK in Firefox browser!
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?
James,
For non fluid templates modify the Minima template to add third column.
Try it in a test blog.
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
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/
Sunil,
Have you followed the third step of adding the sidebar code in the body part of the template?
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
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.
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
Thanks Vin!
I made it!
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?
AjemiPutraNobita,
Email me for the code. It is too big to put in comments.
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.
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.
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
R. Thamilselvi,
Can you email me the template?
CLICK TO LEAVE A COMMENT..... :-)
Skip to top of post.
Who is talking about the above post?