Cómo desvanecer contenido en Blogger

A continuación les voy a compartir un código para desvanecer/ocultar contenido en Blogger. La diferencia con ocultarlo es que el contenido se visualiza primero, de tal forma que los buscadores (robots) lo pueden cargar en sus bases de datos, y es el usuario o visitante quien decide ocultarlo (desvanecerlo) o no a través del botón. 

Otra gran ventaja es que se puede pasar de modo Redactar a Modo HTML y viceversa sin problemas, se puede editar el contenido en modo redactar, alineación, negrilla, colores, etc. El único pero que tiene es que si el contenido es muy largo -pasa de la pantalla inicial- al usar el botón para desvanecerlo u ocultarlo desplaza al visitante al final de la página, mientras que si se usa en la parte del inicio con poco contenido el botón queda ahí mismo.

Para usarlo solo se debe agregar un código script en una entrada en modo HTML, o Gadget HTML-Javascript, y colocar el contenido que queremos desvanecer entre las etiquetas <div id="div1"></div>, y debajo dejamos el código para el botón. 

A continuación el código del script que no se debe modificar (puede ir al final de la entrada):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeToggle();
         });
});
</script>

Y este es el código del botón que oculta y muestra el contenido. Va debajo del código con las etiquetas <div id="div1"></div> donde ubicamos el contenido. Pueden cambiar el título de los botones a su gusto.

<button>Ocultar/Mostrar</button>

A continuación un ejemplo de cómo iría el código completo:

--------------------------------------

<div id="div1">«La eliminación del pago anual de impuestos sobre la propiedad de bienes inmuebles y/o vehículos motivará la adquisición de los mismos, generando dinamismo en la economía, y seguridad en los ciudadanos. La propiedad privada se respeta. No es lógico, por ejemplo, que alguien compre una casa o un vehículo y cada año tenga que estar pagando un impuesto sobre su propiedad, eso es un robo, no parece que la persona lo hubiera comprado sino que lo hubiera adquirido en arriendo.»</div>

<button>Ocultar/Mostrar</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeToggle();
         });
});
</script>
--------------------------------------

Como pueden ver es algo muy fácil y que no necesita que se modifique la plantilla, podemos usar el código directamente en una entrada en modo HTML.

Espero que esta información les sea muy útil.

Gracias.

Tal vez también te interese: Cómo ocultar contenido en Blogger