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