Show Table of Contents

The table lists all the posts or more fun with the name "Show Table of Contents" certainly have a distinctive positive value, in addition to facilitate visitors to explore the content of blogs, it can also provide the search speed compared with the search box or search for an article based of category

First Step#:

Back up your Blog (don't ever forget about this or you will regret)

Second Step#

Add a Gadget/widget -> HTML/Javascript

Copy and Paste code below:

<div id="toclink"> <a href="javascript:showToc();"> <img border="0" src="http://www.geocities.com/oom_directory/images/add2.png"/><font color="#808000"><b> Show All Article</b></font></a>

</div>

Don't forget to change the address on the blog with code red above with your url blog. Then save

Next Step#

Add a Gadget/widget -> HTML/Javascript

Then Copy Paste code below

and save now.

The next step open the Template -> Edit Html

click expand widget templates and find this code <b:skin><![CDATA[/*

now copy and paste code below after that code above:

/* Show Table of Contents

-----------------------------------------

#toc {

border: 0px solid #78B749;

background: #ffffff;

padding: 5px;

width:500px;

margin-top:10px;

}

.toc-header-col1, .toc-header-col2, .toc-header-col3 {

background: #cccccc;

color: #444;

padding-left: 5px;

font-weight:bold;

width:250px;

}

.toc-header-col2 {

width:75px;

}

.toc-header-col3 {

width:125px;

}

.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {

font-size:95&percnt;;

text-decoration:none;

text-align: Left;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #cccccc;

}

.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {

font-size:95&percnt;;

text-decoration:underline;

text-align: left;

border-bottom-width: 1px;