Inicio
Contacto
Blog en el Móvil
Descargar presentación
Tabla de contenido con efecto acordeón
Fuente: Abu Fahan
Muchas veces habrás querido montar una tabla con el contenido de las etiquetas y entradas de tu blog a modo de índice y posiblemente te habrás encontrado con una ardua tarea.
Esta es una elegante tabla con efecto acordeón deslizante que se monta automáticamente en tu blog con las etiquetas y entradas que tengas.
Puedes ver el funcionamiento en este blog de pruebas.
La instalación es muy sencilla, vamos a ver como.
Antes de nada, recuerda hacer una copia de seguridad de tu plantilla.
[1.-] Entra en tu plantilla en Diseño/Edición HTML y antes de <head> copia y pega el siguiente código:
<!-- SCRIPTS PARA TABLA DE CONTENIDOS EFECTO ACORDEON DESLIZANTE -->
<script src='https://sites.google.com/site/pauscripts/scripts/daftarisiv2-pack.js' type='text/javascript'/>
<script type='text/javascript'>var accToc=true;</script>
<script src='https://sites.google.com/site/pauscripts/scripts/accordion-pack.js' type='text/javascript'/>
<!—FIN -->
[2.-] Guarda la plantilla.
[3.-] Tanto si usas páginas estáticas en el blog, como si usas entradas en la página principal, el siguiente paso es crear una página o una entrada, según sea el caso, y en edición HTML copia y pega el siguiente código:
<!-- GENERA TABLA DE CONTENIDO -->
<link href="https://sites.google.com/site/pauscripts/scripts/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script>
<!—FIN -->
Ahora cambia el NOMBRE DE TU BLOG por el tuyo y listo, guarda la entrada y mira como queda.
Un truquillo:
Si la has publicado como una entrada del blog y quieres que ésta sea siempre la primera en aparecer, un pequeño truquito es volver a editarla y cambiarle la fecha de publicación por una muy futura, como por ejemplo 31/12/2100.
Si la has publicado como un página, ya la debes de tener en el gadget correspondiente.
Personalización
En este blog también puedes ver el funcionamiento si pulsas en la pestaña “Todo” , aunque he rediseñado el estilo para que se ajuste al diseño del blog.
Si lo deseas y conoces como modificar los estilos CSS, aquí te dejo el archivo para que lo modifiques a tu gusto.
Descargar archivo CSS acc-toc.css
<!-- GENERA TABLA DE CONTENIDO -->
<link href="URL DE TU SERVIDOR/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script>
<!—FIN -->
Luego modifica el código anterior de la entrada del blog para la URL DE TU SERVIDOR correspondiente.
Este es el código CSS del archivo acc-toc.css.
<!-- CSS PARA TABLA DE CONTENIDO EFECTO ACORDEON -->
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
color: #fef4e9;
border: 2px solid white !important;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
<!-- FIN -->
Información del código CSS (no cambies estos nombres) :
El CSS consta de 4 partes:
.judul-label{ … … } ---> es el diseño de las cabeceras de las etiquetas.
.data-list{ … … } ---> es el diseño de la lista de títulos de las entradas.
.list-ganjil{ … … } ---> es el diseño alternativo de la lista de títulos.
.headactive{ … … } ---> es el diseño de la cabecera activa con los títulos.
Espero que te guste.
Enviar enlace de la entrada por e-mail.
Easy Video Producer
Dinos tu opinión.
Tu opinión en muy valiosa para ayudarnos a mejorar.
Todas las ideas son bienvenidas.
Gracias.