add

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

emailEnviar por correo

1 comentarios:

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios