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 .