En el Blogger, vete a la pestaña de "Diseño" y, en ésta, pincha en la opción "Edición de HTML". No es necesario Expandir plantillas de artilugios, es decir, no es necesario marcar esta opción.
Seguidamente se agrega el siguiente código tras <head> (está casi al principio):
<script>
function mOvr(src,clrOver) {
if (!src.contains(event.fromElement)) {
src.style.cursor = 'hand';
src.bgColor = clrOver;
}
}
function mOut(src,clrIn) {
if (!src.contains(event.toElement)) {
src.style.cursor = 'default';
src.bgColor = clrIn;
}
}
function mClk(src) {
if(event.srcElement.tagName=='TD'){
src.children.tags('A')[0].click();
}
}
</script>
function mOvr(src,clrOver) {
if (!src.contains(event.fromElement)) {
src.style.cursor = 'hand';
src.bgColor = clrOver;
}
}
function mOut(src,clrIn) {
if (!src.contains(event.toElement)) {
src.style.cursor = 'default';
src.bgColor = clrIn;
}
}
function mClk(src) {
if(event.srcElement.tagName=='TD'){
src.children.tags('A')[0].click();
}
}
</script>
A continuación en la pestaña de "Diseño" del Blogger vete a "Elementos de la página" y añade un nuevo gadget del tipo "HTML/Javascript" en el que pondrás tu menú. Dale un título a ese gadget (p.ej. Índice) e introduce el siguiente código en el contenido:
<table>
<tr>
<td onclick="mClk(this);" onmouseout="mOut(this,'#498aa8');" onmouseover="mOvr(this,'#f18b59');" vAlign="center" width="171" style="border-bottom: 1px solid rgb(0,0,0); padding-left: 6; padding-top: 1; padding-bottom: 1" bgcolor="#475B70" height="12"><a style="COLOR: rgb(255,255,255); TEXT-DECORATION: none" href="../../index.html"><font face="Verdana" size="1">Esta web</font></a></td>
</tr>
<tr>
<td onclick="mClk(this);" onmouseout="mOut(this,'#498aa8');" onmouseover="mOvr(this,'#f18b59');" vAlign="center" width="171" style="border-bottom: 1px solid rgb(0,0,0); padding-left: 6; padding-top: 1; padding-bottom: 1" bgcolor="#475B70" height="1"><a style="COLOR: rgb(255,255,255); TEXT-DECORATION: none" href="../../index.html"><font face="Verdana" size="1">Mi pagina </font></a></td>
</tr>
<tr>
<td onclick="mClk(this);" onmouseout="mOut(this,'#498aa8');" onmouseover="mOvr(this,'#f18b59');" vAlign="center" width="171" style="border-bottom: 1px solid rgb(0,0,0); padding-left: 6; padding-top: 1; padding-bottom: 1" bgcolor="#475B70" height="1"><a style="COLOR: rgb(255,255,255); TEXT-DECORATION: none" href="../../index.html"><font face="Verdana" size="1">Mi web</font></a></td>
</tr>
</table>
Si te fijas, cada <tr>...</tr> es una línea de tabla referido a un enlace distinto, que puedes configurar cambiando la dirección, poniéndola dentro de la etiqueta "<a ... href="..."> e indicando a continuación el nombre que debe salir en el índice. Y, lógicamente, se pueden añadir cuantas líneas de enlace se quieran. Así como cambiar los colores y algunas cosas más.
El ejemplo que yo he puesto aquí, a la derecha, lo he extraído de http://www.creatupropiaweb.com/codigos/Mas_Codigos.htm, a quienes les agradezco su esfuerzo y ayuda.
Con cosas como éstas, podemos convertir un blog casi en una verdadera página web, en la que los distintos artículos puedan ser buscados por el sistema de índice más fácilmente que por el de cuaderno de bitácora, que tiene una estructura histórica (por fechas de entrada), y no lógica, o temática. Para facilitar esta tarea, hay por internet scripts en Javascript de menús despleglables, que, dada la estructura inicial de las plantillas de Blogger, permiten fabricar índices más completos, funcionales y estéticos. Esta será mi próxima tarea de búsqueda y, en cuanto encuentre "la respuesta", procuraré publicarla.
Con cosas como éstas, podemos convertir un blog casi en una verdadera página web, en la que los distintos artículos puedan ser buscados por el sistema de índice más fácilmente que por el de cuaderno de bitácora, que tiene una estructura histórica (por fechas de entrada), y no lógica, o temática. Para facilitar esta tarea, hay por internet scripts en Javascript de menús despleglables, que, dada la estructura inicial de las plantillas de Blogger, permiten fabricar índices más completos, funcionales y estéticos. Esta será mi próxima tarea de búsqueda y, en cuanto encuentre "la respuesta", procuraré publicarla.
No hay comentarios:
Publicar un comentario