Ofimatica BASG: Blogger

Programas gratis

Mostrando las entradas con la etiqueta Blogger. Mostrar todas las entradas
Mostrando las entradas con la etiqueta Blogger. Mostrar todas las entradas

Como hacer un carrusel de imagenes para blogger

 


 PASO 1

Agregar un gadget  y poner un nombre de carrusel de imágenes para animar diapositivas con una transición de desvanecimiento en lugar de una diapositiva. y copear los códigos que se encuentran a continuación. 👇

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>


¿Quiere agregar Bootstrap rápidamente a su proyecto? Utilice jsDelivr, un CDN de código 

CSS
PASO 2

Copie y pegue la hoja de estilo <link> en su <head> antes de todas las demás hojas de estilo para cargar nuestro CSS.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

PASO 3

Requieren el uso de JavaScript para funcionar. Específicamente, requieren sus propios complementos de JavaScript y Popper . Coloque uno de los siguientes <script>s cerca del final de sus páginas, justo antes de la </body> etiqueta de cierre , para habilitarlos.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Carrusel
Un componente de presentación de diapositivas para recorrer elementos (imágenes o diapositivas de texto) como un carrusel. 

Política de Cookies, Privacidad y Aviso legal: En tu Web

 


Te explico cómo añadir los cumplimientos legales. es decir, Aviso Legal, Política de Cookies y Política de Privacidad.


 En este artículo sobre los cumplimientos legales que debe tener tu blog o página web, te explico sobre cada uno de ellos y además, que debes colocar en cada página. Y lo mejor es que gracias a un generador, te va a facilitar el trabajo.


¿Qué es la política de cookies en la web?

Las cookies son pequeños archivos de información que el servidor envía al ordenador de quien accede a la página, para el correcto funcionamiento y visualización de tu Web por parte del usuario.


Si no entendiste el concepto, te aseguro que al saber lo siguiente, tu mundo se va a clarar.


¿Para qué se utiliza la política de cookies?

Existen varias cookies entre algunas de ellas:


  • Cookies de Análisis: Ayuda analizar el uso que hacen los usuarios en tu sitio web para mejorar la usabilidad del mismo. Ejemplo: Google Analytics: (Cookies analíticas de terceros). Te ayuda a saber: De que país son tus usuarios, cuándo acceden a tu web, que dispositivo usan, etc.
  • Cookies Publicitarias: Permiten la gestión de los espacios publicitarios. Ejemplo: cuando en un sitio se sabe que le gusta al usuario “Gracias a la cookies publicitarias” los anuncios que se van a mostrar le puede interesar al usuario.
  • Cookies Sociales: Son para las redes sociales externas (Facebook, Twitter, Pinterest, Instagram, entre otros. Su función es controlar la interacción usando widgets/plugins sociales dentro de la página. Ejemplo: Cuando en tu sitio colocas lo ultimo que publicaste en twitter, Las imágenes de instagram, etc. . .
  • Entre otras cookies.

Espero que estés claro, sobre las cookies, ahora. . .


¿Qué debe aparecer en la página de política de cookies de mi web?

Simplemente hablas de que son las cookies, en que las utilizas y por último indicar quién es el que instala las cookies en el equipo de tus usuario. Ejemplo: si usas cookies de análisis la información que se recoge es gracias a Google Analytics y explicas que es y para que lo usas.


¿Cómo instalo el aviso de cookies en mi sitio web? 

En esta entrada: Aviso de cookies: En la parte inferior de tu Blog

Te explico cómo añadir el mensaje “en la parte inferior de tu web” una barra de: En esta web usamos cookies. . .

Funciona tanto para los que usan Blogger como los que usan WordPress.

Generar la Política de Cookies
Una vez creada la página en tu sitio web, te vas a CLIC AQUÍ y llenas los campos:

  • Titular de la web: Tu nombre.
  • Sitio Web: URL de tu sitio. Ejemplo: misitio.com
  • E-mail: tu correo.
  • Dirección.



Estos campos se visualizan en: Entidad Responsable, en el documento. chequealo.

Nota: ningún campo es obligatorio, por si no quieres añadir tu dirección.

Cuando este todo listo, clic en el botón: Seleccionar y copiar texto.

Al instante tu información se actualiza en el texto, ahora lo copias “todo” luego te vas a tu página (ya creada) de la política de cookies, pegas el texto, guardas y publica la página.

Nota 2: Si usas algún Cookies de terceros que no se muestra en el archivo por supuesto lo añades.

¿Qué es la política de privacidad en la web?

Es un documento sobre Política de Privacidad que establece los términos que usas en tu Web y como proteges la información que es proporcionada por tus usuarios al momento de utilizar tu sitio web. Por ejemplo, en un formulario normalmente se pide que se identifiquen ya sea el E-mail, dirección, etc. Todo lo necesario para comprar un producto o dependiendo del caso.

En pocas palabras: te comprometes con la seguridad de los datos de tus usuarios.

Nota: Este documento puede cambiar con el tiempo o puede ser actualizado en cualquier momento.

¿Qué contiene la Política de Privacidad en una web?
  • Identidad: Nombre de tu empresa/blog/web
  • Responsable: Nombre de la persona responsable
  • Correo Electrónico del titular.
  • Sitio Web: ejemplo: misitio.com
  • Identificación: cedula/DNI​;
  • Dirección.
  • Teléfono.
  • Url Cookies: tu página de cookies.
Nota: Si por alguna razón no quieres añadir tu dirección de domicilio puedes dejarlo en Blanco.

Generar Política de Privacidad
Ya creada tu página de Política de Privacidad, te vas a CLIC AQUÍ y llena todos los campos.


Al finalizar clic en el botón Seleccionar y copiar texto.

Al instante tu información se actualiza en el texto, ahora lo copias “todo” luego te vas a tu página (ya creada) de Política de privacidad, pegas el texto, guardas y publica la página.

Nota: Se recomienda leerlo por si debes editar algo, especialmente en: Modificación de la política de privacidad. Cambiarlo por tu país.

¿Qué es el Aviso legal y Términos de uso en una web?

Es una página dentro de tu sitio web donde identificas “solo al propietario” en donde se muestra toda la información relativa a los términos y condiciones legales que definen las relaciones entre los usuarios/lectores y tu como responsable de tu página web.

Perdón ¿qué?

Simplemente es garantizar a tus usuarios de que tu página web cumple con el Reglamento General de Protección de Datos y entre otras cosas.


¿Qué debe contener un Aviso legal y Términos de uso?
  • Titular de la web: Tu nombre.
  • URL sitio web: ejemplo: misitio.com
  • Correo Electrónico del titular.
  • Url Política de privacidad: URL de tu página de privacidad.
Generar el Aviso legal y Términos de uso

Ya creada tu página de Aviso legal y Términos de uso, te vas a CLIC AQUÍ y llena todos los campos.


Al finalizar clic en el botón Seleccionar y copiar texto.

Al instante tu información se actualiza en el texto, ahora lo copias “todo” luego te vas a tu página (ya creada) del Aviso legal, pegas el texto, guardas y publica la página.

En conclusión:
Respondiendo a la pregunta inicial ¿Es necesario/obligatorio añadir a mi web estos cumplimientos legales? SI.

A estas alturas, es necesario para evitar dolores de cabeza y malos momentos por tu web. Ahora ya no tienes excusa de no tener suficiente tiempo en estas cosas.

Agradecida con “Estos generadores” que facilitan nuestro trabajo, tan solo ingresando algunos datos y en pocos minutos tienes tu sitio web en otro nivel.




Cómo agregar Pestañas de Videos en Blog de Blogger (2022)





Implementar jQuery Tabs en las entradas del blog se ha vuelto habitual sobre todo cuando nuestro contenido es un blog de vídeos o series, hoy les mostrare cómo crear pestañas en su blog de Blogger. Las pestañas ayudan a organizar diferentes secciones de contenido en un solo contenedor, lo que permite a los usuarios cambiar entre un video a otro video fácilmente sin usar el scroll.

El contenido con pestañas es una excelente manera de mostrar una gran cantidad de contenido en un espacio más reducido al separar el contenido en diferentes paneles. Hay muchas formas de diseñar pestañas, pero la idea principal es la misma, haces clic en una pestaña y el contenido se muestra sin que se vuelva a cargar la página.


Implementar jQuery Tabs a Blogger:

 Entrar a Blogger / Tema / Personalizar / Editar HTML, buscaremos  </style>   y colocaremos el siguiente código encima.

ul.tabs{width:100%;max-width:800px;margin:0 auto;padding:0;list-style:none;height:35px;font-size:0;line-height:0;}

ul.tabs li{display:inline-block;width:33.33%;margin:0;padding:0;height:35px;line-height:35px;background:#050606;overflow:hidden;position:relative;border:0px solid #fff;border-bottom:0;box-sizing:border-box;border-radius:0px 0px 0 0;}

ul.tabs li a{display:block;text-decoration:none;color:#fff;font-size:14px;text-align:center;border:0px solid #fff;box-sizing:border-box;border-radius:0px 0px 0 0;}

ul.tabs li a:hover{background:#d54d52;}

ul.tabs li.activa,ul.tabs li.activa a,ul.tabs li.activa a:hover{color:#fff;font-weight:700;background:#d54d52;}

.contenedor_tab{width:100%;max-width:800px;margin:-1px auto 0;padding:0;background:#fff;border:0px solid #fff;border-top:0;box-sizing:border-box;border-radius:0 0 0px 0px;}

.contenido_tab{padding:10px;font-size:14px;box-sizing:border-box;}

2º En el mismo HTML del blog buscar </head>  y colocar encima el siguiente Skript.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>

<script type='text/javascript'>

$(document).ready(function() {

$(".contenido_tab").hide(); //Ocultar capas

$("ul.tabs li:first").addClass("activa").show(); //Activar primera pestaña

$(".contenido_tab:first").show(); //Mostrar contenido primera pestaña

// Sucesos al hacer click en una pestaña

$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("activa"); //Borrar todas las clases "activa"

$(this).addClass("activa"); //Añadir clase "activa" a la pestaña seleccionada

$(".contenido_tab").hide(); //Ocultar todo el contenido de la pestaña

var activatab = $(this).find("a").attr("href"); //Leer el valor de href para identificar la pestaña activa

$(activatab).fadeIn(); //Visibilidad con efecto fade del contenido activo

return false;

});

});

</script>

Si ya tienen instalado el <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script> pueden eliminar esa parte.

 Ultimo paso para implementar el tabs o pestañas en nuestras entradas y paginas, debemos usar el siguiente código HTML en en la sección Vista HTML.

<ul class="tabs">

<li><a href="#tab1">OPCION  1</a></li>

<li><a href="#tab2">OPCION  2</a></li>

<li><a href="#tab3">OPCION  3</a></li>

</ul>

<div class="contenedor_tab">

<div class="contenido_tab" id="tab1">

CONTENIDO 1

</div>

<div class="contenido_tab" id="tab2">

CONTENIDO 2

</div>

<div class="contenido_tab" id="tab3">

CONTENIDO 3

</div>

</div>

<div style="clear: both;">

</div>