Después de explicar como aplicar en el blog la forma de mostrar las entradas en expandible, tanto en las páginas de etiquetas como en la página principal del blog,
algunas os habéis interesado por la forma de mostrar al expandir los
títulos, además de la entrada completa, también el post-footer.
Antes de nada os recomiendo encarecidamente que guardeis una copia de vuestra plantilla en el PC, pues podrían complicarse las cosas si por error colocamos el código en mal lugar.
Antes de nada os recomiendo encarecidamente que guardeis una copia de vuestra plantilla en el PC, pues podrían complicarse las cosas si por error colocamos el código en mal lugar.
Como consigo que al pinchar sobre una de mis pestañas, se vea solamente
la lista del título de las entradas y que una vez se pinche sobre uno de
los títulos, este se expanda para mostrar la entrada completa.
Para poder hacer esto, antes es imprescindible tener etiquetados nuestros posts, si no sabéis como hacerlo, podéis consultar en esta entrada anterior como etiquetar vuestras entradas.
[1] Nos descargamos el script que necesitamos para hacer funcionar el efecto, lo descomprimimos y lo subimos a un alojamiento adecuado para obtener su url.
[2] Vamos a Edición de HTML de nuestro panel y marcamos la opción "Expandir las plantillas de artilugios" colocamos la url del script en este código y de esta manera que veis, antes de </head>:
Algunas visitas me han comentado que su código no es igual al del truco y que no han podido hacerlo. La diferencia, en casi todos los casos, estaba en que no habían ocultado o eliminado la tabla que sale en las páginas de etiquetas y que dice algo así como "ver más entradas con esta etiqueta". El código de esa tabla es este:
Para poder hacer esto, antes es imprescindible tener etiquetados nuestros posts, si no sabéis como hacerlo, podéis consultar en esta entrada anterior como etiquetar vuestras entradas.
[1] Nos descargamos el script que necesitamos para hacer funcionar el efecto, lo descomprimimos y lo subimos a un alojamiento adecuado para obtener su url.
[2] Vamos a Edición de HTML de nuestro panel y marcamos la opción "Expandir las plantillas de artilugios" colocamos la url del script en este código y de esta manera que veis, antes de </head>:
<script type='text/javascript'>[3] Buscamos la parte de este código que se encuentra escrito en color negro, y añadimos la parte del código que está escrita en rojo, colocada tal cual lo veis aquí:
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
</script>
<script src="URL_DEL_SCRIPT" type="text/javascript">
</script>
<b:includable id='PeekABooPost' var='post'><div class='post uncustomized-post-template'><table><tr><td width='40px'><a expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'>[+/-]</a></td><td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table><div class='post-body' expr:id='data:post.id' style='display:none'><p><data:post.body/></p><div style='clear: both;'/> <!-- clear for photos floats --></div></div></b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType != "item"'><b:include data='post' name='PeekABooPost'/><b:else/><b:include data='post' name='post'/></b:if><b:else/><b:include data='post' name='post'/></b:if><b:else/>
<b:include data='post' name='post'/>
</b:if>
Algunas visitas me han comentado que su código no es igual al del truco y que no han podido hacerlo. La diferencia, en casi todos los casos, estaba en que no habían ocultado o eliminado la tabla que sale en las páginas de etiquetas y que dice algo así como "ver más entradas con esta etiqueta". El código de esa tabla es este:
La solución, sino queréis quitar u ocultar esa tabla, es colocar el código para los post expandibles, ignorando esa parte, es decir, cuando llegamos a ella, seguimos hacia abajo buscando la parte que necesitamos para colocar el código, y listo.<b:include data='top' name='status-message'/>
<data:adStart/>
El formulario funciona perfectamente y las respuestas se guardan en una hoja de cálculo dentro de los documentos de Google.
El problema importante es que, si no hacemos nada más, no nos enteramos
cuando alguien nos ha enviado un mensaje empleando este formulario.
Se trata sencillamente de que el contenido del formulario se nos haga llegar a nuestra dirección de correo.
Una vez creado nuestro formulario, vamos a la hoja de cálculo en nuestros Docs de Google y elegimos la opción Insertar > Secuencia de comandos
En el siguiente panel escribimos Contact Us en la caja de búsquedas y pulsamos el botón Search (Buscar):
El sistema nos encontrará el Contact Us Form Mailer. Pulsamos el botón Install:
Aparecerá un mensaje de error que ignoramos completamente:
Pulsamos en Cerrar:
Ahora nos vamos a editar nuestra secuencia de comandos.
Pulsamos en Herramientas > Editor de secuencia de comandos:
Nos aparecerá el código del comando (clic sobre la imagen para verla a mayor tamaño):
El cambio necesario y el únicamente imprescindible es colocar la dirección de correo electrónico a la que queremos que llegue el formulario en la línea 6.
Quedaría así:
Luego podemos modificar el texto de las líneas 11 y 12 por un mensaje personalizado.
Cambiamos la cadena "sent the following message" por el texto que nos parezca más oportuno:
La línea 14 la podemos seleccionar y borrar completamente:
Y en la línea 15 (ahora será la nueva línea 14) borramos +bodyHTML3 porque hace referencia al comando de la línea que acabamos de borrar.
Finalmente en la nueva línea 15 cambiamos el Contact Us Form por el texto que nos parezca:
Guardamos con Archivo > Guardar
Nos queda todavía activar el comando.
Vamos a Activadores > Activadores de la secuencia de comandos actual:
Pulsamos en No triggers set up...
Y, en el tercer desplegable elegimos la opción On form submit:
Ya sólo queda aceptar el siguiente mensaje:
Para colocar nuestro formulario en un blog o página web, vamos al formulario y elegimos la opción Formulario > Insertar formulario en una página web:
Copiamos el código que nos aparece en la siguiente ventana emergente:
Y lo pegamos en el punto en el que queramos colocarlo.
Una vez creado nuestro formulario, vamos a la hoja de cálculo en nuestros Docs de Google y elegimos la opción Insertar > Secuencia de comandos
En el siguiente panel escribimos Contact Us en la caja de búsquedas y pulsamos el botón Search (Buscar):
El sistema nos encontrará el Contact Us Form Mailer. Pulsamos el botón Install:
Aparecerá un mensaje de error que ignoramos completamente:
Pulsamos en Cerrar:
Ahora nos vamos a editar nuestra secuencia de comandos.
Pulsamos en Herramientas > Editor de secuencia de comandos:
Nos aparecerá el código del comando (clic sobre la imagen para verla a mayor tamaño):
El cambio necesario y el únicamente imprescindible es colocar la dirección de correo electrónico a la que queremos que llegue el formulario en la línea 6.
Quedaría así:
Luego podemos modificar el texto de las líneas 11 y 12 por un mensaje personalizado.
Cambiamos la cadena "sent the following message" por el texto que nos parezca más oportuno:
La línea 14 la podemos seleccionar y borrar completamente:
Y en la línea 15 (ahora será la nueva línea 14) borramos +bodyHTML3 porque hace referencia al comando de la línea que acabamos de borrar.
Finalmente en la nueva línea 15 cambiamos el Contact Us Form por el texto que nos parezca:
Guardamos con Archivo > Guardar
Nos queda todavía activar el comando.
Vamos a Activadores > Activadores de la secuencia de comandos actual:
Pulsamos en No triggers set up...
Y, en el tercer desplegable elegimos la opción On form submit:
Ya sólo queda aceptar el siguiente mensaje:
Para colocar nuestro formulario en un blog o página web, vamos al formulario y elegimos la opción Formulario > Insertar formulario en una página web:
Copiamos el código que nos aparece en la siguiente ventana emergente:
Y lo pegamos en el punto en el que queramos colocarlo.
Blogger no ofrece la posibilidad de incorporar un formulario de contacto de forma automática.
Tendremos que buscar formas de hacerlo de manera más o menos manual.
Una de las opciones más sencillas es crearlo con Google Docs.
Como ya somos usuarios de Gmail, lo tenemos muy fácil.
Simplemente accedemos al panel de Google Docs desde nuestra cuenta de Gmail (por ejemplo):
Una vez en Google Docs pulsamos en Crear nuevo > Formulario
Y vamos completando los campos que queremos que aparezcan empezando por el título y subtítulo o mensaje introductorio. De entrada tenemos dos preguntas prediseñadas que podemos editar. Pulsamos en Finalizado cuando lo hayamos acabado:
Si queremos introducir nuevos campos pulsamos el botón Añadir elemento:
Hemos añadido un texto más largo (texto de párrafo):
Podemos también hacer que los campos sean o no obligatorios.
Cuando lo tengamos le damos a Guardar.
Google pone a nuestra disposición un montón de diseños preconfigurados. Por defecto viene el Plain.
Pulsando sobre el botón Tema: Plain se acceden al resto de los temas.
Vamos pulsando sobre cada uno de ellos y, si nos gusta, hacemos clic en Aplicar
Para colocarlo en el blog, pulsamos en Más acciones > Insertar
Nos aparecerá una ventana emergente con el código a colocar (un iframe):
Copiamos el código y lo pegamos en una página estática del blog (por ejemplo).
Para leer las consultas recibidas, iremos por Gmail > Docs. Allí veremos nuestro formulario:
Haciendo clic sobre el nombre, veremos la hoja de cálculo en la que se guardan los mensajes recibidos:
Para volver a modificar nuestro formulario le damos a Formulario > Modificar formulario:
Simplemente accedemos al panel de Google Docs desde nuestra cuenta de Gmail (por ejemplo):
Una vez en Google Docs pulsamos en Crear nuevo > Formulario
Y vamos completando los campos que queremos que aparezcan empezando por el título y subtítulo o mensaje introductorio. De entrada tenemos dos preguntas prediseñadas que podemos editar. Pulsamos en Finalizado cuando lo hayamos acabado:
Si queremos introducir nuevos campos pulsamos el botón Añadir elemento:
Hemos añadido un texto más largo (texto de párrafo):
Podemos también hacer que los campos sean o no obligatorios.
Cuando lo tengamos le damos a Guardar.
Google pone a nuestra disposición un montón de diseños preconfigurados. Por defecto viene el Plain.
Pulsando sobre el botón Tema: Plain se acceden al resto de los temas.
Vamos pulsando sobre cada uno de ellos y, si nos gusta, hacemos clic en Aplicar
Para colocarlo en el blog, pulsamos en Más acciones > Insertar
Nos aparecerá una ventana emergente con el código a colocar (un iframe):
Copiamos el código y lo pegamos en una página estática del blog (por ejemplo).
Para leer las consultas recibidas, iremos por Gmail > Docs. Allí veremos nuestro formulario:
Haciendo clic sobre el nombre, veremos la hoja de cálculo en la que se guardan los mensajes recibidos:
Para volver a modificar nuestro formulario le damos a Formulario > Modificar formulario:
Poner etiquetas a nuestros posts es bastante sencillo:
Cada vez que escribimos una nueva entrada, vemos debajo del editor de
texto un apartado de "Opciones de entrada" y destacado en negrita
"Etiquetas de esta entrada", es justo ahí, donde pondremos nuestras
etiquetas. Puede ser una sola o varias, siempre separadas por comas. Si
ya has etiquetado algún posts anteriormente, tienes la opción de
"Mostrar todo" para escoger una de las etiquetas existentes con solo
hacer click sobre ella.
Para etiquetar los pots antiguos, hemos de usar el "Editar entradas" y
una vez allí, en "Acciones de etiquetas" podremos ir seleccionando las
entradas y añadiendo etiquetas, es un poco "labor de chinos" sobre todo
si tenemos muchas entradas en el blog, pero todo es ponerse con ánimo...
Una vez etiquetadas las entradas, podemos mostrar las etiquetas en el
pie de cada post, para ello vamos a: Plantilla - Entradas del blog -
Editar y seleccionamos el cuadradito con la opción "etiquetas".
Guardamos cambios y listo.
También podemos mostrar nuestras etiquetas en la sidebar, de forma que
facilitemos la navegación en nuestro blog a las visitas, como si de un
sencillo menú de contenidos se tratara. Para ello nos situamos en
Plantilla - añadir nuevo elemento y seleccionamos la opción "etiquetas"
que después arrastraremos a la parte de la sidebar que mejor nos
parezca.
Cada vez que escribimos una nueva entrada, vemos debajo del editor de
texto un apartado de "Opciones de entrada" y destacado en negrita
"Etiquetas de esta entrada", es justo ahí, donde pondremos nuestras
etiquetas. Puede ser una sola o varias, siempre separadas por comas. Si
ya has etiquetado algún posts anteriormente, tienes la opción de
"Mostrar todo" para escoger una de las etiquetas existentes con solo
hacer click sobre ella.
Para etiquetar los pots antiguos, hemos de usar el "Editar entradas" y
una vez allí, en "Acciones de etiquetas" podremos ir seleccionando las
entradas y añadiendo etiquetas, es un poco "labor de chinos" sobre todo
si tenemos muchas entradas en el blog, pero todo es ponerse con ánimo...
Una vez etiquetadas las entradas, podemos mostrar las etiquetas en el
pie de cada post, para ello vamos a: Plantilla - Entradas del blog -
Editar y seleccionamos el cuadradito con la opción "etiquetas".
Guardamos cambios y listo.
También podemos mostrar nuestras etiquetas en la sidebar, de forma que
facilitemos la navegación en nuestro blog a las visitas, como si de un
sencillo menú de contenidos se tratara. Para ello nos situamos en
Plantilla - añadir nuevo elemento y seleccionamos la opción "etiquetas"
que después arrastraremos a la parte de la sidebar que mejor nos
parezca.
Un sitio interactivo donde figuran los recorridos de los colectivos en un mapa, sin la necesidad de andar adivinando las calles que no conocemos para saber por donde pasa:
De la misma manera que la inducción del flujo magnético satura a llegar a determinados alto niveles del campo magnético... me encuentro en el codo de dicha curva....
Es hora de perder el tiempo o buscar la forma de aprovecharlo?
Antes de empezar has de tener etiquetados todos tus post sino es imposible que puedas colocar las pestañas.
1- Vamos a la Plantilla en Edicion de Html y Expandimos las plantillas de artilugios.
2- Buscamos este trozo de código: <b:section class="header" id="header" maxwidgets="1" showaddelement="no"> y lo cambiamos por este otro:
<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">
3-Justo antes de: ]]></b:skin> colocamos este codigo completo:
/*- Menu Tabs F */
#tabsF {
float:left;
width:100%;
font-size:80%;
line-height:normal;
border-bottom:1px solid #000;
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("http://3.bp.blogspot.com/_8PJ-pgoBhWQ/Sf9qIJ35QkI/AAAAAAAAGxQ/t48-cC0Ogkk/s400/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url("http://1.bp.blogspot.com/_8PJ-pgoBhWQ/Sf9qMJVnJmI/AAAAAAAAGxY/K6ntns2CUvI/s400/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}
4- Guardamos cambios.
En este momento añadimos las etiquetas al blog.
Nos dirigimos a la Plantilla--Elementos de la pagina--Añadir nuevo elemento de pagina, y añadimos las Etiquetas.
5- Por ultimo buscamos el siguiente codigo:
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title><h2>
<b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
lo cambiamos por:
<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>
6- ¡Ya está listo! Si todo ha ido bien, las pestañas deberían estar situadas en el sidebar de nuestro blog, solo queda moverlas a la parte superior arrastrándolas hacia allí.
Si os apetece probar con otros modelos, podéis verlos en exploding boy, pinchando sobre ellos en esa misma página con el botón derecho, escoges "ver código fuente" y tendrás el código CSS para cada uno de los menús del ejemplo.
Rosa in memoriam
Suscribirse a:
Entradas (Atom)
