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 :

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 :

4. TABLE OF CONTENTS

The Table of Contents is a Archive Widget which we will place in the central (posts) column. To do this we have to increase the number of widgets in the central column. Go to Template----->Edit Html----->and scroll down till you come to :

Save Template and switch to Page Elements tab. There is already an Archive widget in the right sidebar. Drag and drop it to the top of the posts column and click on Save at the top. Switch back to Edit Html tab and put a check in Expand Widgets Template checkbox at the top of the Edit Template textbox. This will expand the code for the Archives widget. Replace the code AFTER THE FIRST TWO LINES which are :

5. USE CONDITIONAL TAGS

Now we have the Blog Archives widget showing only the links to the posts. Below it is the posts. We will now use conditional tags as described in Post a Book in the New Blogger to show only the Archives widget on the main page and to show the posts widget on the post pages only.

To do this go to Templates----->Edit Html and put a check in the box to expand Widgets Templates at the top of the Edit Template text box. Then scroll down to the archives code

Then locate the immediate next </div> and add </b:if> after it. Save Template.

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 :

4
comments:

Hi, you are awesome, i really wanna thank you with all the help you've given me so far, i am trying to fix my blog from how it was to sth that i like more, and your advises are amazing.Anyway, i have used the template here and i have made it some changes, and instead of a table of contents, i would like to replace it with a text widget in which i will put manually each time posts i like.I translate stuff, and i want to show there my latest translations, not my latest or all my posts.

Hey Vin, I am stumped when changing the code on step 4..I keep getting this message.

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.XML error message: The element type "b:section" must be terminated by the matching end-tag "".

I did have a three column template before I found you. Should I just change it? I also centered my title...could that have hurt it? I have tried and I can't seem th close this thing!

How can i find the missing atg easily? As I can't save the template for you to go see it?

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,