COMPUTER & INTERNET TIPS+TRICKS & SOFTWARE

A reader asked to have a three column template with a Table of Contents at the top. So I decided to make it and take you, my dear readers, along with me as I do so. Something like "The Making of a template.....". So here we go.........

1. CREATE A BLOG

As I have said previously in Practical Approach to Hacking Templates, it is always best to start of with one of the Blogger Templates. So we login to the Dashboard and click on Create Blog link and follow the steps in How to Start a Blog. We will use this blog to showcase the new template. We choose the name as Table of Contents Template and the URL as http://tableofcontentsdemo.blogspot.com/. Lastly we choose the Minima Template and create a Test Post. Since this is to be a Demo blog we set the Settings----Basic------->Add your Blog to our listings?----->No----->Save. In Settings----->Publishing----->Send Pings---->No----->Save. In Settings----->Comments we set Who Can Comment? to Only Members of this blog----->Save, since we do not want spam comments on this Demo blog. In Settings----->Site Feed we set Allow Blog Feed to None---->Save, as this is a demo.

2. INCREASE BLOG WIDTH

The next step is to increase blog width, as shown in How to change width of blog, so as to accommodate a third column. So we go to Template------>Edit Html and first backup the template. Then scroll down in edit Html text box till you come to this code :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px; <----CHANGE THIS
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

The outer wrapper contains all the blog sections within it. See the picture below
:

To create space for a third column we increase it to 880 px and save the template. See the picture below showing increased width of the blog

3. ADD THIRD COLUMN

To add a third column as shown in add a third column to blog, we first define a new column which will be floated left and which will hold the posts column and the new left sidebar. Let us call it the bigcolumn. We add this code just below the outer wrapper code in No 2 above :

#bigcolumn {
width: 630px;
float: left;
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 */
}

The width is Main (posts) Column 410px + Left sidebar 220px = 630px. It is floated left. Then add the new left sidebar wrapper code below it :

#leftsidebar-wrapper {
width: 220px;
float: left;
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 */
}

It is floated left within the big column while the posts column is floated right. So we change the float property of the posts column in the code below fro left to right:

#main-wrapper {
width: 410px;
float: right;
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 */
}

Save Template. The columns have been defined in the CSS and now we have to add code in the body part to show the on page. So we add the big column first after this line in the code :

ADD THIS LINE

THEN ADD THE LEFT SIDEBAR WRAPPER CODE BELOW IT :

save the template after closing the bigcolumn division by putting

after this block of code which represents the main (posts) column :

See the picture of the full blog below which is now three columns :

6. CUSTOMIZING APPEARANCE

You now have a TABLE OF CONTENTS on the front page. To change the title from Blog Archives to TABLE OF CONTENTS just click Edit link in the Archives section on top of the blog posts on Page Elements subtab of Template tab. To change the background of the Table of Contents put this code in the VARIABLE DEFINITIONS :

type="color" default="#fff" value="#ffffff">
Background Color"
type="color" default="#fff" value="#ffff66">

and this code lower down after the outer wrapper code :

.BlogArchive h2 {
color:$headingcolor;
}
.BlogArchive {
border:10px solid #000000;
border-bottom:10px solid #000000 !important;
background-color:$contentBackgrnd;
text-align:center;
}

Save Template. See the picture of the blog below :