Como crear una tabla de contenidos o Sitemap en blogger


La facilidad con la que se puede realizar una tabla de contenidos o un Sitemap en blogger es algo que no puedes dejar pasar por alto si quieres utilizar nuevos trucos para blogger e implementarlos en tu blog de blogger con código abierto. El día de hoy aprenderán a insertar unos simples códigos con los cuales podrán disponer en su blog de blogger una tabla de contenidos en la cual les va a mostrar todo el contenido de su blog de blogger, esta nueva tabla de contenidos para blogger se la utiliza para mostrar toda la información de su blog en forma de menú vertical, la cual al dar un clic en cualquier categoría les mostrara toda la información de su etiqueta en particular. Lo que haremos es insertar dos códigos uno en el Editor HTML de su plantilla y el otro código en una página o en un post.

Como crear una tabla de contenidos o Sitemap en blogger

Además, anteriormente di a conocer dos post sobre como insertar un Sitemap en su blog de blogger, les dejo los links de estas publicaciones

  1. Como crear un Mapa de sitio para Blogger Wordpress Páginas web
  2. Como crear un sitemap automático o una tabla de contenidos para mi blog de blogger

A continuación mire su demostración en un blog que ya utiliza este tipo de tabla de contenidos para blogger


Les gusto verdad!

Vamos a trabajar

1 Ir a blogger

2 Da un clic en “Plantilla

Como crear una tabla de contenidos o Sitemap en blogger

3 Un clic en “Editar HTML

Como crear una tabla de contenidos o Sitemap en blogger

4 Busca este código

]]></b:skin>

Inserta las siguientes líneas de código justo arriba del código que encontraste

#tabbed-toc {
  margin:0 auto;
  background-color:#224C19;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#333;
}

#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 10px Arial,Sans-Serif;
  color:white;
}

#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}

#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}

#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Arial,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#ccc;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}

#tabbed-toc .toc-tabs li a:hover {
  background-color:#153615;
  color:white;
}

#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#275827;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}

#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #275827;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}

#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Arial,Sans-Serif;
}

#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#892412;
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}

#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}

#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #275827;
  overflow:hidden;
}

#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}

#tabbed-toc .panel li:nth-child(even) {
  background-color:#635CFA;
}

#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#333;
  color:white;
  outline:none;
}

#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}

@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:70;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}

Ahora dale un clic en “Guardar plantilla

5 Vamos a insertar el último código en una página, siga las siguientes instrucciones

6 Un clic en “Paginas

Como crear una tabla de contenidos o Sitemap en blogger

7 Luego damos un clic en “Pagina Nueva” y luego se desprenderá una ventana en la cual debes escoger la pestaña que dice “Página en blanco” mira la imagen

Como crear una tabla de contenidos o Sitemap en blogger

8 Luego al dar un clic en “Página en blanco” se te abrirá una página como la siguiente

Como crear una tabla de contenidos o Sitemap en blogger

9 Debemos activar la casilla que dice “HTML

Como crear una tabla de contenidos o Sitemap en blogger

10 Una vez activada la casilla en modo HTML tienes que insertar las siguientes líneas de código en su interior

<link rel="stylesheet" href="" type="text/css" media="screen" />
<div id="tabbed-toc"><span class="loading">Cargando...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.blogger.com/" title="Tabla">Blogger</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://trastornodeansiedadgeneraliza.blogspot.com/", // Dirección de su Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "Enero",
        "Febrero",
        "Marzo",
        "Abril",
        "Mayo",
        "Junio",
        "Julio",
        "Agosto",
        "Septiembre",
        "Octubre",
        "Noviembre",
        "Diciembre"
    ],
    newTabLink: true, // Se abre el link en una nueva ventana?
    maxResults: 99999, // Maximos resultados de post
    preload: 0, // Carca del feed despues de 0 segundos (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "Nuevo!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:blue;'>Nuevo!</em>" // HTML for the "Nuevo!" text
};
</script>
<script type="text/javascript" src="http://yourjavascript.com/08127314101/tabbed-toc.js"></script>

Realiza este cambio:

Borra el link que esta marcado de color amarillo http://trastornodeansiedadgeneraliza.blogspot.com/ y remplazalo por la dirección URL de tu blog

11 Recuerda poner un título antes de mandar a publicar, por ejemplo “Tabla de contenidos”, mira la imagen

Como crear una tabla de contenidos o Sitemap en blogger

12 Ahora da un clic en “Publicar

Eso es todo ahora abre la nueva página de Tabla de contenidos que creaste y mira cómo funciona este espectacular Sitemap para blogger,

Como crear una tabla de contenidos o Sitemap en blogger

Fácil verdad

Recuerda suscribirte y recibe mis nuevas actualizaciones directamente en tu correo electrónico

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

3 comentarios:

  1. gracias amigo!! lo estoy usando en mi blog!! :)

    ResponderEliminar
  2. Me encantaría poder implementar en mi blog de Blogger una tabla/índice de contenido en algunos post, cuando son muy extensos, para que el usuario pueda ir navegando por el post pinchando directamente en las secciones. He visto varios tutoriales al respecto, pero por más que sigo las indicaciones no se aplica correctamente. ¿Podrías hacer un tutorial sobre ello, por favor?

    Me refiero a una tabla/índice de contenido con la opción "ocultar" o "mostrar" y que enlace con los diferentes títulos, encabezados, etc dentro del propio post.

    Un saludo y mil gracias por toda la información que nos proporcionas en tu blog.

    ResponderEliminar
    Respuestas
    1. Hola, con respecto a su pregunta, usted necesita una tabla de contenido basado en etiquetas.

      Eliminar