Transparencia sobre la entrada


Esta herramienta puede ser muy útil especialmente para las páginas que quieren evitar que se descarguen sus imágenes, o que se copie su contenido, ya que lo que en realidad estamos haciendo es colocar una capa sobre la entrada, entonces no se podrá copiar, descargar, acceder a un enlace, ni seleccionar el contenido de la entrada. También puede ser una forma muy original para destacar una o varias entradas de nuestra página.

Lo primero que deben hacer es agregar un estilo a la plantilla, la ruta sería: Plantilla / Editar HTML y ayudándose del buscador de los navegadores Control + F ubican la etiqueta </head> y sobre ella colocan el siguiente código:

<style>
    .cnt{
      width:100%;
      background-color:transparent;
    }

    .trans{
      background-color:#11cc22;
      position:absolute;
      top:0px;
      left:0px;
      padding:0px;
      width:100%;
      height:100%;
    }
  </style>

Desde la parte de background-color:#11cc22; eligen el color que desean usar como capa transparente, recuerden que pueden visitar el tema "Colores HTML".

Ahora solo hay que agregar el siguiente código en modo HTML en las entradas que quieran dejar con la capa transparente, puede ser al inicio o al final del contenido de la entrada, el código respeta todas las ediciones que se puedan hacer en la entrada como: alineación, fuente, negrilla, tamaño, imágenes, etc, lo único que no funcionará serán los enlaces.

<div class="trans" style="-moz-opacity: .20; filter: alpha(opacity=20); opacity: .20; z-index: 1;">
</div>

La parte que está en color verde determina la transparencia de la capa, siendo 0 (cero) totalmente transparente (para proteger contenido) y 100 el color original, los tres valores deben ser siempre los mismos.

Importante: Si el código está al final de la entrada en modo HTML y agregan un "Inserta salto de línea"  no se visualizará con la capa transparente la parte que está antes del salto de línea en la página principal, ya una vez en la entrada sí se visualizará todo el tema con la capa transparente; para evitar esto se recomienda agregar el código al inicio de la entrada.

Pero si por ejemplo se quiere que la transparencia se visualice solo en cada entrada, y no en la página principal, o que por el contrario se visualice en la página principal y no en las entradas, podemos agregar un código condicional al inicio y al final del código que va en la plantilla, es algo muy sencillo y quedaría así:

Transparencia solo en la página principal »»»

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
    .cnt{
      width:100%;
      background-color:transparent;
    }

    .trans{
      background-color:#11cc22;
      position:absolute;
      top:0px;
      left:0px;
      padding:0px;
      width:100%;
      height:100%;
    }
  </style>
</b:if>

Transparencia solo en las entradas »»»

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
    .cnt{
      width:100%;
      background-color:transparent;
    }

    .trans{
      background-color:#11cc22;
      position:absolute;
      top:0px;
      left:0px;
      padding:0px;
      width:100%;
      height:100%;
    }
  </style>
</b:if>

Eso sería todo, ya es cuestión de elegir bien un color que siendo un poco transparente combine con el fondo de la entrada o de la página. El código funciona correctamente en todos los navegadores.

Si desean ver un ejemplo pueden visitar el Tema "Ubicación correcta de la Torre o Case" donde uso un color azul oscuro con una transparencia de 10, o el blog Mundo Aikido 2

Gracias.



Cómo proteger las imágenes en blogger, cómo evitar que descarguen las imágenes en blogger, cómo agrego una capa con transparencia en blogger a las entradas, capa con transparencia para las entradas, fondo transparente para blogger, fondo transparente para las entradas en blogger,