IMAGENES DESLIZANTES PARA BLOGGER

Hoy voy a compartir otro un post que funciona con JavaScript y jQuery .Este contiene una cinta en la esquina superior izquierda del control deslizante y es nombrado como "Whats Hot" . Ademas es

altamente personalizable, de modo que para modificarlo a su gusto y  se adapte a su blogger.Espero te sea util este tutorial dde como implmentar una imagenes deslizantes en tu blogger.

puedes ver el demo abajo

Demostración deslizante

Cómo Agregar a Blogger?

1. Vaya a Escritorio de Blogger> Diseño
2. Haga clic en Añadir un gadget
3. Seleccione HTML / JavaScript (por debajo de cabecera)
4. Pegue el código en su interior,

<style type="text/css">

 /* JavaScript Image Slider By http://www.helperblogger.com/ */

#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 500px;
 margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK3DclAIKlrsNhdxKufQ7neKuoxQxDtmhumlqlMnJUb7OBeab4i48Xh-kiqxMxdTNsgTlobCx7E1TRdy6lo1hC4ilV_s-x5wo8qJawPs7OXN5C941V-TVoeP7USq50BQzZueBzqJ0SMXA/s1600/helperblogger.com-ribbon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 500px;
 height: 218px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxtpQTrHL7ng8e1FVyjnuQ2VA1B5fhzdwuQMhQRrj-HGi1J0vMr9Xb_3dkRDQ2HrziV0UO8fH38UcFTprGlLtNIMc9NNNPXmB_I3l95io5wumE80o-57h6Vl9NUwW0Pf5oCzTD7oeBKLs/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}

#slider img {
 position: absolute;
 border: none;
 display: none;
}

#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}

div.mc-caption-bg {
 background-color: black;
}

div.mc-caption {
 font: bold 14px/20px Arial;
 color: #EEE;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}

div.mc-caption a {
 color: #FB0;
}

div.mc-caption a:hover {
 color: #DA0;
}

div.navBulletsWrapper {
 top: 250px;
 left: 190px;
 width: 150px;
 background: none;
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Q7E6mHs1lSJzqmSw2Lge6SieIyZppILXVyY9RnkGuNZeYBhUTxgjcE4-WNYc1KtA9IqUvrLYljpD3uk3Xq1GTYXypUsBpBaC3hYJHm2erv3FVpoLxuGsFS5D9LOvA0MgK-MhauUGCmU/s1600/helperblogger.com-bullet.png) no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-right: 11px;
 _position: relative;
}

div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}

#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style> 

<script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script>

<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjor4MHhgqOf4yKGG8NMUjUICdtOe5jXmeY_r05NxFIht8EKhr-neiWVUVZKRc-iobghj6zzwRhijEPzrXqB0JEPA0f1VnemoVhmpO0GM0we0kPkgFEJ_zHhIkhgHL_JD5y1IJaA6V3PyU/s1600/gadgets+para+blogger.jpg" alt="GADGETS"/></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_oJo8DqptWAx70KSeynhyHyTAoqSUKSIUg-8Q2ERMLJmECrwuQfwpQ8LqWtqykuiOtsHl4WbNS9YfM6U6lwtkr9OU3ityw2-p6DXhZctPdzL4i_jvMLz2zxwgrLPm3b3buLiiTHYcXG0/s1600/tutoriales+blogger.png" alt=""/>TUTORIALES BLOGGER</a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX63EtkbAdn0Vv0kxDBWmR0YSoXpcMpoJsEYm19zC8kTKDO5opN0o0CYHV5-1SCMeoraqV0PvTkmU6liViNr05cUlYCYiOsHm5RrDbI6IrfhnQiR4qPsW-kpu9RItGg0qYeULKd7M2BAw/s1600/SEO-para-Blogger_thumb1.jpg" alt="SEO BLOGGER"/></a>
 </div></div>

Nota Importante - Antes de agregar imágenes para redimensionar el control deslizante dele a  ellos el mismo tamaño. 

INFORMACION DE LOS COLORES -

      - Ancho del deslizador

Establecer el ancho del cursor según el ancho de la imagen también DEBES las imágenes de la misma anchura y altura mismos.

     - Altura del deslizador

Ajuste la altura del cursor de acuerdo a la altura de las imágenes DEBES las imágenes de la misma anchura y altura mismos.

     - URL de la imagen

Reemplazar todo URL de la imagen resaltada con la URL de su propia imagen.

     - Pie de foto

Aquí usted puede agregar su leyenda .

     - Enlace a ...

Si desea agregar un vínculo a la imagen a continuación, sustituir # con la URL de su propia imagen.

Por último guardar todos los cambios y ya está :)