19 febrero 2008

Formulario de los comentarios de Blogger debajo de cada entrada

En el Escaparate de Rosa vi el truco de poner el formulario de comentarios debajo de cada entrada o post, este truco lo había visto en varios blog y me parecía muy bueno y cómodo para el blog y en mi opinión es más rápido al cargarse en el blog.
Esto es lo que dice Rosa en su blog respecto al tema:

Modificando el HTML de nuestra plantilla podemos conseguir que el formulario para dejar comentarios de Blogger no aparezca en una ventana aparte, sino que lo haga justo al final de cada post.
Tendremos el formulario donde ahora vemos los comentarios al entrar a las páginas de etiquetas (al pinchar en el título de una entrada o sobre una etiqueta), y se verá tal cual lo vemos en la ventana pop up cuando dejamos un comentario, pero "incrustado" debajo de cada entrada.

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



Primero que todo vamos a “Configuración” nuestra plantilla buscamos las opción “Comentario” y donde diga la opción: ¿Mostrar comentarios en una ventana emergente? Seleccionamos en “Si” si ya las tienes déjala así.



Luego iremos a nuestra plantilla, edición HMTL y la expandimos en artilugios y buscamos el ]]></b:skin> (para encontrarlo fácil en la plantilla, con Ctrl+F) y justo ante colocamos estos códigos:


#comenta-outter {

margin: 50px 0;

}



#comenta-inner {

display: block;

height: 650px;

width: 500px;

margin:0;

border:none;

background-color: #ddd;

}

Bajamos en la plantilla para localizar estos códigos:

<b:includable id='comments' var='post'>

<div class='comments' id='comments'>

<a name='comments'/>

<b:if cond='data:post.allowComments'>

<h4>

<b:if cond='data:post.numComments == 1'>

1 <data:commentLabel/>:

<b:else/>

<data:post.numComments/> <data:commentLabelPlural/>:

</b:if>

</h4>

<dl id='comments-block'>

<b:loop values='data:post.comments' var='comment'>

<dt class='comment-author'

expr:id='"comment-" + data:comment.id'>

<a expr:name='"comment-" + data:comment.id'/>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'>

<data:comment.author/>

</a>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'>

<data:comment.body/>

</span>

<b:else/>

<p><data:comment.body/></p>

</b:if>

</dd>

<dd class='comment-footer'>

<span class='comment-timestamp'>

<a expr:href='"#comment-" + data:comment.id'

title='comment permalink'>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>

</dl>

<p class='comment-footer'>

<a expr:href='data:post.addCommentUrl'

expr:onclick='data:post.addCommentOnclick'>

<data:postCommentMsg/>

</a>

</p>

</b:if>


Lo eliminamos y lo sustituimos por este:



<b:includable id='comments' var='post'>

<div class='comments' id='comments'>

<a name='comments'/>

<b:if cond='data:post.allowComments'>

<center>

<div id='comenta-outter'>

<div id='comenta-inner'>

<iframe align='middle'

expr:src='data:post.addCommentUrl'

frameborder='0' marginheight='0' marginwidth='0' scrolling='auto'

style='width:100%;height:100%;'/>

</div>

</div>

</center>

</b:if>

Buscaremos de Nuevo este otro código en la plantilla:




<span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>

<a class='comment-link'

expr:href='data:post.addCommentUrl'

expr:onclick='data:post.addCommentOnclick'>

<b:if cond='data:post.numComments == 1'>

1 <data:top.commentLabel/>

<b:else/>

<data:post.numComments/>

<data:top.commentLabelPlural/>

</b:if>

</a>

</b:if>

</b:if>

</span>



Lo eliminas y lo sustituyes por este:


<span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>

<a class='comment-link'

expr:href='data:post.url + "#comments"' >

<b:if cond='data:post.numComments == 1'>

1 <data:top.commentLabel/>

<b:else/>

<data:post.numComments/>

<data:top.commentLabelPlural/>

</b:if>

</a>

</b:if>

</b:if>

</span>


Después de hacer todo esto cambios “Guardas”, “Es muy importante que guardes una copia de la plantilla en tu PC, o primero intentas de hacerlo en tu blog de prueba”, si quieres adaptar el formulario a tu gusto vas donde están la parte de los códigos CSS o busca ante del </b:skin>.



#comenta-inner {

display: block;

height: 650px;

width: 500px;

margin:0;

border:none;

background-color: #ddd;

}

height: 650px; Es el alto que tendrá el formulario, podemos cambiar el valor por el que necesitemos.

width: 500px; Es el ancho del formulario, lo más lógico será ponerle el mismo ancho que tengan nuestras entradas, para evitar que se vea "cortado".

border:none; Borde del formulario, está en none/ninguno podemos poner un valor para el borde: grosor, tipo y color, por ejemplo, border:2px solid #000;

background-color: #ddd; El color de fondo del formulario, en el ejemplo es de color gris claro (#ddd;), cambiaremos aquí el código para conseguir el color que queremos.
Podemos incluso añadir una imagen de fondo al formulario, cambiando
background-color: #ddd; por:

background: url(Dirección_url_de_la_imagen); Esta opción es por si le quieres poner una imagen de fondo al formulario, mire la imagen:

10 comentarios:

  1. QUE BUENO EL CONSEJO.
    ME GUSTAN MUCHO TODAS LAS IDEAS QUE PROPONES A TRAVES DE TU BLOG.

    UN SALUDO

    ResponderEliminar
  2. Hola Nuria! Gracias por tan preciadas palabras, gracias por tu visita.
    Besos!

    ResponderEliminar
  3. de momento aun lo estoy probando, gracias por el contenido visita mi blog www.darknnes.blogspot.com

    gracias
    sale
    bye...

    ResponderEliminar
  4. Hola Gabriel! Aunque ahora es mejor utilizar el nuevo formulario de Blogger y esa muy bueno tu blog... Saludos!

    ResponderEliminar
  5. siiiiiiii....


    ya he podido amigo poner el nuevo formulario de comentarios... lo mejor de todo es que no se que he hecho con mi plantilla pero el caso es que algo he tocado, que ahora con la plantilla que tengo no hace falta configurar el html para poner algun artilugio cuando la plantilla esta modificada, o es la orifinal de blogger.

    He probado con mas bloggers de prueba que tengo, y no es la plantilla es la modificacion que le he hecho...

    ahora estoy comparando las plantillas para ver la modificacion... cualquier cosa si es de tu agrado ver el fenomeno, si quieres te paso el codigo fuente de mis blogs para que lo veas tu...

    bueno pues nada
    ahora estoy disfruntando de mi plantilla.

    bueno amigo adios y buena suerte!! :)

    ResponderEliminar
  6. Hola Gabriel! Que bueno me alegra que ya lo hayas puesto, felicidades por ti... Saludos!

    ResponderEliminar
  7. Es raro... puedo cambiar el primer y segundo intercambio de htmls pero el tercero no puedo encontrarlo!!! Porque es eso???

    el blog es www.salaff.com.ar

    ResponderEliminar
  8. Hola Pablo! Me imagino que a lo mejor tienes la parte de los comentarios modificados pero intenta con este código a ver:
    <span class='post-comment-link'>

    <b:if cond='data:blog.pageType != "item"'>

    <b:if cond='data:post.allowComments'>

    <a class='comment-link'

    expr:href='data:post.url + "#comments"' >

    <b:if cond='data:post.numComments == 0'>

    sin comentarios

    <b:else/>

    <b:if cond='data:post.numComments == 1'>

    1 comentario

    <b:else/>

    <data:post.numComments/> comentarios

    </b:if>

    </b:if>

    </a>

    </b:if>

    </b:if>

    </span>

    Si no buscas esto <span class='post-comment-link'>
    y hasta </span>y sustituye a ver si resulta con esto.

    ResponderEliminar
  9. cuando dice que guarde la plantilla te refieres a que copie todo el codigo en un archivo de texto?

    ResponderEliminar
  10. ¡Hola Los burros del millón! También podría ser esa opción pero Blogger te ofrece bajarla, esta en la parte superior de la edición HTML. ¡Saludos!

    ResponderEliminar

¡Gracias por comentarme! No modero los comentarios porque me parece tentar contra la libertad de expresión de cada individuo, por eso le pido que no hacer comentarios con palabras obscenas, si vas a comentar como Anónimo por favor coloca tu nombre o cualquier apodo. ¡Gracias!