Estas animaciones podrán hacer una mejor presentación de las imágenes que deseas mostrar y que bien podrán servir para enlazarlas a tus entradas que deseas destacar.
El slider además de tener distintas animaciones, puede tener enlaces, descripciones de las fotos y se podrá navegar a través de ellas ya sea con los enlaces Anterior y Siguiente, o con los botones de abajo.
Para agregarlo en tu blog primero descarga este archivo, descomprímelo y sube el archivo descomprimido a un hosting.
Luego entra en Diseño | Edición de HTML y antes de </head> pega lo siguiente:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='URL del archivo js' type='text/javascript'/>
<script>$(document).ready(function() {
$('#CoinSlider').coinslider({
delay: 3000,
hoverPause: false,
navigation: true,
width: 565,
height: 290,
});
});
</script>
Agrega donde se indica en color rojo la URL del archivo que subiste previamente.
Ahora antes de ]]></b:skin> pega estos estilos:
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px;}
El siguiente paso es agregar la estructura del slider, para ello entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí agrega lo siguiente:
<center>
<div id="CoinSlider">
<a href="URL del enlace">
<img src="URL de la imagen"/>
<span>Descripción de la imagen.</span></a>
<a href="URL del enlace"> <img src=URL de la imagen" />
<span>Descripción de la imagen.</span></a>
<a href="URL del enlace"> <img src="URL de la imagen" />
<span>Descripción de la imagen.</span> </a>
<a href="URL del enlace"> <img src="URL de la imagen" />
<span>Descripción de la imagen.</span> </a>
<a href="URL del enlace" ><img src="URL de la imagen" />
<span>Descripción de la imagen.</span></a>
<a href="URL del enlace"> <img src="URL de la imagen" />
<span>Descripción de la imagen.</span></a>
</div></center>
Cambia la URL del enlace y la URL de la imagen donde se indica. De igual forma puedes agregar una pequeña descripción a las fotos si así lo deseas, sino sólo elimina todo esto:
<span>Descripción de la imagen.</span>
Si quieres añadir más imágenes sólo agrega antes del último </div> otro fragmento como este:
<a href="URL del enlace" ><img src="URL de la imagen" />
<span>Descripción de la imagen.</span></a>
En el primer código hay unas opciones que podemos modificar:
delay: 3000, es el tiempo en milisegundos que durará cada imagen.
hoverPause: false, es el control de pausa que aparecerá al pasar el cursor sobre la imagen, con true se activa.
navigation: true, son los enlaces Anterior y Siguiente que aparecen al pasar el cursor, con false se desactivan.
width: 565, es el ancho del contendor.
height: 290, es el alto del contendor.
Si cambias el ancho del contendor también deberás cambiar el ancho en color verde de los estilos (width: 545px) que es el ancho del área de la descripción de las imágenes.
Si deseas cambiar los textos Anterior y Siguiente necesitarás editar el archivo coin-slider.min.js, buscar esas palabras y cambiarlas por otras.
Sin lugar a duda es un slider que no requiere mayor trabajo y que ofrece resultados bastante atractivos que bien podrán darle mayor presentación a tu blog o página Web.
Autor |WorkShop
Publicar un comentario