Coin Slider: Un slider de im?genes con m?ltiples efectos

Coin Slider es un slideshow de fotos hecho con jQuery que a diferencia de otros puede mostrar diversos efectos para las transiciones de las im?genes a?adi�ndole mayor dinamismo a las im?genes.

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() {
$(&#39;#CoinSlider&#39;).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