31 agosto 2013

Indice de entradas para Blogger


Hoy os voy a mostrar cómo agregar un índice de las entradas a una página del blog. Tiene muchas opciones de configuración para adaptarlo a vuestro propio diseño las cuales describiré a continuación.


Después de ver la demostración si deseas añadirlo a tu blog sigue los pasos siguientes.

Paso 1: Crear página
--------------------------------------------------------------------------------------------------------------------------------------------
En primer lugar tenemos que crear una nueva página. Panel de Administración → → páginas → → Nueva página página en blanco. El editor de la página se abrirá y ahora haga clic en la ficha HTML.

Paso 2: Agregar código
--------------------------------------------------------------------------------------------------------------------------------------------
Una vez en la ficha HTML del editor de páginas, agregue el código siguiente:
<style type="text/css">
#tabbed-toc {
margin:0 auto;
background-color:#252524; /*color fondo etiquetas*/
-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;}
#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:15%;
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; /* color enlace etiqueta */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;}
#tabbed-toc .toc-tabs li a:hover {
background-color:#4B4B4B; /* background de etiquetas */
color:white;} /* color enlace etiqueta con background */
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#ccc; /* background de la primera etiqueta */
color:white; /* color enlace primera etiqueta con background */
-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;}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width:85%;
float:right;
background-color:#ffffff; /* color separación entre entradas */
border-left:5px solid #ccc; /* borde separación entre etiquetas y entradas */
-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:#3A3A3A; /* color enlace de entradas */
line-height:20px;
height:20px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden;}
#tabbed-toc .panel li:nth-child(even) {
background-color:#DFDDDD;} /* primer color separación entre entradas */
#tabbed-toc .panel li:nth-child(even) {
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li.bold a {
background-color:#333; /* color background de las entradas */
color:white; /* color del enlace con el background de las entradas */
outline:none;}
@media (max-width:700px) {
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block;}
#tabbed-toc .toc-tabs li {
display:inline;
float:left;}
#tabbed-toc .toc-content {
border:none;}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;}}
</style>
<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.amorsevillista.com/" title="indice">Amor Sevillista</a>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://amorsevillista.blogspot.com", /* url de tu blog */
containerId: "tabbed-toc",
activeTab: 1,//()
showDates:false,
numChars: 200,
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 5,
newText: " - <em style='color:red;'>Nuevo!</em>"
};
</script>
<script src='https://dl.dropboxusercontent.com/u/54259066/indice.js
' type='text/javascript'></script>

Paso 3: Configuración
--------------------------------------------------------------------------------------------------------------------------------------------
Ahora cambie la dirección URL en "Url de tu blog"
Puedes cambiar otros ajustes, lo he descrito brevemente en el código .
Después de realizar los cambios, guarde la página y enlázala en el menu o donde quieras, ahora ya puedes ver todo el contenido del blog en una sola página.


Visto en DTE

Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

83 comentarios

hola, me encanto este indice de entradas, pero me gustaria saber como hacer para escoger que etiquetas mostrar?

Raul, no puedes elegir que etiquetas mostrar, se muestran todas las etiquetas que tiene el blog.

Genial...me encanta este indice...eres un crack...
Gracias por compartir...!!!
http://www.lasrecetasdetriana.com

Me encanta la opción de escoger etiquetas de una lista, aunque para ello haya que tener poquitas y bien organizadas. Una nueva vuelta de tuerca a un script muy popular para estas cosas. Hace algún tiempo yo lo usé para crear un árbol desplegable por años y meses, al estilo del gadget de Blogger, pero esto de las etiquetas lo tengo que adaptar de alguna forma... ¡Gracias!

una pregunta se puede editar para solo mostrar ciertas etiquetas

Cronos, al tomar el feed recoge todas las etiquetas del blog.
En definitiva, no.

una pregunta, en que lugar edito para alargar la columna de la izquierda? GRacias!!

Lourdes, creo que te refieres al ancho de la primera columna no?
Si es así busca: width:15%; es la columna izquierda y width:85%; la derecha.
Ajústa ambas pero que sumen 100. ¿OK?

Hola Antonio, soy Conchi de nuevo, me gusta este menú para www.itertempus.blogspot.com
He seguido tus instrucciones, he creado la página pero al ver vista previa me salen todas las etiquetas una detrás de otra. ¿Cómo agrupo para que salgan por provincias? es decir ¿cómo separo etiquetas de entradas?

Conchi debes colocar etiquetas a todas las entradas, acostumbrate cada vez que hagas una entrada colocarle la etiqueta identificativa.
Ejemplo: hablas de un pueblo de cataluña en una entrada, pués en la etiqueta colocas : cataluña.

He observado que la tienes por páginas y así no te saldrán nunca.

Estoy trabajando en ello, dando muchas vueltas,pero creo que lo conseguiré, si no es así te pediré que me eches un cable. Gracias Antonio

Este comentario ha sido eliminado por el autor.
Este comentario ha sido eliminado por el autor.

!! Muchísimas gracias, es genial !!

Me alegro Mariola que te haya servido.
Gracias por visitar mi pequeño rincón.

ola amigo ,ya me habia servido y super, pero cambie de plantilla y ahora no me lo agarra el indice no se por que , primero decia cargando nomas asi se quedaba, despues lo volvi hacer y nada ahora no aparece nada

me podrias ayuda

Déjame url de tu blog para poder ver cual es el motivo.

Me ha encantado.....aunque no me termina de funcionar lo he probado y dice loanding y ahí se queda...pero estupendo, bravo por tu blog ...no hace falta decir que soy no novata, novatisima.....ya cree un blog que estuvo un tiempo en funcionamiento, para un grupo de facebook , pero mas simple que el mecanismo un botijo...ahora estoy intentando darle un nuevo aire para reabrirlo y desde luego que aqui me he quedado embobada al ver todo esto.....muchisimas gracias ....y ya te contare si me llega a funcionar....

Me encantaría ponerla en el blog, el tuyo sin tocar la URL me sale perfecto a la primera, pero encuanto meto la mia se me queda así......"loanding....."
no lee na de naaa....pa mi que me ha tocado el cegato.....es broma!!!! na que soy mu torpe y ya esta....pero gracias por tus enseñanzas, a mi me estan ayudando mucho para ir aprendiendo cosicas....

Atenea, dime la url de tu blog para comprobar dicho fallo, pero si con mi url va bien, debería ir también con la tuya.

Muchisimas gracias por responder a mi mensajes...Lo he quitado...pero si quieres lo pongo de nuevo no te asustes eh ya te he dicho que soy torpona.....es esta http://ateneacastlelena.blogspot.com.es/ , eso si yo me dejo aconsejar lo que sea...

Atenea, te lo he modificado de color para adaptarlo a tu blog, descargalo de aquí: DESCARGA

Muchisimas gracias, Antonio voy a mirarlo ya mismo....ains que ilusion me hace ni te imaginas,,,,,

Otra vez la cansina.....!!!!! me encanta, y de verdad que super agradecida pero hay un problem, no me salen las publicaciones en la parte derecha de la tabla, posiblemente sea un error mio por algo que fijo, tengo mal hecho.....si pudiera enviarte una imagen para que lo vieras, o si quieres pasar otra vez por el blog, se que soy cansina, pero es que veo tantas cosas bonitas en este blog, es que me gusta todo, no tiene desperdicio alguno....

Atenea, yo lo veo bien, son las etiquetas las que debes de introducir en cada articulo.
MIRA ESTA IMAGEN

Veamos, al crear una entrada siempre hay que etiquetarla, por ejemplo colocas un poema, pués en la etiqueta debes colocar "poemas".
Creas otra entrada sobre un tutorial pués en la etiqueta colocarás "tutorial" y asi susecivamente.

Tienes muchas etiquetas con la misma función, ejemplo manualidades de.... manualidades de.... todas deberían entran en la etiqueta "manualidades"

Tienes todas la razón....estoy re-etiquetando todo....son muchas las etiquetas para una misma cosa en definitiva....pretendía darlo todo bien mascadito, pero va ser que con que lo de, desmenuzadico, basta...no sabes como me gusta y como te lo agradezco, eres un encanto de persona....y si yo en alguna ocasión, cosa que dudo muchísimo,puedo echarte una mano en algo, no dudes que aqui me tienes incondicional.... no puedes imaginarte lo contenta que estoy.....muchísimas, pero que muchísimas gracias.....

http://wanimehd13.blogspot.mx/ esta es amigo,, gracias por ser tan atento:D:D

Identi 13 prueba colocando tal cual en una entrada o página el ESTE CÓDIGO

Antonio antes que nada darte las gracias por tu información tan benéfica para todos. Gracias.
Perdona, pero en mi blog quiero ponerlo, pero no termina en bajar el contenido. Tendré mal algo sobre el feed del blog. Gracias...

Mi blog es: http://elrincondeyanka.blogspot.com.es/

Yanka tienes problemas de redirecionamiento con el feed.
Mira esta IMAGEN, la he sacado al querer acceder a tu feed.

no amigo , otra ves nomas se queda en cargando D:

Este comentario ha sido eliminado por el autor.

Ahora que te sale? Perdona la molestia. Gracias...

Yanka, aún no trabaja bien el índice, comprueba en configuración-otros, el feed de tu sitio.
Te dejo una imagen de como lo tengo configurado: VER IMAGEN, colócalo así y luego click en guardar.

Este comentario ha sido eliminado por el autor.

Hola Antonio, gracias antes que nada por tu aportación a la comunidad de torpes que somos los bloggeros novatos.

He utilizado tu codigo para crear un índice de etiquetas en mi blog y funciona perfectamente.

Puesto que tengo muchisimas entradas (es un blog de noticias de taxi), me gustaría también poder modificarlo para que el orden no sea por etiquetas sino por fechas (meses, años, etc). Este índice sería independiente del anterior, es decir, iría en una pagina a parte.

Te agradeceré cualquier ayuda al respecto.

Eduardo.

TeleTaxi eres tocayo mío, yo también soy tele-taxi pero de Sevilla, bueno vamos a lo que vamos.
Para mostrar un índice con fecha, coloca este script antes de </head>

<script type='text/javascript'>
// <![CDATA[
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postYear=new Array();var postMonth=new Array();var postYearMonth=new Array();var postYearMonth2=new Array();var postTanggal=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;var month2=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var m=a.feed.entry[h];var e=m.title.$t;var l=m.published.$t.substring(0,10);var p=m.published.$t.substring(5,7);var g=m.published.$t.substring(8,10);var n=month2[parseInt(p,10)-1]+" "+m.published.$t.substring(0,4);var c="/"+m.published.$t.substring(0,4)+"_"+p+"_01_archive.html";var j;for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="alternate"){j=m.link[f].href;break}}var o="";for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="enclosure"){o=m.link[f].href;break}}postTitle.push(e);postDate.push(l);postUrl.push(j);postYearMonth.push(n);postYearMonth2.push(c);postTanggal.push(g)}}}b();displayToc2();document.write('')}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postYearMonth[b];document.write("<p/>");document.write('<p><strong><a href="'+postYearMonth2[b]+'">'+temp1+"</a></strong></p><ul>");firsti=a;do{document.write("<li>");document.write("["+postTanggal[a]+'] <a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");document.write("</li>");a=a+1}while(postYearMonth[a]==temp1);b=a;document.write("</ul>");if(b>postTitle.length){break}}};
// ]]>
</script>

y ahora en una entrada o página coloca esto:
<script src="http://nombre-de-tu-blog.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Cambia el nombre de tu blog por el tuyo.
Cambia 500 si tu blog dispone de más de 500 entradas

Antonio:
Estaba buscando desde hace tiempos esta posibilidad. Hice todo como lo enseñas, pero no me sale. Podrías darle un vistazo?
http://cambiototalrevista.blogspot.se/

Gracias,

Allende La Paz

Para Allende La Paz:
Soy Eduardo de www.TeleTaxiPlus.es
Creo que no te aparecen las entradas del indice por lo mismo que me ocurrió a mi al principio.
Cuando creaba una entrada solo ponia el titulo en una parte, y hay que ponerlo tanto donde dice Titulo como en el texto que asocias al link de la entrada.
Una vez corregi las entradas, me aparecieron todas en los indices por etiquetas.
Saludos cordiales y un gran saludo a Amor Sevillista (taxista y olé).

Allende, yo coloco el script y el indice lo veo bien, lo que tienes mal son las etiquetas, tienes muchas etiquetas pero vacías, ejemplo (actualidad,asia,autores,blogs,carbonell,,,etc.) Si no les colocas etiquetas a las entradas, dificilmente te aparezcan.
Salen algunas, sobre todo en "allende la paz"
Mira esta imágen: ver imagen

Allende, tambien te recomiendo que leas el comentario 14a, con una etiqueta que describa la entrada te sobra y en la mayoría tienes 4 o 5.

Soberbio!!! Hace años he estado esperando un post como este, eres un genio y agradezco hasta el cielo semejante ayuda, es un hermosísimo indice, no lo hubiera podido imaginar mejor, exageradamente sencillo y me dejó con el ojo cuadrado el hecho de que también avisa cuando una reseña ¡Es nueva! Lo amé, había encontrado guías imposibles de seguir, añadiendo, quitando, descargando, etc., todo un rollo aburridor e incomprensible, pero este es la mar de sencillo, wow y simplemente wow. Ya te sigo, eres un verdadero MASTER. GRACIAS!!

Hola compi.
Lo he implementado en mi blog, pero veo que tiene un limite de 500 entradas y yo tengo casi 800. El resto no me las muestra.
Alguna solución?
Gracias.

www.lacuinadesempre.cat INDEX

Por cierto, el indice es brutal de chulo!

lacuinadesempre.cat, como sabrás el feed de Blogger no incluye todas las entradas de nuestro blog, sino que muestra sólo las 500 últimas.

Gracias por visitar y comentar en el blog, espero que sea de tu agrado.

A mi me aparecía cargando también, pero era por qué no tenía ninguna
entrada.

hola me encanta tu indice pero lo hice en mi blog y sale pero tu indice, pongo la url del mio y sigue apareciendo el contendido de tu indice como le podría hacer, otra duda que tengo es que tenia antes un indice, pero no quite porque ya no aparecían todas mis etiquetas ya q solo abarcaba 999 como le podría hacer para que salieran todas ???

te lo agradecería , gracias

Valissa, he colocado tu url y se ve, lo que ocurre es que tienes muchas etiquetas y algunas sin entradas(ver imagen)

muchisissisisismas gracias eres un sol y gracias por la ayuda, ya razone el codigo y vi mi error gracias

FYI
Os dejo un senzillo pero útil código para blogger que genera un índice para una sola etiqueta, sin agrupar y ordenado alfabeticamente. Además incluye una función de filtrado.
Espero que os guste.
Saludos.

En un entrada o página nueva incrustad este código:




NOTA: Ojo!, he escripto SCRIP pero teneis que poner una T final, lo que pasa que en comentarios no me permite escribir esta palabra clave.

Os recomiendo descargar el fichero (https://dl.dropboxusercontent.com/u/32569850/script_index.js) y subirlo a una ubicación vuestra para no depender de nadie.
Saludos.

...pfff, pues tampoco sale el código. Amor Sevillista, si lo quieres mándame un email y te lo paso y lo publicas. Saludos.

info@lacuinadesempre.cat

Lacuinadesempre, pàra incrustar códigos en páginas o comentarios debes pasarlo a texto plano, en esta Página puedes hacerlo.
Si quieres mándamelo por formulario, arriba lo tienes.

Hola, interesante para animarse más a usar un blog de blogger, la única desventaja es que haciendo unas pruebas al parecer solo soporta 100 etiquetas (?), habrá manera de modificar eso?

A lo mejor si las que no cupieran no fueran muchas más, pudieran mostrarse independientes con la herramienta que menciona lacuinadesempre.cat, ojalá y puedan compartirla aquí mismo. Gracias.

Hace días puse el comentario que antecede a este pero no marqué ¨avisarme¨ como se indica y quizá por ello no he recibido una respuesta, así que va de nueva cuenta. Gracias y ojalá esta vez puedan responder.


¨Hola, interesante para animarse más a usar un blog de blogger, la única desventaja es que haciendo unas pruebas al parecer solo soporta 100 etiquetas (?), habrá manera de modificar eso?

A lo mejor si las que no cupieran no fueran muchas más, pudieran mostrarse independientes con la herramienta que menciona lacuinadesempre.cat, ojalá y puedan compartirla aquí mismo. Gracias.¨


Chreel la verdad es que no sabría decirte. Pero es muy posible que tenga ese límite, ya que se basa en el RSS del sitio.

Mm qué lástima se ve muy padre! Bueno, te agradecería pudieras hacerme llegar el modo si acaso lo consigues, así como la otra opción que comentó lacuinadesempre.cat, de cualquier forma para estar más al pendiente me suscribiré :)

Muchas Gracias Amor Sevillista.

Hola, refuerzo lo que se comenta aqui, es una contribucion estupenda. Gracias por compartirla.
La única cosa que echo en falta, (no se si es un fallo), es que al clickar en una entrada del listado, se abre en una nueva ventana, seria interesante que se abriera en la misma ventana.
gracias y un saludo

Gracias por este aporte amigo

De nada Rosana, en cuanto a la ventana, prefiero cerrar que volver atrás.

Ma alegro Nitro que te haya gustado.
Gracias por comentar.

Este comentario ha sido eliminado por el autor.

Hola, ya probé tu código y no me funciona, mira este es mi sitio en donde puse le código http://seriesuroboros.blogspot.mx/p/indice-una-sola-etiqueta.html
Me podrías ayudar a solucionarlo?

Hola!!! me parece espectacular!!! pero tengo una duda con los colores, como se el numero de los colores? son de html? es que el fondo es negro y aparece el numero 252524 y no se como elegirlos..
Desde ya igualmente mil gracias por compartirlo!!

Mabel
http://cocinandoconma.blogspot.com

Correcto Mabel ese es el color del fondo, parece negro pero obviamente no lo es del todo.
Cambia 252524 por el color html que desees.

Vale, lo cambiare a ver como queda en otros colores.
Muchas gracias!!!
Saludos

Mabel
http://cocinandoconma.blogspot.com

Es genial! Muchas gracias!

gracias amigo mis respetos llevaba medio día buscando y poniendo un sin numero de codigos y no me funcionaba y el tuyo funciono de maravilla y aparte que tiene un diseño unico, solo tengo una duda veo que las entradas se ordenan alfabéticamente pero en base a las etiquetas y también me gusta pero existe alguna forma de que se vean todas las entradas sin importar que etiquetas tengan?
gracias

Todas las entradas es imposible porque se basa en el RSS del sitio y blogger solo deja una cierta cantidad.

Muchas gracias por compartir este genial código, me ha sido muy útil. Ahora ya puestos me gustaría "tunearlo" para que se integrara mejor en mi blog, pero no sé exactamente como hacer para cambiar el blanco de fondo por un tono de verde y también hacer un poco mas grande la columna de la izquierda para que puedan leerse las etiquetas enteras. No quiero abusar de tu paciencia, pero como ves soy novata en este tema...me puedes echar una mano? Si pudieras decirme que parte del código corresponde a ese tema y como encuentro los números para el color te lo agradecería muchisimo.
Un saludo
Concha
www.jugandoconlacocina.blogspot.com

Concha elimina los estilos, osea desde <style type="text/css"> hasta </style> y coloca este en su lugar:

<style type="text/css">
#tabbed-toc {
margin:0 auto;
background-color:#18371C; /*color fondo etiquetas*/
-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;}
#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:#BAEC14; /* color enlace etiqueta */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;}
#tabbed-toc .toc-tabs li a:hover {
background-color:#405109; /* background de etiquetas */
color:white;} /* color enlace etiqueta con background */
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#405109; /* background de la primera etiqueta */
color:white; /* color enlace primera etiqueta con background */
-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;}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width:80%;
float:right;
background-color:#304911; /* color separación entre entradas */
border-left:5px solid #91BB08; /* borde separación entre etiquetas y entradas */
-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:#ddd; /* color enlace de entradas */
line-height:20px;
height:20px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden;}
#tabbed-toc .panel li:nth-child(even) {
background-color:#304911;} /* primer color separación entre entradas */
#tabbed-toc .panel li:nth-child(even) {
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li.bold a {
background-color:#467A06; /* color background de las entradas */
color:white; /* color del enlace con el background de las entradas */
outline:none;}
@media (max-width:700px) {
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block;}
#tabbed-toc .toc-tabs li {
display:inline;
float:left;}
#tabbed-toc .toc-content {
border:none;}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;}}
</style>

Que caña!!! Flipo, está perfecto Antonio, muchisimas gracias me lo has dado hecho y ha quedado genial.
Un abrazo
Concha
www.jugandoconlacocina.blogspot.com

hola gracias por todos estos aportes que me han servido mucho a mi blog

me podria decir como hago o si se puede colocar solo las etiquetas que yo quiera ?

Emerson para colocar las etiquetas que solo quieras puedas usar el gadget de etiquetas, eliges Etiquetas seleccionadas y click en las que quieras mostrar.
Luego puedes personlizar este mismo gadget con algún tutorial de internet.

Amigo, ya no me sirve el indice: http://www.ladimensiondesconocidaa.com/p/indice-de-episodios.html

Sólo se queda cargando, a qué se deberá eso, yo tenía el anterior indice, el que has publicado ahora es diferente amigo.

Ouróboros, no observo ningún problema en el código, lo puedes ver en esta Demo

Ya funciona de nuevo :D, dejo de funcionar en mis 2 blogs donde lo tenía implementado desde hace meses, entonces copie de nuevo el código y lo pegue en la pagina y así fue como funciono.

Muchas gracias amigo, por cierto ¿tú estás en forobeta?

Te envío un saludo y un abrazo fuerte.

Amigo, intente llevar el código a un blog en wordpress, pero no funciono, ¿existirá alguna forma de implementarla en wordpress? puesto que dudo poder encontrar un indice mejor que el tuyo, es imposible.

Ouróborox, el script toma el feed de blogger, no tengo la mínima idea de plantillas wordpress ni del feed de ello.
Nunca me he metido a comprobar el funcionamiento de Wordpress, ya con Blogger voy listo.

hola, es genial pero cuando he cambiadomi blog privado no me funciona, puedo hacer algo para funcione? me encanta , muchas gracias

buen día antonio gracias por el indice. tengo un blog con 194 entradas con la etiqueta JAWS; pero el indice me muestra solo 150 entradas, como podria ampliar este numero? te agradezco mucho.

Hola muy buen aporte pero mi pregunta es lo puedo usar en wordpress por que me gustaría usarlo en mi web saludos y espero tu respuesta.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"