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 .

24 opinaron:

Cardenal Farenas

Bueno, ya hice varios ensayos con tus propuestas y ya definitivamente la apliqué en la parroquia. Gracias y bendiciones

Responder
Jéssica YK

Cardenal Farenas: gracias por tu visita.

Saludos

Responder
Birdelo

Hola Jessica.

Ando por acá de visita, viendo lo nuevo que tienes por acá. Veo que este formulario de comentarios nos está haciendo mucha ilusión, a mi me fascina.

Lo que faltaría sería que encontraran la forma de ponerlo que no se recargue la página, como ya he visto en algunos blogs de Wordpress.

Bueno... Sería esperar a que Blogger despierten.

Saludines compi y gracias por la visita!!!.

Responder
Jéssica YK

Birdelo: gracias por la visita :)
Tienes razón, sería bueno encontrarla forma para que no se recarguen los comentarios...En fin, saludos y nuevamente gracias por la visita.

Saludos

Responder
GiiiinOoO

:D

Responder
Jéssica YK

GiiiinOoO: gracias por la visita. Vuelve cuando quieras :)

Saludos

Responder
Anónimo

cn dndndf

Responder
Staff

Me sirvio mucho gracias. Dejo un link al blog: http://fire-zone.org :)

Responder
Jéssica YK

Staff: me alegra que te haya sido útil el post ;)

S@lu2

Responder
PERRO LOCO

perfect

Responder
Anónimo

MUy bien

Responder
Jéssica YK

» Perro loco: gracias por tu visita.

» Anónimo: me alegra que te haya servido el post, pero la próxima vez trata de tener habilitado tu perfil.

S@lu2

Responder
jhon fre

la preunta es como hago el estilo de mis comentarios como este... ayuda...

Responder
Jéssica YK

jhon fre: cómo cuál? ¿deseas que tu formulario de comentarios sea igual a alguno de los formularios de muestra? ¿o quieres tener uno propio?

Sólo sigue las indicaciones que di, usa colores e imágenes y podrás tener un formulario igual o mejor a que los que hice de ejemplo.

Si tienes alguna duda, me avisas y te ayudaré. Por cierto, sería bueno que tengas tu perfil habilitado o dejes algún link a tu blog para poder visitarlo y ayudarte.

S@lu2

Responder
JhonFre300

Hola, muy bueno el post, solo kiero preguntarte algo...

Kiero ponerle un color alterado de fondo a los comentarios de mis entradas para diferenciarlos entre ellos. Trato de explicarme con este ejemplo:

Ana dijo:
Hola como están, este es un blog muy interezante (Comentario con fondo BLANCO)

Peter dijo:
Es verdad es el mejor de todos (comentario con fondo AZUL)

Carlos dijo:
Lo mejor de la internet... este blog (comentario con fondo BLANCO)

... y asi sucesivamente....

Se puede ésto? cómo ? si alguien sabe gracias.

Responder
Jéssica YK

JhonFre300: hay varias personas , al igual que tu, que me han preguntado por lo mismo. Así que estoy preparando un post sobre el tema que saldrá mañana, miércoles 30 de setiembre.

Sólo te pido un poco de paciencia.

S@lu2

Responder
JhonFre300

Ahi estaré, gracias... :D

Responder
Jéssica YK

JhonFre300: el post ya está publicado :)

S@lu2

Responder
Anónimo

hola, te queria preguntar como haces para personalizas las cajitas de los comentarios que existen te agradezco una respuesta a alfonso_cano@live.com

gracias

Responder
Jéssica YK

Anónimo: para personalizar las cajas de los comentarios, mira esta entrada.

Por favor, la próxima vez trata de tener habilitado tu perfil o deja algún enlace a tu blog para visitarte :)

S@lu2

Responder
Marii Angeliica

pss intente hacerlo pero no me salee el primer codigo

Responder
Noe

Hola!!! Me gustaría saber si es posible cambiarle el color al texto "salir" y "suscripción por correo electrónico" del formulario de blogger, ya que veo que tú lo tienes en color rojo. Yo lo tengo azul y no sé como cambiarlo a un tono más afín a la gama de colores de mi blog. Muchas gracias.

Responder
Jéssica YK

» Noe:
He visitado tu blog y no veo los enlaces azules, sino de color rojo. Creo que ya solucionaste el problema.
Gracias por tu visita!

S@lu2

Responder
Diogenes

Hola
Me gustaría saber como puedo editar el boton "publicar un comentario"

muchas gracias

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio