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.
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
- Como crear un Mapa de sitio para Blogger Wordpress Páginas web
- 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”
3 Un clic en “Editar HTML”
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”
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
8 Luego
al dar un clic en “Página en blanco” se te abrirá una página como la siguiente
9 Debemos
activar la casilla que dice “HTML”
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
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,
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
gracias amigo!! lo estoy usando en mi blog!! :)
ResponderEliminarMe 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?
ResponderEliminarMe 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.
Hola, con respecto a su pregunta, usted necesita una tabla de contenido basado en etiquetas.
Eliminar