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 son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

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?

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

    ResponderEliminar
    Respuestas
    1. ¿Cual caja de Facebook? Soy un cavernicola, no uso facebook.

      Eliminar

Samurai Jack (2017), episodio 10 "Final"

Samurai Jack (2017)Jack se enfrenta por fin con Aku, todos tratan de ayudar al samurai y la sorpresa vendrá del pasado.

[Leer artículo...]

Noragami entra en paro indefinido

Noragami es suspendida temporalmenteUna de las autoras no puede continuar con su trabajo al frente del manga y se ha decidido meter la historia en hiatus, lo que puede significar...

[Leer artículo...]

Tales of Zestiria y su final Yuri

El final de Tales the Zestiria The XLas aventuras de Sorey llega a su fin con un final de lo más raro que he visto hasta ahora.

[Leer artículo...]

Warau Salesman New (2017) El vendedor sonriente

Warau Salesman New (2017) EstrenosSatoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

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

Anexos

Bitacoras.com