Gadget Formulario de Contacto de Blogger

Hoy hablaremos un poco sobre el gadget Formulario de Contacto de Blogger: cómo implementarlo en nuestro blog y cómo personalizarlo.

AGREGAR GADGET DEL FORMULARIO AL BLOG

Es muy sencillo agregar este gadget a la sidebar de nuestro blog; sólo seguimos estos pasos:

1.§ Vamos a Diseño - Añadir un gadget y del menú izquierdo elegimos la pestaña Más gadgets y luego Formulario de Contacto.

2.§ Le colocamos un título a nuestro gadget y le damos en Guardar.

PERSONALIZAR EL GADGET

Ahora añadiremos algunos estilos para personalizar nuestro formulario de contacto.

1.§ Vamos a Plantilla - Editar HTML.

2.§ Con ayuda de CTRL+F buscamos ]]></b:skin> y antes de éste pegamos lo siguiente:

.contact-form-widget { /*contenedor del gadget, estilos de texto */
width: 400px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
font-size:12px;
font-weight: bold;
text-align: left;
}
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-button-submit { /*estilos de las cajas */
color: #000000;
width: 100%;
max-width: 100%;
margin-bottom: 5px;
border: 1px solid #A9A9A9;
background-color: #F2F2F2;
}
.contact-form-button-submit { /*estilos del botón */
width: 100px;
background: #F6F4DA;
border: 1px solid #000000;
color: #FFFFFF;
}

3.§ Modificamos los estilos a nuestro gusto, verificamos que todo esté bien y le damos clic en Guardar plantilla.

Formulario de contacto para tu blog con 123ContactForm

En un post anterior habíamos visto cómo crear un formulario de contacto con HTML. Hoy veremos otra forma de agregar un formulario de contacto a nuestro blog, usando el generador de formularios 123ContactForm.

1.§ Lo primero que haremos será registrarnos. Le damos clic al botón grande color verde que dice Sign up for free. Veremos que la página nos ofrece tres tipos de planes: Basic, Platinum y Gold. Elegimos el primero (Basic) que es gratuito. Le damos en Sign up y llenamos el formulario de registro

2.§ Una vez que nos hayamos registrado, la página nos mostrará un panel para seleccionar el tipo de formulario (Contact Form, Survey, Event Registration Form, etc.). Elegimos el primero, Contact Form.

3.§ En Form Name, colocamos el nombre que le daremos a nuestro formulario. Damos en OK.

4.§ En la siguiente ventana nos aparecerá el formulario, con sus diversos campos: "Name", "Email", "Message" y más abajo, el botón "Send Email". Para cambiar el nombre de estos campos, lo que haremos será dar clic sobre cada campo, por ejemplo, sobre "Name". Se coloreará de color amarillo y en la parte izquierda aparecerá un panel. En la parte que dice Label, podemos borrar el nombre del campo (Name) y cambiarlo por otro (por ejemplo, "Nombre" o "Nombre y Apellidos")

5.§ También podemos modificar los estilos del texto (Label Style), el tamaño de fuente (Field Size) y si el campo será obligatorio (Options).

6.§ Si queremos ver cómo va quedando nuestro formulario, le damos en Preview. Una vez modificado todo, le damos en Continue.

7.§ Ahora nso aparecerán las opciones de notificación, es decir, a qué correo electrónico nos llegarán los mensajes.

8.§ Si queremos que los mensajes nos lleguen al correo con el que nos registramos en la página, le damos clic a la casilla donde figura nuestro correo. Si queremos que los mensajes nos lleguen a un correo distinto al que nos registramos, damos clic al botón "Add Notification Email".

9.§ En el panel izquierdo, veremos opciones adicionales, podemso cambiarlas o dejarlas tal como están. Luego, damos clic a Continue.

10.§ Nos aparecerá una ventana con el códiso de nuestro formulario, para colocarlo en nuestra página. Para esto, veremos unas pestañas en la parte izquierda, seleccionamos la que dice Blogger. Copiamos todo el código.

11.§ Finalmente, vamos a nuestro blog, creamos una nueva página y pegamos el código de nuestro formulario. También podemos pegar el código en un gadget, si queremos que el formulario está siempre visible en la sidebar. Eso sería todo, como venn es muy sencillo.

123ContactForm

PollCode » para crear encuestas

PollCode es una herramienta que nos ayudará a crear encuestas de forma muy fácil, proporcionándonos después el código para insertar la encuesta en nuestro blog.

Para crear las encuestas, no es necesario crear una cuenta, aunque es lo recomendable. Seguimos los pasos que nos indican, escribiendo la pregunta y las alternativas.

Además, podemos personalizarlo a nuestro gusto. Aquí una muestra:

Qué navegador usas?
	Internet Explorer
	Opera
	Mozilla Firefox
	Google Chrome
	Safari

PollCode

Solución del test en Blogger

Hace un tiempo vimos cómo agregar un test en Blogger; el problema que surgía era que se podían marcar todos los radio-button y todos quedaban seleccionados, lo que no quedaba muy bien.

Así que, analizando nuevamente el código, intenté alguna forma de solucionarlo y afortunadamente la encontré. Es bastante sencilla: sólo debemos de agregar algunos valores y cambiar un poco el código.

1.§ Entonces vamos a Diseño - Elementos de la página - Añadir un gadget- HTML/Javascript y el código a pegar sería el siguiente:

<center><div style="background-"&gt;<span >AQUÍ-LA-PREGUNTA</span></div></center><div style="background-">

<input name="b1" value="V1" onclick="alert('Correcto');V1.checked;" type="radio">ALTERNATIVA1<br>

<input name="b1" value="V2" onclick="alert('Incorrecto');V2.checked;" type="radio">ALTERNATIVA2<br>

<input name="b1" value="V3" onclick="alert('Cerca');V3.checked;" type="radio">ALTERNATIVA3<br>

<input name="b1" value="V4" onclick="alert('Inténtalo de nuevo');V4.checked;" type="radio">ALTERNATIVA4<br></div>

De modo que el resultado será el siguiente:

¿Cuál es la capital de Bielorrusia
Ulster
San Petersburgo
Minsk
Sarajevo

Crear un test en Blogger

Si bien Blogger cuenta con un gadgets de Encuestas, no cuenta con otro tipo test. Puede que un Tets parezca igual que decir Encuesta, pero no lo es.

En una encueta no hay repuestas verdaderas o falsas, correctas o incorrectas, lo que si hay en un Test.

Por ello, y antes las preguntas que me hicieron sobre cómo crear un test, de forma sencilla, vamos a ver cómo conseguirlo.

1.§ Vamos a Diseño - Elementos de la página - Añadir un gadget- HTML/Javascript.

2.§ Ahora pegaremos el siguiente código:

<center><div style="background-"&gt;<span >AQUÍ-LA-PREGUNTA</span></div></center><div style="background-">

<input name="b1" onclick="alert('Correcto');b1.checked;" type="radio">ALTERNATIVA1<br>

<input name="b2" onclick="alert('Incorrecto');b2.checked;" type="radio">ALTERNATIVA2<br>

<input name="b3" onclick="alert('Cerca');b3.checked;" type="radio">ALTERNATIVA3<br>

<input name="b4" onclick="alert('Inténtalo de nuevo');b4.checked;" type="radio">ALTERNATIVA4<br></div>

Reemplazamos los datos y listo

El resultado será el siguiente:

¿Cuál es la capital de Bielorrusia
Ulster
San Petersburgo
Minsk
Sarajevo

Formulario de contacto con HTML

En un post vimos cómo hacer un formulario de Acceso o Login. Hoy vamos a ver cómo hacer un formulario de contacto.

1.§ Lo que hacemos es copiar el siguiente código, ya sea en la sidebar (Diseño- Elementos de la página- Añadir un gadget- HTML/Javascript Añadir) o en una entrada (Creación de entradas- Nueva entrada). El código mencionado es el siguiente:

<FORM action="mailto:tucorreo@correo.com" method="post" enctype="text/plain"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%"><TR><TD width="30%"><DIV align="right"><B>Name:</B></DIV></TD><TD width="70%"><INPUT type="text" name="name" size="20"></TD></TR><TR><TD><DIV align="right"><B>Email:</B></DIV></TD><TD><INPUT type="text" name="email" size="20"></TD></TR><TR><TD><DIV align="right"><B>Comment:</B></DIV></TD><TD><TEXTAREA name="comment" cols="30" wrap="virtual" rows="4"></TEXTAREA></TD></TR><TR><TD>&nbsp;</TD><TD><INPUT type="submit" name="submit" value="Submit"><INPUT type="reset" name="reset" value="Reset"></TD></TR></TABLE></FORM>

2.§ Cambiamos donde dice tucorreo@correo.com por nuestro correo. Damos click a Guardar o Publicar, dependiendo si lo pegamos en un gadget o en una entrada.

3.§ Este paso no es obligatorio, con los pasos anteriores ya tendremos nuestro formulario de contacto. Este paso es sólo para darle algún estilo al formulario como color de borde, color del botón, etc.

Entonces, personalizarlo, vamos a Diseño/ Edición de HTML, con ayuda de Ctrl+F buscamos ]]></b:skin> y antes de éste, pegamos el siguiente código:

textarea {
background: #F6F4DA;
border: 1px solid #B07C3F;
}

input {
background: #F6F4DA;
border: 1px solid #B07C3F;
margin-right: 5px;
}

Si desemos podemos cambiar los colores. Damos click a guardar y listo.

El resultado será el siguiente:

Nombre:
E-mail:
Mensaje:

Formulario de Login a tu cuenta de blogger

Una de las utilidades que nos ofece la navbar es el enlace que tiene para acceder a nuestra cuenta; sin embargo, por estética y otras razones muchos la quitan.
Lo que nos queda es poner algún enlace a blogger para acceder a nuestra cuenta, etc.
Pero encontré una forma sencilla de acceder a nuestra cuenta de blogger, poniendo un formulario de acceso o login en la sidebar de nuestro blog.

Los pasos para agregarlo son los siguientes:

♠ Vamos a Diseño/ Elementos de página/ Nuevo gadget y selessionamos la opción HTML/CSS.
♠ Pegamos el siguiente código y damos click a guardar:

<div id="loginform"><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()">
<input value="http://blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fblogger.com%2F" name="continue" type="hidden"/>

<br/>
<div>
<label for="Email"> Nombre de usuario (e-mail):
<br/><input id="Email" tabindex="1" name="Email" size="20" type="text"/>

</label>
</div>
<br/>
<div>
<label for="Passwd"> Contraseña: (<a href="https://www.blogger.com/forgot.g" target="_top" title="¿Ha olvidado su contraseña?">?</a>)

<br/>
</label>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/>

</div>
<br/><br/>
<input id="signin-btn-ns" tabindex="0" value="Enviar" class="ubtn ubtn-block" name="submit" type="submit"/>

</form></div>

♠ Ahora, para darle alguna propiedad CSS a nuestro formulario como color de borde, color del botón, etc, vamos a Diseño/ Edición de HTML, con ayuda de Ctrl+F buscamos ]]></b:skin> y antes de éste, pegamos el siguiente código:

#Email, #Passwd{
background: #F6F4DA;
border: 1px solid #B07C3F;
}

#signin-btn-ns {
color: #fff;
background: #B07C3F;
border: 1px solid #B07C3F;
}

Si deseamos podemos cambiar los colores del código por otros y también el tipo de borde.
♠ Damos click en guardar y listo.

Y si hemos seguido todos los pasos el formulario se verá así en nuestra sidebar:

Nombre de usuario (e-mail):

Contraseña: (?)

Si tienen alguna duda, será bienvenida :)

Formulario de comentarios con diseño

Respondiendo a unos e-mails donde me preguntaban cómo hacía para que el formulario de comentarios de mi blog tenga imágenes y demás, hoy vamos a ver cómo diseñar o darle estilo al formulario de comentarios. Previamente , debemos de tener el formulario de comentarios incrustado .

Bien, para explicar mejor los códigos a usar, veamos esta imagen xon las partes principales. Para que entiendan mejor, cada número es una parte del formulario que personalizaremos a continuación (cada apartado de este post tiene un número que corresponde al de esta imagen):



Bien, ahora que estamos listos para dar estilo al formulario.

1 CAMBIANDO EL MENSAJE:

Cuando incrustamos el formulario, el mensaje que aparece de cabecera del formulario es "Publicar un comentario en la entrada" ; este mensaje lo podemos cambiar por otro que más nos guste. En el caso del formulario de mi blog puse "Tus dudas o comentarios son bienvenidos".

Bien para cambiar el mensaje seguimos estos pasos:

♠ Vamos a Diseño/ Edición de HTML y Expandir plantillas de artilugios.
♠ Con CTRL+F buscamos:

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h3><data:postCommentMsg/></h3>
<p><data:blogCommentMessage/></p>

♠ Borramos el código anaranjado y colocamos otro texto, de modo que esa línea del código nos quede así:
<h3>Déjame algún comentario</h3>

♠ Pero si ya tenemos una imagen incluída con texto , como en el caso del formulario de comentarios de mi blog, incluiríamos la imagen de esta forma: borramos el código anaranjado anteriormente mencionado y colocamos la URL de la imagen de manera que nos quede así:
<h3 id='comment-post-message'><img src='aquí-url-de-la-imagen'/></h3>

2 DISEÑANDO LA VENTANA DEL FORMULARIO:

Aquí podremos dar formato a toda la ventana del formulario, poderle algún color de fondo, centrarlo, etc. Para ello seguiremos los siguientes pasos:

♠ Con CTRL+F buscamos ]]></b:skin> y antes de éste pegamos el siguiente código que podemos personalizar o modificar según nuestros gustos:

.comment-form {
background:#c0c0c0 url(si deseamos aquí url de la imagen);
margin: 0 auto;
border:2px dashed #000;
padding-left:5px;
padding-right:5px;
}

3 LA CABECERA DEL FORMULARIO

Aquí podremos agregar alguna imagen que acompañe el texto; en la imagen de ejemplo, serí el emoticón que acompaña el texto "Tus dudas o comentarios son bienvenidos"; también, podremos personalizar el color del texto , cambiar el tamaño de la letra o centra el texto.

♠ Con CTRL+F buscamos ]]></b:skin> y antes de éste pegamos el siguiente código:

.comment-form h3 {
background:transparent url(aquí url de la imagen) no-repeat;
font-size:12px;
text-align: center;
color:#e1771e;
padding:0px 18px 0px 18px;
}

4 VENTANA DONDE VA EL MENSAJE:

Ahora personalizaremos el mensaje que va debajo de la cabecera del formulario. Por cierto, si bien en los códigos yo pongo algunas propiedades ustedes pueden poner más propiedades a cada parte del formulario como bordes, etc.

♠ Con CTRL+F buscamos ]]></b:skin> y antes de éste pegamos:

.comment-form p {
width:260px;
background-color: #ffabb5;
color:#000;
font-size:12px;
border:2px dashed #800080;
padding:15px 0px 0px 15px;
}

5 EL CUADRO DONDE SE ESCRIBEN LOS COMENTARIOS:

Finalmente, esta es la zona donde nuestros visitantes escribirán sus consultas o comentarios. Podremos centrarlo o cambiar de altura, entre otras cosillas.

♠ Una vez más, con CTRL+F buscamos ]]></b:skin> y antes de éste pegamos:

#comment-editor {
height:330px;
margin:0px 18px 0px 22px;
width:100%;
}

Bien, con un poco de ingenio podremos crear diferentes formularios de comentarios, como estos dos, por ejemplo:



Si tienen alguna duda, me avisan .