Otro Indice para nuestro blog

Este widget muestra todas las categorías de nuestro blog con sus respectivas entradas ahorra mucho tiempo a tus lectores a la hora de buscar el contenido, también le muestra a los visitantes si son mensajes nuevos o antiguos.

Bueno ahora pasemos a ponerlo en nuestros blog:

1.- Nos vamos a Diseño -> Edición de HTML
2.-Buscamos  ]]></b:skin>
3.- Justo antes pegamos este código:

/*--------Tabla de Contenido-----*/
    .judul-label{
    background-color:#E5ECF9;
    font-weight:bold;
    line-height:1.4em;
    margin-bottom:5px;
    overflow:hidden;
    white-space:nowrap;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 4px #AAAAAA;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    color: #e9e9e9;
    border: 2px solid white !important;
    background: #6e6e6e;
    background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
    background: -moz-linear-gradient(top,  #888,  #575757);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
    }

    .data-list{
    line-height:1.5em;
    margin-left:5px;
    margin-right:5px;
    padding-left:15px;
    padding-right:5px;
    white-space:nowrap;
    text-align:left;
    font-family:"Arial",sans-serif;
    font-size:12px;
    }

    .list-ganjil{
    background-color:#F6F6F6;
    }

    .headactive{
        color: #fef4e9;
        border: 2px solid white !important;
        background: #1C8DFF;
        background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
        background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
    }

MODIFICAMOS #9dc2e7 y #438cd2 que es el color de tabla cuando muestra las entradas
 
4.- Guardamos la Plantilla
5.- Vamos a crear una Página nueva
6.-Ponemos un título a nuestra página tabla de contenido,índice, la que ustedes deseen.
7.-En la Edición de HTML pegamos este código:

<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://ciudad-fnx.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>