La diapositiva de imágenes es muy útil para el SEO, porque se colocan en un área del sitio web, o publicación de entradas del Blog; ya que no sobrecargar el sitio web, porque se basa en código solo (html, css, js), y las imágenes (jpg, png, gif) están cargadas en una carpeta en el directorio del dominio, por lo que el peso de las imágenes se encuentra en el directorio y no en el Blog / Sitio Web.
AVISO: Requiere Iframe | Ver Último Punto | #5
Código / Usuario Avanzado
See the Pen Diapositiva Imágen se Desvanece by Nolan Luna (@enlineaweb) on CodePen.
Explicación / Principiante
Usuarios avanzados saltar al Punto 3.
Sigue ésta guía para crear la diapositiva de imágenes y que se desvanecen.
Requiere Host Web
Paso 1 / Guardar Archivo de Imágenes (jpg, png, gif)
_ Entra en el servidor como Cpanel
_ Entra en el directorio del dominio (public_html).
Aunque se puede guardar contendio fuera de public_html, es preferible guardar cada contenido en carpetas del dominio que pertenece, porque se pierde el orden, ligando el contenido de un dominio con otro. Sin embargo, si el dominio está fuera de public_html (esto es luego de la barra /dominio), se guarda el contenido ahi de forma correcta.
_ Crea una Nueva Carpeta (eje., imágen, galería, img, etc.). Esta es la carpeta Base de ese tema de contenido, y puede ser en letras mayúsculas (IMAGEN / GALERIA / IMG)
_ Crea una Sub-Carpeta (ejemplo-imagenes-diapositiva), así organiza cada contenido por nombre, en la carpeta Base. A partir de aquí (Sub-Carpetas) el nombre es en minúsculas.
_ De igual forma, crea una carpeta en la PC / Computador (ejemplo-imagenes-diapositiva), también para guardar y ordenar las imágenes.
_ Sube las imágenes que van en la Diapositiva. Se deben cambiar (si no lo tienen), los nombres de cada archivo, por números, para organizar una lista, para facilitar crear el Código Web del Diapositiva.
NOTA: Todos los archivos deben estar organizados por Carpeta y Extensión (jpg, png, gif…), para evitar inconvenientes y un mejor orden.
Paso 2 / Crear Archivo de Solo Texto de las Imágenes / TXT
_ Abre un nuevo archivo de solo texto / Bloc de Notas
_ Ubica el enlace del primer archivo, pegar el Dominio, y escribir luego de la barra /.
Ejemplo
https://recursosdiario.com/GALERIA/diapositiva-ejemplo/001.jpg_ A partir de éste primer enlace, se generan todos los demás archivos de imágen siguiente, copiando y pegando en una lista, en el código de la Diapositiva, y solo cambiando el número (001, 002, 003, etc.).
_ Genera el primer código de imágen, así:
<img class="mySlides w3-animate-opacity" src="https://recursosdiario.com/GALERIA/diapositiva-ejemplo/001.jpg" style="width:100%">_ Luego crea la lista de códigos de imágenes, así:
<img class="mySlides w3-animate-opacity" src="https://recursosdiario.com/GALERIA/diapositiva-ejemplo/001.jpg" style="width:100%">
<img class="mySlides w3-animate-opacity" src="https://recursosdiario.com/GALERIA/diapositiva-ejemplo/002.jpg" style="width:100%">
<img class="mySlides w3-animate-opacity" src="https://recursosdiario.com/GALERIA/diapositiva-ejemplo/003.jpg" style="width:100%">
<img class="mySlides w3-animate-opacity" src="https://recursosdiario.com/GALERIA/diapositiva-ejemplo/004.jpg" style="width:100%">
<img class="mySlides w3-animate-opacity" src="https://recursosdiario.com/GALERIA/diapositiva-ejemplo/005.jpg" style="width:100%">Pega esta Lista, entre la etiqueta del código de Diapositiva en el punto siguiente.
Punto 3 / Código Básico de Imágenes en Diapositiva se Desvanece
Tienes 3 Opciones (TXT / WEB / RTF) para obtener éste código:
A _ TXT / Desde este Enlace / Copia el código completo básico en sólo Texto / TXT / y Guardar en con Bloc de Notas / y Luego Guardar como Archivo Web / _ Requiere ver Guía / Como Guardar un Archivo de Código Web.
_ Código Básico de Imágen en Diapositiva se Desvanece / TXT
B _ WEB / Abre el Siguiente Archivo HTML Web en el Navegador / Clic izquierdo / Ver Código Fuente / Copia el código completo / Guardar como Archivo HTML Web /
_ Requiere ver Guía / Como Guardar un Archivo de Código Web.
_ Código Básico de Imágen en Diapositiva se Desvanece / Web
C _ RTF / Descarga este Aechivo de solo texto / RTF / Crea y guarda un nuevo documento de solo texto / TXT / Guardar como Archivo Web / Y subir al servidor / _ Requiere ver Guía / Como Guardar un Archivo de Código Web.
_ Código Básico de Imágen en Diapositiva se Desvanece / RTF
NOTA: Archivos RTF requieren guardar abriendo la aplicación de escritorio directamente (Wordpad), porque guardando desde el Bloc de Notas (TXT), se daña cuando se sube al servidor.
Punto 4 / Configurar Diapositiva
_ Abre el código en Archivo de Solo Texto (Bloc de Notas / TXT)
_ Pegar Lista de Imágen / Punto anterior explicado
_ Cambia el tamaño (500px) de todas las imágenes, con la siguiente variante:
SI Puede Cambiar
style=»max-width:500px
_ No es necesario cambiar el tamaño de las imágenes una por una.
NO Requiere Cambiar
style=»width:100%
_ Cambia la transición (7000) en segundos de cada imágen, con ésta variante:
setTimeout(carousel, 7000);
_ Agregar solo los números de cada imágen en orden, en éstas 3 variantes:
function random(/001.jpg, /002.jpg, /003.jpg, /004.jpg, /005.jpg) {
return /001.jpg, /002.jpg, /003.jpg, /004.jpg, /005.jpg;
}
document.getElementById("random").innerHTML = Math.random(/001.jpg, /002.jpg, /003.jpg, /004.jpg, /005.jpg);AVISO: En ningún fragmento de código (html, java, css, php…) / No Cambiar / No Modificar / No Agregar / No Quitar / Ningún Símbolo / Signo (,) / Dejar Igual / Porque Se Daña la Función Completa / Solo Modificar lo que se Pide / En Este Caso Agregar los Números y en Orden de las Imágenes.
_ Por último, en el siguiente código <base>, ubicado entre la etiqueta <head> </head>, y en conjunto con las etiquetas <meta>; cambia la URL, por la ubicación de la carpeta de imágenes (No es la Carpeta del Código Web). No es muy relevante, pero ayuda a leer donde está la carpeta con las imágenes de la galería en el directorio.
<base href="https://recursosdiario.com/GALERIA/diapositiva-ejemplo/" target="none" id="banner-load">_ Los demás códigos dejar todo igual
_ Subir Archivo HTML Web al Servidor / web.html
_ Prueba el enlace en el navegador
https://recursosdiario.com/CODIGO/FUNCION/diapositiva-imagen-desvanece/web.html
Paso 5 / Iframe
_ Para no dañar la Plantilla del Sitio Web, debemos crear un Iframe, esto es con el siguiente código, pegando la URL del Archivo Web HTML de Diapositiva.
_ Cambia el tamaño a Opción del tamaño de la imágen / Para Blog 500 px de Ancho Recomendado y el Ancho a Proporción.
_ Título dejar igual.
<iframe src='https://recursosdiario.com/CODIGO/FUNCION/diapositiva-imagen-desvanece/web.html' height='800' width='800' title='Diapositiva Imágen se Desvanece'>
</iframe>_ Pega éste Iframe en el área deseada del Sitio Web o Blog, mediante un widget de código HTML
AVISO: Estas 2 palabras / height (alto) / width (ancho) / que indican el tamaño del elemento (cuadro) en el Iframe; puede generar errores de tamaño, ya que terminan con letras similares, pero no (ht / th).
Listo !
Tema Relacionado
Como Agrego Contenido Multimedia Gratis en mi Sitio Web y Blog -pendiente-
