Iniciación a JavaScrip

Encontré un interesante artículo, o "Guía de los Por Qué y Cómos en el conjunto de tecnologías de JavaScrip" que recomiendo leer.

Espero que os resulte tan interesante como lo fué para mi.

El Pub Bocatería

Desde el pasado 8 de junio está abierto al público “El Pub – Bocatería - Cafe Chill Out” que ha animado la vida social en Aniñón.  Antes de aquella apertura ya estaba abierto en toda la red, se le puede seguir en Facebook, Twitter, Google+, y por supuesto en el blog de Blogger que me he encargado de diseñar y promover.

Es un diseño simple, basado en la plantilla estándar “Sencillo”, con los artilugios habituales y los colores elegidos por Salvador.  No es necesario complicar el diseño de un blog donde seguro que los usuarios van a encontrar cada cosa donde se supone que debe estar, con letra clara, sin más pretensiones que mostrar la actualidad y los futuros proyectos del local. 

Tendrían que cambiar la letra de la jota: … Si vas a Calatayud … acércate a Aniñón … y visita “El Pub – Bocatería”.

El Pub – Bocatería de Aniñón

Pronto abrirá sus puertas este nuevo establecimiento. 

“El Pub” Bocatería, está situado en la calle San Sebastián, s/n. – 50313 de Aniñón (Zaragoza), y estará dirigido por Salvador Francés. 

Me ha encargado el diseño del blog, de momento solo está en proyecto, pero espero superar este nuevo reto.

Mensajes relacionados con miniaturas : Link Within

Se que lleva tiempo por los blogs pero yo lo acabo de instalar, me ha parecido muy simple y sobre todo muy vistoso.  Son las entradas relacionadas con una imagen que se instalan desde http://www.linkwithin.com/ casi automáticamente.

Acceder a la página web mencionada, y rellenar los datos que se piden:

Pulsar el botón Get Widget cuando este todo relleno, y en la siguiente pantalla clickar sobre Install Widget para que se instale automáticamente.  Luego solo quedará ir a Blogger, Diseño y recolocar el gadget al final de las entradas.

Web Design Group

Una página imprescindible para los que nos dedicamos esporádicamente al diseño web es “Web Design Group”.  En esta podemos encontrar referencias de HTML y CSS, por lo que es una gran ayuda para resolver esas pequeñas dudas de sintaxis de lenguaje que a todos nos asaltan cuando estamos construyendo una web.

WDG ofrece material sobre una amplia gama de temas relacionados con HTML. Con esta ayuda serás capaz de crear sitios Web que pueden ser utilizados por cualquier persona en Internet, independientemente del navegador, plataforma o configuración.

Especialmente me ayuda en el manejo de las plantillas Blogger la “Guia CSS en castellano” y de forma más general la “Guía de referencia HTML 4” aunque esté en inglés.

Últimos retoques en el diseño de los blogs

El 11/11/11 empecé los cambios en el diseño de mis blogs.  Desde aquellos primeros pasos para reorganizar el diseño he estado complementando con diferentes entradas los cambios que he realizado.  Primero quiero pedir disculpas por las molestias que haya podido causar, y ahora quiero hacer un resumen de algunas cosas que he cambiado y todavía no he comentado.

Traductor de Microsoft

En esta nueva plantilla no he conseguido que funcionase el traductor de Google que tuve instalado antes.  Después de buscar las muchas opciones que hay, he optado por el de Microsoft por su elegante funcionamiento.  En la página de Bing Traslator está la opción “para webmasters” para implementar el widget, muy fácil.

Lista de enlaces con favicon

Aunque muchas páginas no tengan un icono propio, y para destacar la lista de enlaces he colocado el favicon correspondiente a cada una.  He seguido las indicaciones de Vagabundia con un ligero retoque: fijar las dimensiones de la imagen porque hay quienes usan iconos de 16x16 y otros de 32x32 píxeles (por ejemplo Blogger).  He cambiado esta línea añadiendo lo que esta en color:

<img expr:src=’data:link.target + &quot;favicon.ico&quot;’ height=’16’ width=’16’/>

Sin embargo no he añadido el cambio en el CSS que propone JMiur.

Imagen de fondo

No acababan de verse claramente algunos de los textos de la página, y después de muchas pruebas cambiando el color del texto y de los enlaces, la opción final ha sido aclarar la imagen del fondo, para que no solape ningún texto.

Mi lista de blogs

He añadido este gadget para que se vean las últimas entradas en mis otros blogs, por si le pueden interesar a alguien.

Con todo ello estoy satisfecho con la estética y por el momento dejaré de cambiar cosas en el blog.  Lo que me da mucha rabia es que muchos de ellos no funcionen dependiendo del navegador use el lector, es muy diferente el aspecto en Explorer y en Chrome, por ahora me quedo con el primero, porque Chrome no hace caso de algunos de los CSS que he instalado.

Boton de enlace en posición relativa

No se si el título de la entrada queda claro.  Me refiero a los botones que he puesto a la derecha de mis blogs, para poder enlazarlos.  La idea me ha surgido porque aunque los tengo relacionados como páginas estáticas de Blogger, al bajar por la página para ver el contenido, se pierde la posibilidad del enlace.  Ya tenía puestas las flechas para ir arriba y abajo de la página, y por lo tanto ha sido muy fácil.

En Edición HTML hay que localizar la etiqueta </body>, y justo delante poner el enlace correspondiente.

<a href='PAGINA A ENLAZAR'><img border='0' src='IMAGEN DEL BOTON' style='position:fixed; bottom:100px; right:0;margin-top: 5px;' title='DESCRIPCION'/></a>

Quedará poner la dirección de la página a enlazar y el icono correspondiente que hayas subido a tu almacén.  En la descripción el texto que queramos que aparezca al pasar el ratón por encima.  He puesto 100 pixeles como distancia relativa a fin de la pantalla, ajústalo a tus necesidades.

Se pueden poner tantos como quieras cambiando la posición relativa para cada icono.

Botón ir arriba y abajo

Con el nuevo diseño de plantillas he optado por añadir los ya tradicionales botones “Arriba” y “Abajo” de forma instantánea.  Antes los usaba con el script Prototype y Scriptaculous, pero aunque el efecto deslizante era bonito, he decidido que sea más práctico.  Así que lo he puesto como acceso directo.

Ha sido un poco complicado porque en la plantilla simple no funcionaba fácilmente.  Pero mis pocos conocimientos de XML me han dado la solución.  Para instalar los botones hay que localizar la etiqueta HTML </body> y justo delante colocar las líneas siguientes:

<a href='#footer-wrapper'><img border='0' src='URL imagen flecha abajo’ style='position:fixed; bottom:0px; right:0;margin-bottom: 5px;' title='Ir abajo'/></a>

<a href='#'><img border='0' src='URL imagen flecha arriba' style='position:fixed; bottom:45px; right:0;margin-top: 5px;' title='Ir arriba'/></a>

Solo tendrías que indicar las URL de las imágenes que hayas guardado en tu almacén (por ejemplo en Google Sites).

El problema me ha sucedido porque en la nueva plantilla no está identificado el footer-wrapper, he tenido que localizar la siguiente línea y añadir lo marcado en color:

<div class='content-cap-bottom cap-bottom' id='footer-wrapper'>

Graba plantilla y ya lo tendremos.

Otra entrada cualquiera (entradas al azar)

Con el fin de que los visitantes se entretengan en tu página, es interesante facilitarles la opción de visitar entradas al azar.  Ya explique como poner un gadget con esta función, pero me ha parecido interesante incluir una frase al final de cada entrada ofreciendo esta posibilidad.

Es imprescindible tener instalado el gadget previamente, porque dentro del mismo está incluido el script que lo hace posible.  Claro que puedes incluirlo y quitarle el botón que lo ejecuta en la sidebar.

Para instalarlo en el pie de cada entrada habrá que entrar en edición de HTML, y con la plantilla de artilugios expandida buscar el codigo <data:post.body/> y justo a continuación incluir las siguientes líneas:

<p>&#191;Vemos <a href='#ramdom' onclick='feelingLucky();' title='Entrada al azar'>otra entrada cualquiera</a> por si te puede interesar?</p>

El resultado queda claro en esta misma entrada.  Esta es una de las brillantes ideas que Oloblogger enseña en su blog.

Etiquetas de pie de página personalizadas

Resulta tan importante para la navegación por el blog el uso de las etiquetas que me ha parecido imprescindible resaltarlas en el pie de página.  Como tantas veces Gem@ Blog ha sido mi referente.  Un pequeño resumen de como lo he conseguido.

Con las plantillas de artilugios expandidas, en el código HTML hay que localizar la etiqueta <data:label.name/> (siempre ayuda mucho usar Ctrl-F). 

<a expr:href='data:label.url' rel='tag'>

<span class='etiquetas'>

<data:label.name/>

</span>

</a>

Justo delante y detrás he añadido las etiquetas que están en color.

Y en la siguiente línea he quitado el separador, la coma que hay entre las etiquetas.

<b:if cond='data:label.isLast != &quot;true&quot;'>  , </b:if>

Luego solo nos quedará añadir el código CSS de acuerdo con el diseño de nuestra página, justo antes de ]]></b:skin>.  Yo he usado el siguiente, sencillo pero más que suficiente:

<!— CSS PARA ETIQUETAS DE PIE DE PAGINA -->
.etiquetas {
font-size:140%;
padding:1px;
color:#FFFFFF;
background:none repeat scroll 0 0 #222222;
}

Como siempre recomiendo encarecidamente poner una línea de comentario para poder identificar siempre lo modificado en la plantilla.

Agrega tu comentario

En la página principal, en el pie de cada entrada Blogger enseña el número de comentarios que tiene ese post.  Siempre me ha parecido muy poco estético.  Ya hace tanto tiempo cambié esto que ni recuerdo donde lo encontré, pero en su lugar instalé otras frases para hacerlo más agradable:

En Blogger original:	En mi blog:
0 Comentarios	AGREGA TU COMENTARIO
1 Comentarios	UN COMENTARIO, AÑADE EL TUYO
N Comentarios	N COMENTARIOS, AÑADE EL TUYO

Con las plantillas de artilugios expandidas, en el código HTML de la página hay que localizar la etiqueta <span class='post-comment-link'> y sustituir la parte coloreada por lo que esté en su lugar:

<h4><span class='post-comment-link'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:post.allowComments'>

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

<b:if cond='data:post.numComments == 0'>AGREGA TU COMENTARIO.</b:if>
<b:if cond='data:post.numComments == 1'>UN COMENTARIO, AÑADE EL TUYO.</b:if>
<b:if cond='data:post.numComments &gt; 1'> <data:post.numComments/> COMENTARIOS, AÑADE EL TUYO.</b:if>

</a>
</b:if>

</b:if>

</span></h4>

También he añadido delante de <span class=… la etiqueta <h4> para realzarlo más, y logicamente </h4> después de </span>.

Guardar la plantilla y listo.

Páginas de contenido e índice automáticos

El objetivo a conseguir con estos últimos cambios en el diseño de mis blogs era usar las páginas estáticas, especialmente para incorporar una con el resumen del contenido, al estilo que usa Gem@ Blog en su página y que ella llama ‘entradas resumidas con miniatura y paginación’. 

Otra página estática con el índice automático complementa las posibilidades de búsqueda para poder renunciar al estilo de sumarios automáticos, para que se vean directamente las entradas en la página principal.

No veo la necesidad de reproducir las indicaciones de Gem@ para implementar esto, solo me queda agradecerle su ayuda a todos los blogueros.  También he consultado la página de Vagabundia con este mismo objetivo.  Solo me quedó personalizar el CSS para adaptarlo a mi diseño.  Gracias a ambos.

Primeros pasos para limpiar el diseño estándar de Blogger

Hay varios pasos que hago siempre para quitar cosas que me molestan en el diseño de Blogger.  No me gustan algunas de las separaciones y otros complementos que están entre todas las plantillas estándar del blog.  He aprovechado para actualizar todas estas antiguas entradas con los cambios para las nuevas plantillas de Blogger.  Manos a la obra (es fácil puesto esto resulta una recopilación de entradas que ya hice hace tiempo).

Eliminar líneas de puntos entre los elementos del blog

Quitar el mensaje “Suscribirse a: Entradas (Atom)”

Ocultar la barra de navegación de Blogger (Navbar)

Ocultar el mensaje “Mostrar todas las entradas …”

Cambiar título de la entrada en la barra del navegador

Imágenes en enlaces Entradas anteriores, Inicio, … (sección Pager)

Modificar aspecto de los títulos de la sidebar

Efecto visual de botón pulsado (Pushbutton)

Barra de proceso de carga

Añadir Favicon personalizado (no se muy bien porque no funcionaba, lo tengo puesto en diseño de plantilla, pero he tenido que incluir el código a mano)

Incluir Meta Tags para aumentar el tráfico

Por supuesto he reorganizado la posición de los gadgets, y de momento solo me falla el traductor de Google, el resto de los elementos no he tenido que tocarlos ya que solo he hecho un cambio de plantilla.

Como una de las ideas que me han llevado a estos cambios es hacer una página ‘Resumen de Contenido con imágenes en miniatura’ he cambiado el número de entradas de la página principal a tres para que no sea demasiado larga.  Quien lo necesite podrá usar el mencionado resumen o el ‘índice automático’ que hasta ahora está en la sidebar.

Día 11 / 11 / 11 comienzo con cambios en el diseño

El día ONCE del mes ONCE del año ONCE ha sido un largo día de trabajo esperando el sorteo de la ONCE (Organización Nacional de Ciegos de España).  La idea de poderme jubilar ya, se me hacía muy apetitosa … pero la diosa de la Fortuna no me tiene entre sus favoritos.

También ha sido el día en que he leído el correo que 20minutos anuncia la puesta en marcha del concurso Premios 20 Blogs.  Y como la ilusión de jubilarme se ha ido al traste he decidido distraer mi mente calenturienta participando dignamente en el concurso de los blogs, que el año pasado me sirvió para darme a conocer entre los internautas.

Viendo mis blogs un tanto sobrecargados, me parece que está todo demasiado amontonado, … he decidido adecentarlos un poco para participar en el concurso de la Blogoteca.   La idea principal es hacerlos menos densos y aprovechar la opción ‘páginas’ que Blogger instauró hace un tiempo y yo no he puesto en marcha todavía.

Así que durante un tiempo estaremos en obras.  Presento de antemano mis disculpas a los usuarios habituales.  Espero no tardar mucho en concluir los cambios, y como siempre anotaré con sumo cuidado como lo he hecho todo, no solo para que no se me vaya a olvidar, sino para que todos los lectores sepan como se hace.  Explicaré cada paso en las siguientes entradas.

Lo primero y fundamental es hacer una copia de seguridad de la página tal como está ahora … por si acaso la liamos:

1. En el escritorio de Blogger seleccionamos el blog y a la derecha de la pantalla con la opción ‘Plantilla’ hay un botón para ello: ‘Crear copia de seguridad/Restablecer’.  Pulsar el botón ‘Descargar plantilla completa’  y seguir las instrucciones.
2. No es que esté obsesionado por guardar bien mis cosas, pero hago también una copia completa con un editor de textos como Wordpad o Bloc de Notas entrando por ‘Plantilla’, ‘Edición de HTML’, seleccionando ‘Expandir plantillas de artilugios’, selecciono todo el código, y a Copiar/Pegar en el documento txt.

Después de estas imprescindibles medidas de seguridad empezamos a trabajar de verdad. 

En ‘Plantilla’, hay que pulsar el botón ‘Personalizar’  para entrar en el Diseñador de plantillas de Blogger.  Como se trata de empezar con algo muy simple he optado por la plantilla ‘Sencillo’, da igual la combinación de colores, porque luego ya la personalizaré a mi gusto.  Para la distribución del diseño he elegido las siguientes opciones: los gadgets a la derecha con una y dos columnas, y el pie de página doble.  Creo que así tendré todas las opciones de organización posibles.

 

Ya solo queda ‘Aplicar al blog’ para poder empezar a personalizarlo todo.  Pero esto … es otra historia que comentaré en las siguientes entradas.

Cambios con el Diseñador de Plantillas

He elegido la plantilla Fantastico S.A. con fondo blanco, y le he puesto la imagen de fondo personal que he usado siempre.

Como diseño del cuerpo del blog he usado el que tiene dos sidebar, una a cada lado, similar a la que tenía hasta ahora.  Para el diseño de pie de página elegí el que tiene dos gadgets.

Ajustar el ancho ha sido más complicado.  El blog completo al máximo, la sidebar izquierda con 200 píxeles y la derecha la dejé en 170 px.  Aún así las medidas no son las que necesitaría, hay demasiada separación entre la sidebar y el cuerpo para las entradas y algunos gadgets se me salen del cuadrado que se les asigna.  No puedo reducir más el cuerpo porque uso a menudo fotografías con 600 px de ancho, pero no queda demasiado mal.  Hubiese quedado mejor si se pudiera eliminar el biselado de los gadgets, pero no he sido capaz (seguiremos intentándolo).

En la etiqueta Avanzado he elegido siempre el tipo de fuente Verdana y he dejado trasparente todos los colores de fondo. 

Los colores los he elegido similares a los que he usado siempre:

Color del texto	#222222
Color del enlace y del enlace visitado	#251a9c
Color del enlace cuando se coloca el ratón sobre él	#990000
Color del título, descripción del blog y texto pestaña	#990000
Fondo de la pestaña y color del borde	#666666
Cabecera de la fecha y color del borde	#444444
Titulo de entrada y de gadgets	#990000
Biselado del fondo de la entrada	#666666
Texto del gadget, alternar color, feed y pie de página	#444444

Otros cambios que ya tenía instalados y he tenido que implementar de nuevo en el diseño HTML son los siguientes:

• Script para la barra de carga 
• Script para el efecto de botón pulsado
• Entradas relacionadas
• Imágenes en la sección Pager
• Sumarios automáticos
• Titulo de la entrada en la barra del navegador
• Ocultar la barra de Navbar

Luego solo ha quedado reorganizar los gadgets, sobre todo porque como no he puesto el menú con buscador que había puesto en la plantilla antigua, he dividido la cabecera en dos para poner el buscador, como siempre con la ayuda del Escaparate de Rosa.

También he reinstalado y mejorado las flechas en el blog para ir a la parte superior del mismo y bajar a la parte inferior, con un suave efecto deslizante usando Scriptaculous.  Antes solo la tenía en una dirección y ahora funciona en ambas.

Diseñador de plantillas de Blogger

Después de haber trabajado tanto para llegar a el diseño de una plantilla personalizada, resulta que Blogger ha implantado muchas de las mejoras conseguidas por todos los blogueros, con muchas horas de programación HTML.  Como dice el refrán, si no puedes con tu enemigo, únete a el.

Aunque se pueden seguir usando sin problemas las plantillas antiguas, creo que ha llegado el momento de implementar las nuevas.  Se están extendiendo como la espuma, y por lo tanto, las mejoras y nuevos witgets estarán pronto solo diseñados para los nuevos estándares de Blogger.  Por lo tanto voy a cambiar de plantilla en los próximos días.  Siento las molestias que pueda causar, y espero que os guste el nuevo diseño.  He pensado en la sencillez y la elegancia como objetivo, añadiendo el estilo personal para mantener una identidad propia en el blog.  Prometo comentar las posibilidades del Diseñador de Plantillas.

Seguir, gadget Followers

Acabo de añadir este gadget en mis blog.  Con el claro propósito de aumentar las visitas o para decirlo de otra manera, llegar de una forma más sencilla a mucha más gente.

Estaba disponible desde 2008, cuando empecé con Blogger, pero no acababa de ver clara su utilidad, me pareció más operativo facilitar la suscripción por email.  Hace poco tiempo Google ha añadido a esta aplicación la conexión con Friends Connect.  Por lo tanto, un lector que se suscriba con Seguidores está mostrando tus entradas a toda su red de amigos.  Empieza a ser interesante.

Además de facilitarles la tarea a los lectores que usen alguno de los Readers con perfil en Google, Yahoo, AOL o  OpenID, estás mostrando la calidad de tu blog.  Si tienes muchos suscriptores significa claramente que tus entradas son interesantes, y tientas a que se añadan más.

La instalación no merece más comentarios, porque es un gadget estándar donde los haya.  Espero que funcione y pronto tenga muchos más visitantes que lean mis entradas. 

Entradas relacionadas

Otra de las posibilidades para que los visitantes estén más tiempo viendo tus entradas, es añadir al acabar cada una otras que tengan una cierta relación.  Parece ser que Vagabundia es el creador de esta idea, que lógicamente se ha extendido como la pólvora por los bloggeros.

Entraremos en Diseño, Edición de HTML y expandiremos plantillas de artilugios.  A continuación localizar la línea ]]></b:skin>, con Crtl-F, y antes de ningún script copiaremos justo debajo el código siguiente:

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 3) {
break;
}
}
document.write('</ul>');
}
//]]>
</script>

Ahora buscaremos el siguiente párrafo y insertaremos el código de color rojo.

<b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"'
type='text/javascript'/>
</b:if>
</b:loop>

Solo nos quedara localizar el código del pie de entrada.  Suele ser así, pero depende si has instalado otros accesorios allí:

<p class='post-footer-line post-footer-line-3'/>

o

<div class='post-footer-line post-footer-line-3'>

…

</div>

Añadiremos a continuación el listado de las entradas relacionadas:

<div class='post-footer-line post-footer-line-4'>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div>

Desde vista previa no se puede comprobar, porque saldrá únicamente al pie de una entrada individual, así que se debe guardar la plantilla y listo. No hay que olvidar que esto funcionará exclusivamente si usamos etiquetas en nuestras entradas.

Indice automático

En uno de mis blogs ya tenía tantas etiquetas como para resultar antiestético.  Por eso he seleccionado unas pocas etiquetas en lugar de mostrarlas todas.  Esto se puede hacer en Diseño, editar el gadget Etiquetas.

Pero entonces ¿como mostrar todas las etiquetas que hay en todas las entradas?  Es muy importante facilitar la navegación.  La solución ha venido de la mano de Oloblogger.  He creado un índice automático y lo he ajustado al estilo de mis páginas.

Para no retardar la carga de la página he incrustado esta opción en una entrada con fecha muy antigua.  Así solo si lo vas a  usar esperas el tiempo que le cueste crear los índices. En edición de HTML de la entrada copiar el código siguiente:

* Pincha en las cabeceras de las columnas para ordenar (ascendente/descendente).
* Elije cualquier etiqueta para filtrar por esa categoría en concreto.
* Pasando el puntero por encima del título de un post, te aparecerá un sumario de su contenido.
*Pincha en la entrada que te interese para acceder directamente a ella.
<table align="center"><tbody>
<tr><td><div id="toc">
</div>
<div id="toclink">
<a href="javascript:showToc();" id="imgTocLink">DESPLEGAR EL INDICE INTERACTIVO DE ENTRADAS</a></div>
<script src="TuALOJAMIENTO/blogtoc_esp.js">
</script>
<script src="http://TuBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=500&amp;callback=loadtoc">
</script>
<script src="http://TuBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=501&amp;max-results=500&amp;callback=loadtoc">
</script></td></tr>
</tbody></table>

No hay que olvidar cambiar TuBLOG y TuALOJAMIENTO por lo que corresponda y subir el fichero blogtoc_esp.js a tu almacén.

Ahora vamos a guardar el formato CSS correspondiente.  En Diseño, Edición de HTML, copiar el siguiente código entre las etiquetas <head> y </head>.

<!-- INDICE AUTOMATICO -->
<style type='text/css'>
#toc { 
border: 0px solid #000000; 
background: #ffffff; 
padding: 5px; 
width:600px; 
margin-top:10px;}
.toc-header-col1,
.toc-header-col2,
.toc-header-col3 { 
background: #ffd595; 
color: #000000; 
padding-left: 5px; 
width:275px;}
.toc-header-col2 { 
width:75px;}
.toc-header-col3 { 
width:200px;}
.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:90%; 
text-decoration:none;}
.toc-header-col1 a:hover,
.toc-header-col2 a:hover,
.toc-header-col3 a:hover { 
font-size:90%; 
text-decoration:underline;}
.toc-entry-col1,
.toc-entry-col2,
.toc-entry-col3 { 
padding-left: 5px; 
font-size:90%;}
</style>

Luego lo puedes ajustar a tu diseño de página.  Lo he basado en el que hay en Beatiful Beta.

Por último tienes que poner en la página principal un enlace directo a esta entrada.  Yo he elegido un botón input en combinación con otros que ya tenía.

<a href="http://TuBLOG.blogspot.com/TuEntradaINDICE.html" onclick="location='http://TuBLOG.blogspot.com/TuEntradaINDICE.html'" title="Indice interactivo de entradas"><input value="Indice de entradas" name="btnI" type="submit" /></a>

Todo listo para funcionar.

Wysiwyg

WYSIWYG es el acrónimo de What You See Is What You Get (en inglés, "lo que ves es lo que obtienes"). Se aplica a los procesadores de texto y otros editores de texto con formato (como los editores de HTML) que permiten escribir un documento viendo directamente el resultado final, frecuentemente el resultado impreso. Se dice en contraposición a otros procesadores de texto, hoy en día poco frecuentes, en los que se escribía sobre una vista que no mostraba el formato del texto, hasta la impresión del documento. En el caso de editores de HTML este concepto se aplica a los que permiten escribir la página sobre una vista preliminar similar a la de un procesador de textos, ocupándose en este caso el programa de generar el código fuente en HTML.

Esta es la definición, pero es mucho más, es una empresa de diseño de páginas web, y por lo tanto tienen una de las mejores y más divertidas (versión anterior) que he visto nunca. Una verdadera joya del diseño.