lunes, 28 de diciembre de 2015

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:

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

3 comentarios:

  1. A mi no me vienen los píxeles en height si no esto: data:cmtIframeInitialHeight menosmal que se me ha ocurrido hacerlo en un blog de prueba porque cuando pincho dentro de la entrada esta útima ni se ve. Tengo la plantilla Fantastico ¿Me puedes ayudar?

    ResponderBorrar
  2. y por que no la aplicastes a este blog y en vez de esto aplicas la caja de comentarios de facebook????

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.