Crear un sistemap (mapa del blogs) o tabla de contenido

En este tutorial haremos un sistemap (mapa del sitio) en nuetro blogs donde  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

Para poder  ver un ejemplo  de como queda, puede visitar nuetro Mapa del Sitio


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>



ahora solo publicamos la pagina y nos quedara algo asi