Cómo eliminar la ClickTrap de Blogger en la vista previa de entradas

Cuando previsualizamos un post o un cambio en la plantilla en Blogger, éste añade automáticamente una "trampa para clicks" que impide presionar cualquier enlace o interactuar con videos y otros elementos. Esto tiene una buena razón de ser, y es impedir que nos vayamos de la página mientras la estamos editando, pero también suele ser muy molesto. Aquí mostraré varias formas de deshacerse de esa molestia...

Hay tres formas de hacerlo, dos temporales y una permanente.

1) Método temporal mediante el inspeccionador de elementos (Firefox y Chrome)

También hay dos formas de hacer esto.

1.a) HTML:
Estando en la vista previa, hacer click con el botón dferecho del mouse sobre la página y en el menú contextual que aparece elegir la opción "inspeccionar elemento". Aparecerá el visor de HTML del navegador, resaltando el código pertinente al ClickTrap. Haciendo click derecho otra vez sobre él, elegir la opción "Eliminar nodo" (Firefox) o "Delete node" (Chrome).




1.b) CSS:
Estando en la vista previa, hacer click con el botón dferecho del mouse sobre la página y en el menú contextual que aparece elegir la opción "inspeccionar elemento". En el visor de CSS que aparecerá en el navegador, hacer doble-click al final de la declaración "elemento {...} " (Firefox) o "element.style {...}" (Chrome) y escribir "display:none".

2) Método temporal mediante un marcador JavaScript

Este es el más rápido de los tres métodos, y sólo requiere un click cuando estemos previsualizando el blog. Es mucho mejor que las dos formas anteriores y no requiere escribir código alguno.

Los pasos a seguir son añadir el siguiente enlace a la barra de marcadores:

Eliminar ClickTrap

Y luego hacer click en él cuando se esté previsualizando la entrada o blog.

3) Método permanente mediante CSS

Este requiere un poco más de trabajo, pero de una sola vez por todas. Consiste en añadir una línea de código CSS a la plantilla. Para ellos, sigue estos pasos:

En Blogger, ir la sección "Plantilla" y presionar los botones "Edición de HTML" y "Continuar".

En la sección de estilos, antes de

]]></b:skin>

, añadir la siguiente línea:

div.blogger-clickTrap {display:none !important; width:0 !important; height:0 !important; visibility:hidden !important; z-index:-99 !important;}

La última declaración es la más importante, porque, si todo lo demás falla, la trampa para clicks será enviada al fondo, detrás del resto de los elementos, permitiendo al cursor interactuar con la página.

Presionar el botón "Guardar plantilla".


Importante: En todos los casos, la banda de "Vista previa" no desaparecerá, pero la trampa de clicks quedará inhabilitada.