38

BLOC TOC

Según Beautiful Beta es una "caja de contenidos interactivos". Podéis verlo funcionando en elblog de Beautiful Beta, en la sidebar de la derecha, donde dice "Show Toc", veréis que al pinchar se abre en la misma página una lista con los post del blog (hasta 100 post) en orden alfabético, si pincháis en post date podréis verlos por orden de publicación del más nuevo a los anteriores.
Además si se pasa el ratón sobre el título de las entradas se ve un avance de las primeras líneas del post en un tooltip (cajita de texto emergente), y si pincháis sobre una de las etiquetas se mostraran todas las entradas que la estén usando.

Antes de comenzar nos descargamos el script a nuestra PC y lo subimos a un servicio de alojamiento de archivos adecuado.

[Paso 1] Vamos a plantilla-HTML y buscamos esta parte del código:


<div id='main-wrapper'>
<b:section class='main' id='main' maxwidgets='1' showaddelement='no'>

y cambiamos en el maxwidgets el 1 por el 2 y en showaddelement ponemos yes.

Si alguno ya tenéis maxwidgets= 2 lo cambiáis por 3 y así sucesivamente.

Salvamos los cambios y vamos a elementos de la página.

[Paso 2] Añadimos un nuevo elemento de HTML- javascript, dejamos su título en blanco y pegamos dentro esto: <div id="toc"></div>, colocamos el nuevo elemento sobre las entradas del blog.

[Paso 3] Añadimos un nuevo elemento de HTML-Javascript en la sidebar y le ponemos un titulo (opcional), pegamos este código (acordaros de sustituir donde dice YOURBLOG por vuestra url y colocar la url del script en URL_DEL_SCRIPT):
<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br><br></div>
<script style="" src="URL_DEL_SCRIPT"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;
max-results=999&amp;callback=loadtoc"></script>
</div>

[Paso 4] Antes del cierre ]]></b:skin> de la plantilla-HTML podéis añadir el css que nos da Beautiful Beta y así la vista de la relación de post se verá como la de ellos.
Yo lo he dejado tal cual, es decir, sin añadir el css a ver que resultaba...
El resutado ha sido que mi relación de entradas se ha adaptado automáticamente al estilo de mi blog, así que me ha gustado el resultado.
Para los que querais probar como en Beautiful Beta, os dejo el CSS:
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}

Si tienes más de 100 post para mostrar en tu blog, en el paso 3, copias y pegas la última línea sustituyendo 999 por 101, si tienes más de 100, vuelves a copiar la línea sustituyendo 101 por 201 y así sucesivamente...
La línea en cuestión es esta:
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;
max-results=999&amp;callback=loadtoc"></script>


El script ha sido traducido al español por cortesía de Amaru.

Entradas Relacionadas:

38 comentarios:


Anónimo

Impresionante Rosa, está genial esta guía que muestras.

Neo

Fenomenal, enhorabuena por tu trabajo. Entre tú y otros blogs de ayuda, me estais haciendo esto más fácil.
Pronto colocaré éste truco en mi Blog.

Gracias por todo.

Anónimo

Lo conseguí gracias a tí Rosa, y mira que lo había intentado, muy buena explicacion ya tengo mi favico, te lo agradezco infinidad, y gracias por tu blog enhorabuena!!

Anónimo

Tanto como impresionante Carmen...pero queda chulo, eso si.

Neo me encanta te sea útil, un saludo!

Yolanda, je,je, desde luego agradecida eres, comentario aquí, comentario en cbox, y una entrada dedicada en tu blog, XD, tengo el ego
por las nubes, :D

Gem@

Todo lo que yo diga es poco Rosa, creo que es una de las cosas más prácticas para añadir al blog.
Mil gracias por los datos, en verdad Beautiful es un genio y tu un encanto por compartirlo ;)

Anónimo

JE,JE, Gem@ mira quien habla de compartir...
Suerte que "chapurreo" un poco de inglés y que en Beautiful Beta no usan un inglés demasiado técnico XD.
Saludos!

Gem@

El sueño me puede porque no me ha salido como a ti igual que las entradas, sino en la sidebar, algo hice mal :D

Anónimo

Gem@ en el paso 2 ¿has colocado-arrastrado el elemento encima de las entradas?
Ahí puede estar el error, igual lo has dejado en la sidebar.

Gem@

Si, siiiiii lo hice antes de ir a dormir jajajjaa siento no haber venido a decírtelo :)

Anónimo

Que bien que te haya servido Gem@:)

CaTa

Rosaaa Holaa, buenisimo tu blog!! y dime, que puede hacer una respecto de este truco si no tengo maxwidgets ???
No lo encuentro definitivamente en mi plantilla.
Ojalá me puedas ayudar, porque me encantó el truco este
Un abrazo a la distancia
CaTa

Anónimo

Cata, hola wapa!
He visto tu blog, por cierto, ME ENCANTA la imagen del grafitti en tu cabecera!
Tu plantilla es la mínima, es raro que no tenga maxwidgets ¿lo has buscado con elementos expandidos?
Si es así y no está, prueba a añadírselo a "mano" .

CaTa

Puchaa Rosita, imposible poner "a mano" el maxiwidget, me da error permanentemente, snif...y si, lo busqué en elementos expandidos. Tal vez lo eliminé al poner otro artilugio no se, ay que lata!!.
Bueno,es una lástima, gracias por responderme.
Un abrazote
CaTa

Amaru

Lo primero: cata, no es imposible poner a mano el maxiwidget, de hecho yo lo hice. Debes agregar maxwidgets='1' entre id='main' y showaddelement='no'.

Lo otro: traduje el script para uno de mis blog a mi modo, pero hice otro "standar" para cualquiera otro. Ojalá les sea útil.

http://frozensecrets.googlepages.com/Toctraducido.js

Anónimo

Amaru, gracias, aunque a Cata ya la había ayudado con el tema por email.
Esta entrada es de hace mucho, de hecho yo lo tenía colocado en mi blog y traducido al castellano, pero lo quité. La verdad, no tubo demasiada acogida el hack...

zake_ajl

hola rosa,siento ser tan torpe pero creo que tengo un problema similar al de cata,al añadir el maxwidgets 2 no aparece lo de añadir nuevo elemento en el bloque entradas.

Anónimo

zake_ajl, si no has hecho ahí ningún cambio tendrás algo así:

<b:section class='main' id='main' showaddelement='no'>

Cámbialo por esto:

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Derzebereth

Hola Rosa, muchísimas gracias, me ha funcionado bastante bien en varios de mis blogs, pero el problema es que en uno de mis blogs tengo más de 4000 entradas (sí, cuatro mil) así que sólo me aparecen las últimas 500. Ya le he tratado de ajustar de acuerdo a como dices para que mínimo me aparezcan unas mil, pero no funciona, de las 500 no pasa.

¿Cómo podría hacerle para que, o bien me aparezcan más de 500, o bien sea aleatorio y me aparezcan algunas entradas viejas, o bien, tenga la opción de página 1, página 2 o unas felchitas de siguiente?

Jaja, sé que pido mucho ¿verdad? pero ¿Puedo tener alguna esperanza?

Besos y mil gracias.

http://cazadoresbackup.blogspot.com/

Anónimo

Derzebereth , tienes explicado como hacerlo al final de la entrada :-X

Derzebereth

Gracias Rosa, pero fue lo primero que hice antes de decidirme a escribir un comentario, pero por más que le mueva sólo consigo que se vean máximo 500 entradas, no da para más.

De hecho en mi comentario anterior te expliqué que hice lo que recomiendas, si no no te hubiera escrito nada.

El número máximo de entradas que muestra es de 500, ni una más, así le ponga 501 o le ponga 901 o 1001, sólo se ven 500 entradas.

Anónimo

Derzebereth , si es cierto que ya lo decías en el comentario, perdona, a veces "me lanzo" y me pasa lo que me pasa:-$

He estado mirando el script, y tal como está, se supone que tendría que mostrar los que se necesiten...
No se que más decirte, no puedo comprobarlo por mi misma, ya que donde más entradas tengo es en El Escaparate, y no llegan a 500...

susana espíndola

hola Rosa!!! hace mucho no te dejaba un mensaje y me la paso consultando tu página para usar tantas y tantas herramientas que brindás!
Así que un saludo muy especial por todo lo que compartís y este post me parece muy pero muy bueno. Así que tanto a Beatiful Beta como a vos! Mi agradecimiento!!! Y vengo aprendiendo un montón y ya me estoy largando con un nuevo blog!!!

Anónimo

Pues a mi me encanta este hack y me parece muy práctico... Ante todo, gracias Rosa por las sencillas y útiles explicaciones. Llevaba tiempo intentando aplicarlo, sin éxito. Hacía todos los pasos una y otra vez... pero nada. Hasta que pensé que quizá el javascript ya no estuviera alojado en la dirección del paso 3, o que tuviera un fallo temporal en el acceso a este archivo. Gracias también a Amaru (comentario #14), que facilitó la dirección del toc traducido, lo subí a un servidor y ahora funciona perfectamente! Muchísimas gracias y felicidades por este espacio. Besos,
Senysen

Anónimo

Senysen | me alegro de que te haya sido útil.

Anónimo

isanet , lo siento pero no me había dado cuenta de que la página del script no estaba ya disponible, lo he corregido subiendolo a un nuevo alojamiento. Aunque lo mejor sería que cada uno se descargase el suyo para subirlo a un servidor propio,sino en un futuro la web volverá a fallar por uso excesivo de ancho de banda...

En cuanto a lo otro, no hay problema en agregar maxwidgets='1' a mano, entre id='main' y showaddelement='no'.

Unknown

Rosa, en mi blog hay dos de los que mostras en el paso 1 ahi una que dice ya 2 y otro que dice 1 (estan los dos en la misma linea)

Unknown

así:
<div id='main-wrap1'><div id='main-wrap2'>

Anónimo

TRECARUNGA, eso es porque tu plantilla es una Rounders. Lo que tienes que fijarte es debajo de esas líneas seguidas que dices.
Ahí habrá algo así (si no lo has tocado antes):

<b:section class='main' id='main' showaddelement='no'>

Si estáasí como te la muestro, la cambias por esta:
<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Eso es para que sobre las entradas veas una cajita de "añadir gadget"

Unknown

Ya lo puse en mi sidebar :D y edite un poco el css porque no se veia muy bien en mi blog.

Anónimo

TRECARUNGA, voy a ver...:D

Arsenio Lupín

Muchas gracias Rosa, pude poner el índice automático, pero yo lo puse en la barra, arriba del todo y le cambié el título a Mostrar Indice... para que cambiara una vez de presionado y que quedara en negrita y con buen tamaño, tuve que cambiar el script (que lo renombré a .js) en las funciones showToc() y hideToc() para que quede igual...

Lo podés ver como quedó en:
http://howtoarsenio.blogspot.com/

Gracias nuevamente!

Enmanuel Morales

Querida rosa me parece excelente este truco, pero funsiona con todos los navegadores? yo uso IE 7 y no me funsiono, (al pinchar Show Toc no se abre la lista con los posts), pero utilizando mozilla firefox si se abre, que pasa ally rosa? :( , me gustaria que me funsionara con IE 7, no se si fue que hice algo mal o es que no funsiona con IE 7.. bueno desde ya muchas gracias.. salu2

Anónimo

Miguel Angel Esta entrada es bastante antigua, así que lo único que puedo decirte al respecto es que yo misma lo tenía implementado y lo mantuve durante meses y SI funcionaba en todos los navegadores, incluido IE7... a no ser que algo haya cambiado desde entonces en ese navegador... yo ya no lo utilizo así que no puedo decirte... siempre uso la última versión de cada uno de los navegadores...

Arsenio Lupín

Miguel, yo lo tengo implementado en mi blog: http://howtoarsenio.blogspot.com/ y probé recien con IE7 (nunca instalé el 8) y me funciona bien. Trabaja con javascript, así que fijate si en las opciones de seguridad no lo tendrás desactivado.

Anónimo

Arsenio Gracias por el apunte :D:D

Anónimo

excelente aporte aunque tengo una duda a mi no me sale todo el contenido para ser exacto tengo 606 post y solo aparecen 500 :S

nakahito
Este comentario ha sido eliminado por el autor.
Anónimo

ya lo solucione :D

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S