Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

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 despliega esta sección [+/-].


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.

El resultado será muy similar al que puedes ver en la siguiente imagen:


Modificar o personalizar el formulario de comentarios

PamPem dice...

Bueno bueno bueno! esto ya es lo máximo!

Andaba buscando esto desde hace no se cuanto.

Muchas gracias de veras, me ayudaste de una grandisima manera.

Jaime Trujillo Escobedo dice...

Me alegra mucho que te haya gustado y de que por fin lo hayas encontrado, PamPem.

Si necesitas cualquier otra cosa dímelo.

Marcemoya dice...

Tú siempre me dejas S O R P R E N D I D A....
Eres algo así como mi "Guru" de cabecera. Gracias, gracias, gracias. Personitas como, tú hacen que todo funcione mejor en el blog.

Jaime Trujillo Escobedo dice...

¡Marcemoya! Jajajaja ^^ Gracias a ti por comentar ya que personas como tú hacen que todo esto del Balcón sea posible y me animan a seguir adelante.

Cocina dice...

En mi caso debo decir que la sorprendida soy yo!! con los resultados que obtengo gracias a vos Jaime!!!!me anime a personalizar el formulario de comentarios y me quedo ESTUPENDO!!:D:D,cuando puedas verlo, me gustaria que mes des tu opinion!!
besotessss
claudia

Jaime Trujillo Escobedo dice...

Hola Claudia! Acabo de ver el formulario y, sinceramente, me ha encantado. Nadie diría que se trata del formulario de blogger.

Tu blog va cada vez mejor. ¡Abrazos!

Annita Caniglia dice...

Tenés idea como puedo cambiar el "said..." (o "dice...") en los comentarios??

Jaime Trujillo Escobedo dice...

Annita Caniglia, en esta entrada encontrarás una forma de hacer lo que deseas. Si en tu blog utilizas una de las nuevas plantillas de blogger tal vez no te funcione el truco. En ese caso, házmelo saber y publicaré una solución a la brevedad.

MundoPhotoshopero dice...

Gracias Jaime, me sirvio para poder realizar la modificacion que queria!

Si bien no segui exactamente los mismos pasos, este codigo:

.comment-form {
color: #000000;
background: #99CC66;
border:2px solid #cccccc;
height:430px;
margin:0 auto;
padding:10px;
width:400px;
}


Fue de muchisima ayuda! ^^

Jaime Trujillo Escobedo dice...

MundoPhotoshopero, los códigos que menciono en las entradas no siempre son idénticos al de nuestra plantilla (especialmente si se trata de una de las nuevas que ofrece blogger).

Me alegra que a pesar de las diferencias pudieses hacerlo ^^.

Liliana dice...

Hola Jaime, gracias por tu ayuda, yo quería hacerte una pregunta con respecto a la imagen de fondo, todo me sale bien si escojo un color de fondo, pero estoy tratando de hacerlo con una imagen y no me queda centrada, yo no quisera que se repitiera porque tiene algunos efectos, crees que me puedas ayudar, por más que cmabio el ancho, y alto sigue saliendome mal.Gracias.

Jaime Trujillo Escobedo dice...

Liliana, debes enviarme la dirección de tu blog con la imagen ya instalada (aunque se visualice de manera incorrecta) para resolver tu consulta.

Anónimo dice...

Awesome article.

Feel free to visit my web site; accueilli

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo