Quitar espacio vacio de la caja de comentarios en Blogger (Plantillas personalizadas)

No sé que pasa en Blogger que siempre encuentran una manera de hacernos la vida imposible y tener que estar reeditando nuevamente la plantilla cuando hace más de un año y medio que no la toco, así que tengo que desempolvar mis conocimientos en CSS para arreglar los estropicios que me genera.

Este día al checar el blog encontré unos horrendos espacios vacios bajo la caja de comentarios, no importa que hiciera, no se arreglaba, cualquier medida que ponía era promediada por blogger y nunca pude efectivamente pude reducirla modificando parámetros

La manera más sencilla era eliminar los parámetros agregados por Blogger y estableciendo una nueva regla  CSS centrada en el ID comment-editor, aunque siendo páginas dinámicas esto tiene sus peros, es el menor de los males, así que  vamos a arreglarlo por este método, pese a que no todo funcionará perfectamente, habrá cierto molesto espacio agregado debajo, pero este será mínimo.

**Se requiere Firefox o bien Google Chrome en Windows para hacer este tutorial.

Problema
El problema es para plantillas personalizadas y no las que ofrece Blogger, que esas solo el Pulpo Espagueti Volador sabe como funcionan y creo que las mantiene Blogger con más "delicadeza". Así se ve el problema en la caja de comentarios es debido a un comportamiento dinámico del valor de la altura (height) del marco (iframe) que contiene la caja de comentarios:

¿Cómo se resuelve?
Vamos a eliminar los valores de height del marco de la caja de comentarios, uno es el dado a la versión para pantallas pequeñas que por regla general nadie las usa y es una plantilla inútil en vista de que las pantallas inteligentes son de formato grande.

1. Nos vamos a Plantilla:

2. En la miniatura de nuestro blog pulsamos en Editar HTML:

3. Se abrirá una caja de código, damos un clic dentro de esa caja de código, esto es muy importante porque sino se abrirá la caja de búsqueda del navegador y no la del buscador de código, una vez hecho, damos CTRL + F y deberá aparecer una casilla de búsqueda en la esquina superior derecha:

4. Pegaremos o escribimos comment-editor-src y pulsamos Entar / Enter / Intro:

5. Veremos dos etiquetas iframe con el id='comment-editor'

6. A ambas hay que quitarle el valor height='valor' para el caso de esta plantilla es height='240':

7. Ahora vamos a buscar nuevamente comment-editor-src para eliminar el resto de valores height, para esto debes dar clic dentro de la caja de búsqueda y pulsar nuevamente Entrar de otra manera crearás saltos de línea en el código:

8. Eliminamos el resto:

9. Ahora ya que sabemos como buscar buscaremos la etiqueta <b:skin> con el buscador y agregaremos la regla ID (Ojo, si buscan manualmente <b:skin> verán que está como <b:skin>...</b:skin> tienen que dar clic en el triángulo ► para expandirlo):

10. En b:skin se almacenan las secciones de estilo global de blogger, desde luego que si tenemos condicionales podríamos agregar la regla en la sección correspondiente, pero eso es mucho embrollo para el beneficio obtenido, así que en su lugar solo agregaremos:

/* Arreglo provisional para altura iframe de comentarios*/
#comment-editor 
{height: 260px !important;}

11. Agregaremos todo lo que escribí arriba después de la sección de variables que preceden a<b:skin> y termina en */, la primer regla es generalmente html {...

12. Así debe quedarles:

13. Pulsamos en Guardar plantilla:

El resultado será primero para la caja sin comentarios:

Y la caja con comentarios

El iframe tiene un valor de 250 pixeles establecido en la plantilla por el valor replybox.height = '250px'; si ustedes usan 250px en la regla comment-editor que pusimos, blogger agrega un margen y padding, así que lo mejor es establecer el valor entre 260 y 270 para que no haya problemas de la aparición de barras desplazadoras en la caja de comentarios.

Pueden de todas maneras existir espacios vacíos, pero estos no son problema del marco o iframe, sino son otros valores insertados por el CSS. En mis plantillas hay un error y tengo varios espacios que deberían aparecer en otro órden, esto solo se puede apreciar usando el Inspector de elementos de Webkit que tiene Firefox o Google chrome al dar clic derecho sobre una parte de su página como pasa acá abajo: