Una de las dificultades a las que nos enfrentamos los usuarios de blogger o sistemas de blogs similares, es que no podemos crear un formulario mediante el cual los usuarios de nuestra página puedan ponerse en contacto con nosotros, debiendo en muchos casos recurrir a gadgets que dejan de dar servicio –como ha sido mi caso- o incurriendo en el error de hacer público un mail de contacto –que después podrá ser recogido y empleado por spammers.
Para solucionar estos problemas e incluir en nuestro blog la posibilidad de contactar con nosotros y que dicho contacto se nos notifique a una cuenta de correo electrónico podemos hacer uso de los formularios de google doc, tal y cómo he hecho yo en mi actual página de contacto. A partir de su creación se os notificará por e-mail cada contacto y se irán almacenando en una hoja de cálculo de google docs, de modo que podréis guardar un registro de todos los envíos.
Os copio a continuación la entrada que he usado como referencia para crearla:
Primero: Debes estar registrado en Google Docs, si dispones de una cuenta Google no tendrás más que iniciar sesión, caso contrario puedes darte de alta desde este enlace. A esta cuenta de Google es adonde te llegarán los mensajes enviados mediante tu formulario de contacto.
Segundo: Luego de iniciar sesión en Google Docs, lo siguiente será seleccionar en el menú la opción: Create New/ Form.
Tercero: Ahora tendremos la plantilla de nuestro formulario. Aqui podemos ir llenando los campos que deseemos, además de poder configurarlo para hacer que algunos campos sean obligatorios o de un tipo determinado (tipo texto, multi-alternativa, de una lista, etc.).
Las preguntas pueden ser duplicadas, editadas y borradas. Una vez terminado el formulario deberíamos guardarlo desde el menú derecha More actions/Save.
Cuarto: Ahora necesitamos el código HTML. Para ello solo debemos ir al menú superior More actions/Embed.
Automáticamente se guardará el formulario y obtendremos un código que deberemos insertar en la entrada de nuestro blog (en modo de edición HTML).
Quinto: Ya lo tenemos casi listo nuestro formulario, el cual aparece ahora en el listado de nuestros documentos.
Ahora definiremos las reglas de notificación. Para esto hacemos clic sobre el documento que nos aparece en el listado. Veremos que se abre un documento con formato Excel. No tocamos nada en él y vamos directo a la opción superior derecha del menú: Share/Set Notifications Rules.
Sexto: Aqui dejamos las opciones marcadas tal y como se muestran en la imagen siguiente: Para que nos llegue una notificación cuando el formulario sea enviado y lo hagan de manera independiente, no en modo resumen.
Clic en Save. Luego en la ventana de confirmación que nos aparecerá le haremos clic enDone.
Enlaces:
Este artículo es una copia del publicado en tecnologiadiaria.com, El artículo original fue publicado en Forobeta por FakeDark, del blog El Desmadre.
De momento nativamente sólo se pueden descargar versiones para Mac OS X y Windows, pero en GNU/Linux con Wine tira perfectamente como podréis comprobar si una vez os hayáis registrado, instaláis la aplicación.
Al grano, si vas a la portada, te dice que necesitas una invitación para registrarte en la versión “free” (viendo sus banners de publicidad y oyendo a veces entre canciones alguna cuña de publicidad) pero curiosamente, hay una forma totalmente legal de conseguir esa cuenta.
Curiosa “puerta trasera” esta, puedes conseguir una cuenta vía este enlace > Spotify Get Started. (ENG).
Que lo disfruten -;), no sé el tiempo que durará, pero yo de vosotros no esperaría mucho.
*el texto en itálica es una copia de la entrada publicada en DaboBlog
<a href="http://tecnoloxiaxa.blogspot.com/" target="_blank"><img src="http://img16.imageshack.us/img16/7463/botntecnoloxaxa.png" title="Tecnoloxíaxa"/></a>
<b:include data='blog' name='all-head-content'/>
<link href='http://www.hostanyimage.com/files/n141jzwsjn9pibz8o25w.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4W9HsW5JWwWo_fTsxtMBNo-kITQa2ACDkBrmgX_6HBrpoOWXqGvmt7K-Zf1qKhdvABlYtS8MmflskWNT-WO1SUXiY_HCWkIvO-g_TSmtEk-ASR5-Q1t6RCS__VRWorNrCa1O0fI4n2KE/s1600/animated_favicon2.gif' rel='icon' type='image/gif'/>
<title><data:blog.pageTitle/></title>
<title><data:blog.pageTitle/></title>
<link href='dirección del fichero ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
que software quieres que aparezca y sus direcciones de descarga de un modo muy sencillo. El inconveniente es que, por defecto, trae muy pocas direcciones y además no están actualizadas.
<b:widget id='TagCloud' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type="text/javascript">
/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
*/
//Variables:
var max = 150; //max css size (in percent)
var min = 50; //min css size (...)
var showCount = 1; // show counts? 1 for yes
var minCount = 1; // what is the minimum count for a Tag to be shown? 1 for all.
//Begin code:
var range = max - min;
//Build label Array
var labels = new Array();
<b:loop values='data:labels' var='label'>
labels.push("<data:label.name/>");
</b:loop>
//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
urls.push("<data:label.url/>");
</b:loop>
//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push("<data:label.count/>");
</b:loop>
//Number sort funtion (high to low)
function sortNumber(a, b)
{
return b - a;
}
//Make an independant copy of counts for sorting
var sorted = counts.slice();
//Find the largest tag count
var most = sorted.sort(sortNumber)[0];
//Begin HTML output
for (x in labels)
{
if(x != "peek" && x != "forEach" && counts[x] >= minCount)
{
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
//Show counts?
if(showCount == 1)
{
var count = "(" + counts[x] + ")";
}else{
var count = "";
}
//Output
document.write("<span style='font-size:" + textSize + "%'><a href='" + urls[x] + "'>" + labels[x] + count + "</a></span> " );
}
}
</script>
</div>
</b:includable>
</b:widget>
La página principal de tu blog generalmente muestra todo el contenido de cada unos de tus posts. Si estos son mayores a 2 párrafos, tus visitantes se verán en dificultades para encontrar rápidamente algún tema de interés para ellos dado que van a necesitar desplazarse hacia abajo en la página. Aquí es donde los post con resúmenes expandibles ayudaban en el viejo blogger.Este hack sirve al mismo propósito para el nuevo blogger y aún hace algunas cosas más!
Esto es, la página principal sólo mostrará los resúmenes de los posts y cuando den click en "leer más", el post completo aparecerá en la página principal (vista Peekabo)!!
He recibido algunas solicitudes para crear dicho hack y me las he arreglado para echarlo a andar. Más tarde, Hans lo mejoró agregando un enlace para "Mostrar Resumen" con el cual se puede colapsar nuevamente un post expandido para mostrar sólo el resumen. Juntos, también hicimos que el enlace "Leer Más" se mostrara únicamente para aquellos posts que tienen resumen. Este es un hack fantástico, pero necesitas tener cuidado al modificar tu template. Si no estás familiarizado con HTML, recomiendo de sobremanera que obtengas ayuda de alguien que lo conozca mientras aplicas este hack. Aquí están los pasos a seguir.
Paso 0.
¡IMPORTANTE!
Descarga y graba tu plantilla (template), de modo que puedas volver atrás si tienes algún problema con este truco.
Encuentra la etiqueta </head> en tu template y agrega todo el código que se muestra a continuación antes de ella.
<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
<style>
#fullpost {
display:none;
}
</style>
</b:if>
includable llamado 'post' y copia y pega los cambios mostrados en rojo de lo que se muestra a continuación (Debes tener mucho cuidado para evitar errores. Date cuenta que la palabra "uncustomized-post-template" puede no aparecer en tu template, pero no hay problema por ello y tampoco debes añadirla):
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Leer Más...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Sólo Sumario...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Para encontrar el Includable, puedes hacer una búsqueda por el término id="post". Si no te es posible encontrarlo, posiblemente no hayas expandido el template. Selecciona el checkbox con la etiqueta "Expand Widget Templates", que se encuentra justo encima del código del template, para expandir éste y mostrar más código.
N. de Tr. Para poder encontrar el Includable en el template será necesario pulsar el checkbox con la leyenda Expand Widget Templates como se aprecia en la imagen. La ubicación dependerá de la plantilla que hayamos seleccionado para nuestro blog. La advertencia aplica para el caso mostrado en la imagen, lo que aplica es simplemente agregar lo que está en rojo e ignorar los códigos previos, que podrán variar de acuerdo a la plantilla de nuestro blog. De acuerdo a nuestras preferencias, podemos también cambiar las leyendas Read More y Summary Only para que indiquen lo que al gusto de cada quien convenga.
Escribe tu resumen aquí.
<span id="fullpost">
Escribe el resto de tu post aquí.
</span>
Ahora cada vez que crees un nuevo post, se te va a indicar claramente dónde debes escribir el resumen y dónde agregar el resto del post. Es importante asegurarse de que la etiqueta </span> mostrada arriba se encuentra al final de tu post. Para asegurar esto, utiliza la pestaña "Edit HTML" (Edición de HTML) en lugar de la pestaña "Compose" (Redactar) cuando escribar tu post. Después de teclearlo, puedes regresar al modo "Redactar" y modificar la tipografía y colores. Cabe mencionar que también puedes dividir algunos (o todos) tus posts anteriores para que tengan un resumen, para lo cual tendrás que editarlos. El enlace "Leer más" aparecerá sólo para aquéllos posts que se hayan dividido de esta manera.
N. de Tr. Se agregó imagen para mostrar dónde se debe realizar el cambio.
Si estás visitando mi blog por primera vez, no te pierdas de otras cosas interesantes que ofrezco:
Notas Importantes:
Escrito originalmente por Ramani, en su blog Hackosphere.
Traducido por: Amox con pequeñas modificaciones.
El ejemplo de su uso en el blog lo pueden ver aquí.
<HTML>
<HEAD>
<TITLE>Ejemplo 10</TITLE>
</HEAD>
<BODY>
<H1>Tablas básicas</H1>
<TABLE BORDER="1">
<TR>
<TH>Cabereca 1</TH>
<TH>Cabereca 2</TH>
<TH>Cabereca 3</TH>
</TR>
<TR>
<TD>Dato 1</TD>
<TD>Dato 2</TD>
<TD>Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 5</TD>
<TD>Dato 6</TD>
</TR>
</TABLE>
</BODY>
</HTML>
| Cabereca 1 | Cabereca 2 | Cabereca 3 |
|---|---|---|
| Dato 1 | Dato 2 | Dato 3 |
| Dato 4 | Dato 5 | Dato 6 |
<HTML><HEAD><TITLE>Ejemplo 10</TITLE></HEAD><BODY><H1>Tablas básicas</H1><TABLE BORDER="1"><TR> <TH>Cabereca 1</TH> <TH>Cabereca 2</TH> <TH>Cabereca 3</TH></TR><TR> <TD>Dato 1</TD> <TD>Dato 2</TD> <TD>Dato 3</TD></TR><TR> <TD>Dato 4</TD> <TD>Dato 5</TD> <TD>Dato 6</TD></TR></TABLE></BODY></HTML>
| Cabereca 1 | Cabereca 2 | Cabereca 3 |
|---|---|---|
| Dato 1 | Dato 2 | Dato 3 |
| Dato 4 | Dato 5 | Dato 6 |
1.- Pulsar "My Dashboard"
2.- Pulsad "Tools"
3.- Dentro de Tools selecconad "Import" (Os aparecerán los distintos gestores desde los que podéis importar los post).