CARRUSEL DE IMÁGENES PARA BLOGGER CON JQUERY

CARRUSEL DE IMÁGENES PARA BLOGGER CON JQUERY .

Vamos a ver como crear un carrusel de imagenes con enlaces, creado con CSS y JQuery, que le da un toque especial de animacion. 

¿Para que nos puede servir? Por ejemplo para enlazar blogs o webs amigas, secciones del blog o incluso a modo de menu.

Para añadirlo en tu blog o web, tienes que ir a la plantilla y antes de </head>, pones el siguiente codigo con los scripts y los estilos

Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:

 Un clic en “Plantilla”

 Un clic en “Editar HTML”

 Ahora se te abrirá el Editor HTML de tu plantilla

En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,

debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

  Busca el siguiente código

</head>

Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:

<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script src="https://www.cubby.com/p/ccccb132e8c145c697c06fc9ef44b317/jquery.jcarousel.min.js" type="text/javascript">
</script>
<script src="https://www.cubby.com/p/f48ef5f2671f4d6390d5cfda6a456b10/jquery.jcarousel.js" type="text/javascript">
</script>
<style>
.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
   border-radius: 10px;
    background: #F0F6F9;

}

.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
   width:425px;
    padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  425px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 245px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
    margin-left: 10px;
    margin-right: 0;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
*  Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP3b3dlMGHqhEbzWAnAVqzHOixjuPk420rIMPN3CuqU4pUOaYwPtZisC92R73nDpK9h1D7ilhyphenhyphenDGMWT24bZCs2s9T5yUPSpA5lHkyqGZ9UEPIK5HtiTVhVTwFdmhzEB2sYB8x-f23ETFw/s128/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0zJyx29A6FiAdFytsuJiPst-3eMfXbHDkrJ_QmgLSwPGeRV6w9jm3SXc0iuesKAQ7e37afooHNEryFruiOuyjV2v2iSK7e5xeX3fuza0MQGi6XaQAwaUF02opWfKJKi2Cwqo6fh2b8DM/s128/prev-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0zJyx29A6FiAdFytsuJiPst-3eMfXbHDkrJ_QmgLSwPGeRV6w9jm3SXc0iuesKAQ7e37afooHNEryFruiOuyjV2v2iSK7e5xeX3fuza0MQGi6XaQAwaUF02opWfKJKi2Cwqo6fh2b8DM/s128/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP3b3dlMGHqhEbzWAnAVqzHOixjuPk420rIMPN3CuqU4pUOaYwPtZisC92R73nDpK9h1D7ilhyphenhyphenDGMWT24bZCs2s9T5yUPSpA5lHkyqGZ9UEPIK5HtiTVhVTwFdmhzEB2sYB8x-f23ETFw/s128/next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

/**
*  Vertical Buttons
*/
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP3b3dlMGHqhEbzWAnAVqzHOixjuPk420rIMPN3CuqU4pUOaYwPtZisC92R73nDpK9h1D7ilhyphenhyphenDGMWT24bZCs2s9T5yUPSpA5lHkyqGZ9UEPIK5HtiTVhVTwFdmhzEB2sYB8x-f23ETFw/s128/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-vertical:focus {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0zJyx29A6FiAdFytsuJiPst-3eMfXbHDkrJ_QmgLSwPGeRV6w9jm3SXc0iuesKAQ7e37afooHNEryFruiOuyjV2v2iSK7e5xeX3fuza0MQGi6XaQAwaUF02opWfKJKi2Cwqo6fh2b8DM/s128/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-vertical:focus {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}
</style>

Una vez hecho esto, alli donde quieras mostrar el carrusel, añades el siguiente codigo.



 Un clic en “Diseño”

 Clic en “Añadir un gadget”

 Busca el widget que dice “HTML-Javascript” y ábrelo

 Coloca el siguiente codigo en el interior

<center><ul class="jcarousel-skin-tango" id="mycarousel">
<li><a href="URL ENLACE" target="_blank"><img height="75" src="URL IMAGEN" width="75" /></a></li>
<li><a href="URL ENLACE" target="_blank"><img height="75" src="URL IMAGEN" width="75" /></a></li>
<li><a href="URL ENLACE" target="_blank"><img height="75" src="URL IMAGEN" width="75" /></a></li>
<li><a href="URL ENLACE" target="_blank"><img height="75" src="URL IMAGEN" width="75" /></a></li>
<li><a href="URL ENLACE" target="_blank"><img height="75" src="URL IMAGEN" width="75" /></a></li>
</ul></center>

 Donde esta indicado en color rojo, pones las urls de los enlaces y de las imagenes.

 Si quieres poner mas cantidad de imagenes, añades la linea :

<li><a href="URL ENLACE" target="_blank"><img height="75" src="URL DE LA IMAGEN" width="75" /></a></li>

tantas veces como quieras.

Para instalarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:

Después de haber insertado el código, un clic en  "Guardar"

 Data de la Publicación; 02-09-2019

 Fuente; redeando

 Publicado por;