Formulario de comentarios Blogger debajo de los posts

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

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 popup cuando dejamos un comentario, pero "incrustado" debajo de cada entrada.

[1] Antes de comenzar iremos a la pestaña "Configuración" de nuestra plantilla y una vez allí a "Comentarios" donde seleccionamos SI en la opción "¿Mostrar comentarios en una ventana emergente?


[2] Nos situamos en nuestra plantilla - HTML , expandimos los artilugios y justo encima de </head> colocamos estas líneas de código:

<style>
#comenta-outter {
margin: 50px 0;
}

#comenta-inner {
display: block;
height: 650px;
width: 500px;
margin:0;
border:none;
background-color: #ddd;
}
</style>

[3] Bajamos ahora por la plantilla hasta localizar esta parte del código:

<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 por completo y lo sustituimos por este otro:

<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>

[4] Buscaremos ahora esta otra parte del código de 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 eliminamos sustituyéndolo por este otro:

<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>

[5] Modificaciones:
Podemos hacer algunos cambios en el código CSS, para adaptar el formulario y darle una apariencia mucho más original.

#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);



Actualización:
Puede ser que antes hayamos modificado nuestra plantilla para aplicar el "Sin comentarios/1 comentario/x comentarios" como explico en esta entrada anterior.
Si queremos entonces colocar el formulario para los comentarios debajo de nuestras entradas, pero manteniendo el "Sin comentarios/1 comentario/x comentarios" los pasos a seguir serán los mismos, con la única diferencia de que el último código (paso[4]) lo cambiaremos 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 == 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>