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/AVvXsEhyeO3iVuwUeHr486bF6SaF07EaWwq_gBzx275KP44LTn4oG-o6jpTpV4zBkz9F2x1NkVuK4IaZSflt_Y2_1YbaISscVHqSI23ZiBBPyIBQylp8dFEaD6P_qnxfNuEJmq0LteRIwT0x_CI/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/AVvXsEhfhdpCTlCDZ3oy7Fv2A9N_xrkCQLSZ2MY-8AIt3IOKnH3yhO4VRcpisdI-Yk5EzG341tmp1OpJMnrM0TC-xDCy3oVA6p5X77DJvx4hMRovxS29x4p5Zth29z-N87pyGfU6DZ_xxYmkD0Q/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/AVvXsEjer6PL_MrNO0n_xUaqckLvKmGmz5Br4HOuxkmREDyB8jCD5pAbUFKnCwrn-5uXOPzGoqlqCmx22ah3ubUsa0bOBFznZbly53m81AungCELDMCVPUZh0wsVScIjXw3yAx04XnDwQDOdI2o/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/AVvXsEjIJa9vKrczbZ0N3-mKU_qgTXKCB-XbiaAeBqSWrsMbdEfr1awzmnAliYDRQVJzXYV0gBkn5sRlTDcc8CyOf3RH2Lm3k0LDz46EqthrCDenaKs6bAdI-yXekP3lPs2c8L2I2kA4ROYRk7c/s1600/gadgets+para+blogger.jpg" alt="GADGETS"/></a>

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

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIhortanQYjM4X02V0p6vU8TdwkE8jVhS5aDUITshyphenhyphen6GPkTt863Q7_9LpwlvTQBzIBL3Ar1Oq2RGt0G_TePDfPXehTY7St5L2JnKFMVmzoLr5sePhCvIvxDg6QdxGahTCEZ3TO0AboAsQ/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á :)