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.