Es un sistema de navegación crado por Beautiful Beta, consistente en desplegar todos los contenidos (hasta un máximo de 99-ahí tengo yo el "problema", jajajaj-) del blog: Una tabla se abre y esconde a voluntad del visitante, mostrando el título de la entrada, la fecha y las etiquetas asignadas. Picando en cada uno de esos elementos, nos dirige al mismo.
¡Ah!: Cuando paséis el ratón por encima del título del post-entrada, aparece una tooltip con un extracto de su contenido. Me gusta mucho (¿ya lo he dicho? :D)
Lo encuentro utilísimo, de manera que lo he insertado aquí y en "Revolutum" (en la sidebar, donde dice TOC).
Y es facilísimo de insertar y diseñar. Así que vamos a ello:
1º.- Editad la plantilla y bajadla hasta "Entradas del Blog". Allí tenéis que cambiar el "maxwidgets por un número más, p.e.: si tenéis un "maxwidgets=1", tenéis que poner "2"... es decir: añadir uno más de los que tenéis y, claro, detrás un "showaddelement="yes".
Ya podéis guardar.
2º.- Id a Diseño de Plantilla e insertad, en el nuevo Elemento de Página sobre las Entradas del Blog, un Elemento de HTML-Java, con este contenido:
<div id="toc"></div>
3º.- Cread un nuevo Elemento de Página HTML-Java en la sidebar de vuestro blog, en el que insertaréis lo siguiente:
<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div><script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script><script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
4º.- Regresad a Edición de Plantilla y añadid un CSS antes del cierre /skin:
<style type="text/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%;}</style>
Ya podéis guardar y ver el resultado... a mí me encanta :D.
Por supusto, podéis cambiar colores y demás en el CSS... también en el script... para quien no le tena "alergia", como yo ;), a Google Pages...
Pd: Como tengo más de cien entradas y, claro, no se ven todas, podéis picar en una etiqueta, ej "Navegación", y se os mostrarán desde el TOC todos los contenidos de esa etiqueta; después, sólo tenéis que picar en el título de la entrada para verla.
Después de picar en una etiqueta, si queréis otra, "picad en "Hide TOC" y, de nuevo, en "Mostrar-Show TOC" para elegir nueva etiqueta.
✍ ¿Quieres hacer algún comentario? ✍