[Dummies Guide to Google Blogger Beta] The Table of Contents Template.

[vin]

[http://tableofcontentsdemo.blogspot.com/]
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 :

<div id='content-wrapper'>

ADD THIS LINE

<div id='bigcolumn'>

THEN ADD THE LEFT SIDEBAR WRAPPER CODE BELOW IT :

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

save the template after closing the bigcolumn division by putting

</div>

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

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

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

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 :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

Change this code to

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes' maxwidgets='3'>

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 :

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>

WITH THE CODE BELOW :

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</b:loop>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

Save Template.

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

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>

Add after the above lines the following code :

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Also add </b:if> before the immediate next </b:includable>
The whole code after modification becomes :

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:if>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&amp;toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy'>► </span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</b:loop>
</b:includable>
</b:widget>

For the posts column paste this line of code :

<b:if cond='data:blog.pageType == "item"'>

instead of line xxxxxxxxxxxxxxxxx in below code in your template :

<b:includable id='main' var='top'>
<!-- posts -->
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<div class='blog-posts'>

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 :

<Variable name="headingcolor" description="TABLE OF CONTENTS Color"
type="color" default="#fff" value="#ffffff">
<Variable name="contentBackgrnd" description="TABLE OF CONTENTS 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 :


You can check out the DEMO BLOG here. You can download the full template here.

Technorati Tags:template, width, third column, change template, conditional tags, css, blogger hacks, table of contents

--
Posted By vin to Dummies Guide to Google Blogger Beta at 3/28/2007 12:58:00 AM