Agregar índice en Blogger en un santiamén

¡Hola a todos! Hoy quiero comentarles sobre una sección muy importante y hasta indispensable para un blog, se trata del Índice, que por cierto también se lo conoce como Sitemap (mapa del sitio) o tabla de contenido, yo prefiero llamarlo "índice", para no complicarme y evitar confusiones.

Pero ¿qué es un índice y para qué sirve? Al igual que en un libro, el índice permite organizar el contenido, mostrando un resumen de todo lo que encontraremos. Siguiendo esa analogía, en un blog, sirve para mostrar el título de todas nuestras publicaciones en una sola página, con el estilo de una tabla (de ahí el nombre de tabla de contenidos).

Con esto se logra que el visitante, pueda acceder a una vista previa de todas nuestras entradas y pueda buscar lo que necesita, mientras le echa un vistazo a todo lo que tenemos para ofrecerle. Como una imagen vale más que mil palabras, en la siguiente captura les muestro cómo luce aquí en el blog.

Índice en Blogger

¿Bonito y organizado cierto? Pues la idea es esa, como notarán ahí la he publicado con el nombre de 'Sitemap', esto porque a Google le gusta que se llame así y a toda la blogósfera en general. Para efectos de SEO (posicionamiento en buscadores) es importante contar con esto en nuestro blog.

Hay varios estilos para estas tablas de contenido, pero a mi me gusta este porque es más limpio visualmente y bien estructurado, además que al pasar el cursor por el título de una entrada se muestra un pequeño resumen del contenido de la misma. ¡Te enseño cómo agregarlo a tu blog!

Sitemap para Blogger

Crea una pagina nueva, colócale el título de Sitemap y haz clic en el apartado HTML.

Pega allí el siguiente código:

<div id="bp_toc">
Cargando Mapa del Sitio, por favor espera....</div>
<script src="https://dl.dropboxusercontent.com/u/70359132/sitemap.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script>

En las opciones de configuración de la página (está a la derecha), opcionalmente puedes desactivar la posibilidad de comentarios, eligiendo: "No permitir, ocultar los existentes".

¡Haz clic en publicar y listo!

Con eso ya tienes tu sitemap agregado, visualízalo y si todo salió bien, copia su enlace y colócalo donde quieras. Para que sea más visible, te recomiendo que sea en el menú primario o secundario, caso contrario en un enlace de tu sidebar como blogroll (o lista de enlaces) a través de un gadget.

Personalizando el Sitemap

Vamos a darle un poco de estilo para mejorarlo según nuestros gustos y el color de nuestra plantilla. Dirígete a la configuración de tu plantilla > Personalizar.

Accederás al Diseñador de plantillas de Blogger, allí haz clic en Opciones avanzadas > Agregar CSS

Dentro de esa caja pega lo siguiente:

 #bp_toc {
  border: 0px solid #000000;
  background: #ffffff;
  padding: 5px;
  width:500px;
  margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
  background: #ffd595;
  color: #000000;
  padding-left: 5px;
  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:80%;
  text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
  font-size:80%;
  text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
  padding-left: 5px;
  font-size:70%;
}

Haz clic en el botón Aplicar al blog y con eso habrás modificado el estilo. Si tienes conocimiento de CSS puedes modificar el fondo, tamaño y los colores, por ejemplo cambiando el color del fondo del header (resaltado en color rojo) por otro color utilizando estas herramientas selectores de colores.

Aclarar que este script fue desarrollado por Beautiful Beta, yo le hice unas pequeñas modificaciones de traducción a nuestro idioma únicamente.

¡Ah! Si quieres ver mi Sitemap en vivo y directo, aquí está y en el menú superior ;-)