Sign up for PayPal and start accepting credit card payments instantly.

Tuesday, November 27, 2007

Table Of Contents

Useful Information

I would like to dedicate this post to a very special child, Syahmi Ashraff. She is the daughter of my new found friend, SM Saroni. Head over to her blog now and see a father's love in action. Do whatever you can to help this special child by donating for her education. I'm sure you can bring peace and joys of loving to her.

Updates: I read in my other new found friend, the lovely Red Summer's blog that her beloved mother has passed away. Al-Fatihah.
"Sesungguhnya kami adalah milik Allah dan kepadaNya jua kami akan kembali.

Ya Allah, jadikanlah kitabnya (catitan amalnya) pada tempat yang tinggi dalam syurga dan catitkanlah dia disisi Engkau sebagai salah seorang diantara orang2 yang baik. Gantikanlah olehMu akan dia pada ahlinya yang tinggal.

Ampunilah kami dan dia, wahai Tuhan Penguasa Alam."


In an email, SM Saroni asked my how to hack "Table of Contents" found on this blog, among other things. Before I proceed any further, let me tell you a bit about Table of Contents, or commonly known as ToC only. In short, Table of Contents are a list of all your published posts. It also show complete with Post Titles, Post Dates and Labels. So, how do I do it? Come on start the music, let's rock and roll...

Step One: Back Up your Template.
This is a very important procedure. After login to your blog -->Dashboard and choose which blog you wanna add ToC --> Template --> Edit HTML and click on the little box beside Expand Widget Templates. Before editing your template, you may want to save a copy of it. Click on Download Full Template and save the XML file in a place where you can easily find it later if your PC suddenly exploded! Just kidding my friend. Just kidding! I usually saved mine in a little XML folder in My Document. Create one if you don't have it.

Step Two: Add Page Element
After clicking the little box beside Expand Widget Templates on Edit HTML search for the <b:section> with id=main. This is the section that holds the Blog posts, if you don't have it yet. Add a line of code as follows;

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Save the template and click back to Edit Layout.

Note: You can change the number on maxwidgets='2' to any number of your choice if you wanna add more Page Elements on your Blog Post's section. Usually you add the above line of codes after this line;

<div id='main-wrapper'>

Step Three: Add HTML/JavaScripts to your blog.
On Edit Layout, click on Add a Page Element and choose HTML/JavaScripts. Then click on Add To Blog. Add the following codes, leaving the title BLANK - meaning NO title - zilch, nada, zero, empty, elek, tolo!

<div id="toc"></div>

Save your template.

Step Four: Add a Page Element on the sidebar.
After saving, click on Add a Page Element on the sidebar where you gonna place your Table of Contents. Put in ToC or whatever for the title and for the contents add the following codes;

<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div>
<script style="text/javascript" src=""></script>
<script src=""></script>

Change BLOGTITLE with the name of your blog. Yes, that's right. And save.

Voila! You got yourself your very own ToC.

Before I'm off to kick some ass, I would like to thanks, Hans of Beautiful Beta for this magnificent hack. I learned a lot from Hans and Annie. They are beautiful people. From the bottom of my heart, I thank you.

Here are some news brought to you by the awesome The News Room. And read what Blogging can do to change people lives. Enjoy!

Subscribe to My Journey To Recovery

A candle loses nothing by sharing its flame.

2 Responses to "

Table Of Contents

Smsaroni said...


Yeop, please check my

I've followed all the steps but cannot see anything. What when wrong?

Smsaroni said...

Bro, I've done it to rectify the error. Thanks anyway.

Post a Comment

I loves to receive comments from everybody and I tried to make everything easier for my readers to comments. So please, be nice even though you totally disagree with me. No comment moderation and whatnot here. So, please respect the privileges given.

God's willing, all comments will be followed and replied.

p/s Please leave your URL so that I can follow it and leave comments on yours. No URL = No Comments. It is as simple as that. Thank you in advance.

~ ArahMan7

PS - Word verification has been enable. Sorry about that [Sept 3rd, 2013].

Back To Top