Modificar o personalizar el formulario de comentarios

Al dejar un comentario en un blog de blogger nos podemos encontrar con tres métodos: encontrar el formulario de comentarios incrustado bajo el artículo, un enlace que abre el formulario en una ventana emergente u otro que nos conduzca directamente a una página aparte en la que está el formulario.

En cualquier caso y suponiendo que tienes configurado el formulario de comentarios incrustado bajo las entradas, comenzaremos a sacarle el máximo partido para editar prácticamente todo lo que lo compone.

Diseño>Edición de HTML>expandimos artilugios


1) El primer paso será centrar el formulario de comentarios. Para ello, busca la etiqueta ]]></b:skin> y pega este bloque de CSS encima:
/* Formulario coment personalizado */

.comment-form {
width:412px;
margin:0px auto;
}
Si deseas enmarcarlo y añadirle un fondo de imagen o color, utiliza este otro bloque:
.comment-form {
color: #000000;
background: #99CC66;
border:2px solid #cccccc;
height:430px;
margin:0 auto;
padding:10px;
width:400px;
}
color: #000000; Representa el color del texto (negro). Puedes editarlo al reemplazar #000000 por el código del color escogido en la tabla de colores

background: #99CC66; Representa el fondo del recuadro (verde). Puedes editarlo con ayuda de la tabla de colores

En caso de querer añadir una imagen de fondo, cambia dicha línea por esta otra:
background: transparent url("DIRECCION DE LA IMAGEN") repeat top left;
Introduce la dirección de tu imagen donde dice DIRECCION DE LA IMAGEN.
border: 1px solid #cccccc; Es el borde que tendrá el recuadro. El grosor, 1 píxel, puede aumentarse o disminuirse, así como el estilo solid, que puede cambiarse haciendo uso de esta entrada (en la cual se explican los tipos de borde). Será de color gris al no ser que sustituyas dicho valor hexadecimal (#cccccc) por el de tu color favorito.

height:430px; Indica la altura que tendrá la caja que enmarca el formulario (430 píxeles)

padding: 10px; Es la distancia existente entre el borde del recuadro y el contenido (texto). Puedes aumentar esta distancia cambiando el valor 10.

width: 400px; Representa el ancho del recuadro (400). Modifícalo hasta ajustarlo a tu blog.

2) Seguidamente vamos a editar el texto "Publicar un comentario en la entrada" que aparece encima de nuestro formulario.

Para ello, visita
esta otra entrada
3) Otra opción será la de editar el recuadro que contiene el mensaje del formulario (que previamente hemos escrito en el apartado Configuración > Comentarios > Mensaje del formulario de comentarios).
Antes de comenzar a personalizarlo a tu gusto, añade este bloque justo debajo del que insertaste en el paso 1, antes de la etiqueta
]]></b:skin>
.comment-form p{
color: #000000;
border: 1px solid #cccccc;
background:
#99CC66;
padding: 10px;
width: 368px;
}
Puedes editarlo a tu gusto y personalizar los colores. Para descubrir como hacerlo revisa este codigo.


color: #000000; Representa el color del texto (negro). Puedes editarlo al reemplazar #000000 por el código del color escogido en la tabla de colores.

border: 1px solid #cccccc; Es el borde que tendrá el recuadro. El grosor, 1 píxel, puede aumentarse o disminuirse, así como el estilo solid, que puede cambiarse haciendo uso de esta entrada (en la cual se explican los tipos de borde). Será de color gris al no ser que sustituyas dicho valor hexadecimal (#cccccc) por el de tu color favorito.

background: #99CC66; Representa el fondo del recuadro (verde). Puedes editarlo con ayuda de la tabla de colores.

En caso de querer añadir una imagen de fondo, cambia dicha línea por esta otra:

background: transparent url("DIRECCION DE LA IMAGEN") repeat top left;

Introduce la dirección de tu imagen donde dice DIRECCION DE LA IMAGEN.

padding: 10px; Es la distancia existente entre el borde del recuadro y el contenido (texto). Puedes aumentar esta distancia cambiando el valor 10.

width: 368px; Representa el ancho del recuadro (368). Modifícalo hasta ajustarlo a tu blog.

color: #000000; Representa el color del texto (negro). Puedes editarlo al reemplazar #000000 por el código del color escogido en la tabla de colores.

border: 1px solid #cccccc; Es el borde que tendrá el recuadro. El grosor, 1 píxel, puede aumentarse o disminuirse, así como el estilo solid, que puede cambiarse haciendo uso de esta entrada (en la cual se explican los tipos de borde). Será de color gris al no ser que sustituyas dicho valor hexadecimal (#cccccc) por el de tu color favorito.

background: #99CC66; Representa el fondo del recuadro (verde). Puedes editarlo con ayuda de la tabla de colores.

En caso de querer añadir una imagen de fondo, cambia dicha línea por esta otra:

background: transparent url("DIRECCION DE LA IMAGEN") repeat top left;

Introduce la dirección de tu imagen donde dice DIRECCION DE LA IMAGEN.

padding: 10px; Es la distancia existente entre el borde del recuadro y el contenido (texto). Puedes aumentar esta distancia cambiando el valor 10.

width: 368px; Representa el ancho del recuadro (368). Modifícalo hasta ajustarlo a tu blog.

Guarda la plantilla para terminar.

Fuente: elbalcondejaime

2 comentarios:

stian dijo...
Este comentario ha sido eliminado por el autor.
Descomposed dijo...

Gracias por compartir esta info : )

Publicar un comentario

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika