dinero

Titulo

Tabla de Contenidos para Blogger [TOC]

Leíste bien, es posible tener una tabla de contenido para Blogger, las tablas de contenido o TOC ayudan mucho para posicionar partes de tu contenido en Google, mejoran la experiencia del usuario ya que puedes obtener una mejor navegación dentro de tus post.

¿Qué necesito para crear una tabla de contenidos en blogger?

Necesitas mover el CSS y HTML de tu página, aquí te digo como para que sea sencillo!

¿Cómo poner una tabla de Cointenidos [TOC] en Blogger?


Lo primero que debemos de hacer es colocar los CSS siguientes:

#toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    display: table;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 20px;
    width: auto;
}

.toc_title {
    font-weight: 700;
    text-align: center;
}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;
}
Después en tu Post colocaras el la tabla de contenido con el siguiente código HTML

<div id="toc_container">
<p class="toc_title">Contenido</p>
<ul class="toc_list">
  <li><a href="#Primer_Punto_Header">1 Primer Punto Header</a>
  <ul>
    <li><a href="#Primer_Sub_Punto_1">1.1 Primer Sub Punto 1</a></li>
    <li><a href="#Primer_Sub_Punto_2">1.2 Primer Sub Punto 2</a></li>
  </ul>
</li>
<li><a href="#Segundo_Point_Header">2 Segundo Punto Header</a></li>
<li><a href="#Tercer_Punto_Header">3 Tercero Punto Header</a></li>
</ul>
</div>



y en cada H2, H3, H4 deberás de colocar la referencia

<h2 id="Punto_Punto_Header">Primer Punto Header</h2>

Si analizamos el código veremos que hay una referencia en la línea de tabla de contenidos que debe de ser igual a la de cada H2, H3, H4, por lo tanto solo basta con empalmar esa información y tendrás una linda tabla de contenidos en tu blogspot

Aquí un ejemplo en este post detrás del primero H2 tengo la tabla de contenidos.

Buscador de Ofertas en tu Página

tabla de contenidos para blogger blogspot

Espero la siguiente semana subir un excel para poder crear la tabla de contenidos de una manera rápida ya que es un poco tedioso estar colocando las referencias en cada titulo tomando en cuenta que luego llegamos a tener post de hasta 5mil palabras.

Si tu conoces una manera de hacerlo más rápido comenta y comparte con todos!.

5 comentarios

  1. No me queda claro donde lo empalmo la referencia?

    ResponderEliminar
    Respuestas
    1. La colocas en tus títulos en el código , ejemplo < h 2 id=“referencia”> tu título h2 y colocas la misma referencia que colocaste en la tabla de contenidos, espero subir un excelbla sigguoente semana para hacerlo en automático

      Eliminar
    2. Le puse espacios a la etiqueta h2 para que me dejara subir el ejemplo

      Eliminar

Con la tecnología de Blogger.