El nuevo formulario de Blogger (Colócalo - Personalízalo)

H

ace día en el Blog de Blogger in Draft ha integrado los comentarios en las entradas, esto quieres decir que vamos a poder comentar como lo hacemos en WordPress. Me entere primero por SpanLoco, parecía imposible ponerlo en blog, pero lo logre gracias a Amanda de Blogger Buster, digo imposible porque tenía algunos hack que me hacían imposible integrarme a esa nueva modalidad de comentario y ahora vemos como en el Escaparate de Rosa coloca como personalizarlo, de verdad es increíble.

¡Recuerda! "GUARDAR SIEMPRE UNA COPIA DE TU PLANTILLA EN TU PC

Veamos como hacerlo:



1. No vamos a Blogger en Borrador (Blogger in Draft), buscamos en panel la pestaña configuración entramos ahí y luego no iremos a comentarios. Y encontraremos la nueva opción Ubicación del formulario de comentarios y seleccionaremos (Entrada incrustada a continuación), observen las imágenes (Ver 1, Ver2).
2. Luego de eso verificamos en nuestro blog si en cualquiera de nuestra entrada podremos ver el formulario integrado (Ver imagen)

De no aparecer ya que nuestra plantilla tiene modificaciones tal como lo explica Rosa “El formulario será así de sencillo de implementar en los blogs de nueva creación o en los blogs que no hayan personalizado ciertos aspectos de la plantilla. Si hemos modificado estas partes del código de la plantilla como es mi caso, entonces seguramente aunque habilitemos la opción para mostrar el formulario, este no funcionará. ”

Pero Amanda en sus blog Blogger Buster nos explica con un sencillo procedimiento como implementarlo a las plantillas que son modificadas y que a pesar de que hayan hecho el procedimiento que expliqué anteriormente y no se les dio.
1. Tenemos que tener el procedimiento que explique anteriormente ya listo.
2. Ahora nos vamos a la plantilla en la Edición HTML y lo expandimos en artilugios.
Ahora buscamos lo siguiente:

<p class='comment-footer'> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </p> </b:if>

Y lo sustituimos por este otro:

<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p></b:if>


Y ahora vamos a personalizarlo:
Localizamos los CSS o antes de ]]></b:skin> y agregaremos algo así:
- Para centrar el formulario:

 
 .comment-form { 
margin:0px auto; 
width:400px;
}

- Esto es para la modificación de titulo ósea este “Publicar un comentario en la entrada”.

.comment-form h3 {
background:transparent url(Url_de_la_imagen) no-repeat scroll left 50%; color:#6998CA;
font-size:19px;
line-height:35px;
}
 

Veamos como las explicaciones de Rosa:

Si no vamos a colocar un icono delante del título, eliminamos la línea: background:transparent url(Url_de_la_imagen) no-repeat scroll left 50%;

color:#6998CA; El color del texto.

font-size:19px; Tamaño del texto.

line-height:35px; Ancho de la línea del texto, si nuestro icono tiene un ancho de 35px, por ejemplo, tendremos que poner aquí su misma medida para que no se vea cortado.

Yo le agregaría padding:0px; ya que la imagen quedaba debajo de el texto, ustedes le colocaran el número que quieran.

- Este otro para el mensaje de los formularios, para el que lo tiene habilitado si quieres habilitado aquí

.comment-form p{
background-color:#EFEFF7;
color:#000;
border:1px solid #6998CA;
padding:10px;
width:375px;
}

Veamos como lo explica Rosa:

background-color:#EFEFF7; Color de fondo.

color:#000; Color del texto.

border:1px solid #6998CA; Grosor, color y aspecto del borde.

padding:10px; Distancia del texto al borde de la caja.

width:375px; Ancho de la caja.

Así de fácil y vean el resultado aquí