Sitemap para el blog

Laga me había preguntado en un comentario, ''¿Como haces el efecto deslizante para poner los links?. En realidad esto es el simple Sitemap, muy usado en varios blog, algo sumamente elegante y fácil de instalar, basta con unos sencillos pasos:

(1) Debemos poner la librería JQuery en nuestro blog, para ello utilizamos este fichero que nos brinda Pizcos (Fichero), copiamos su URL y los introducimos a nuestro blog, siempre antes de la etiqueta </head>:

<script src="URL ALOJAMIENTO/jquery.min.js" type="text/javascript"/>

(1.2) Seguido de este código pegamos este otro trozo:

<script type='text/javascript'>
$(document).ready(function()
{
$(&quot;.smbody&quot;).hide();
$(&quot;.smhead&quot;).click(function()
{
$(this).next(&quot;.smbody&quot;).slideToggle(600);
});
});
</script>

(2) Añadimos unas lineas de CSS para la apariencia, básicamente para ponerle los íconos:

.smhead {
background: url(URL ICONO CATEGORIAS) no-repeat left;
cursor: pointer;
color:#000;
padding:2px 0 2px 20px;
font-family: 'Comic Sans MS';
}
.smbody p{
background: url(URL ICONO SUBCATEGORIAS) no-repeat left ;
margin: 0 0 0 45px;
color:#000;
padding:2px 0 2px 20px;
font-family: 'Comic Sans MS';
}

(3) Iríamos a la plantilla y agregamos un nuevo elemento HTML:

<div class="smhead">Categoría</div><div class="smbody"><p><a href="http://URL">Nombre de enlace</a></p><p><a href="http://URL">Nombre de enlace</a></p><p><a href="http://URL">Nombre de enlace</a></p><p><a href="http://URL">Nombre de enlace</a></p><p><a href="http://URL">Nombre de enlace</a></p><p><a href="http://URL">Nombre de enlace</a></p></div>

En mi caso he puesto esa cantidad. Para repetir una categoría simplemente se repite el código completo, se puede poner un número indeterminado de enlaces o sub-categorías... Cualquier duda ya saben, no soy experto pero nos defendemos!.

Aquí puedes encontrar una colección de íconos 16x16 que puedes utilizar y son de libre distribución (Iconos Gratis).