CONTROL DESLIZANTE CON JAVASCRIPT PARA BLOGGER

CONTROL DESLIZANTE CON JAVASCRIPT PARA BLOGGER .

Hoy estoy compartiendo otro control deslizante que funciona con JavaScript y no se necesita jQuery y se necesita flash.

Este control deslizante contiene una cinta en la esquina superior izquierda del control deslizante y se denomina "What's Hot"; también contiene un hermoso efecto de corte que rebana la imagen en 12 partes, estas características principales aumentan la belleza del control deslizante.

Otra gran característica de este control deslizante es que es altamente personalizable para que lo edites como desees y que se adapte perfectamente a tu blog.

 Este control deslizante está creado por menucool.com  y He creado una versión para blogger de este control deslizante que funciona perfectamente con el blog de blogger.



Vea la demostración del control deslizante haciendo clic en el botón de demostración a continuación:

¿Cómo agregar este control deslizante a Blogger?

Ir al Panel de Blogger> Diseño

Haga clic en Agregar un gadget

Seleccione HTML / JavaScript (debajo del encabezado)

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/AVvXsEgLjJsiczHrenD2gQWH8xwA5-Ir3caKXGj2CEEJZWKx49tpx2ixJP8YuiP7k9j0wagyvSclZ07oxT4ptPiRE5lRKOPPKeDeXi9Y1-kA25wb_5puP1rSZ_nqiPQR-hHqYS1R0CgzJLDv2f0/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/AVvXsEjo9HmbgD3M1qU4zerww3ccFmukHig9xr5FGDfs9QkGdtykYRezBL5cNMUo4TTjtaDAkKmE-vbKaixEdu61u2-ClmzE3BVOEzLhVhPVNEwk8lSErQCLOPcxXE658Wtn4HRYaF8N5yymGQc/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/AVvXsEjoE4iwUjTdSh9qRiCs2Bas27ElBTC25kro79cYVWaE-jp9UnLxEABxPZhwpxmCefa_ExrCG5IyboLnM1Cc3CgmBJjXZn-EOHStWbRRth6Ugdb1mrMHEW1If-H9BHfwhnv3qjAGSbG_tGs/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://helperblogger.ucoz.com/demo/js-slider/js-image-slider.js" type="text/javascript"></script>

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

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Título de imagen"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt=""/></a>"Título de imagen"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="Título de imagen"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="Título de imagen."/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="Título de imagen"/></a>
                </div></div>

Nota importante: antes de agregar imágenes al control deslizante, cambie el tamaño de todas ellas al mismo tamaño.

Información de códigos de color -

 width: 500px; - Ancho 

del control deslizante Establezca el ancho del control deslizante de acuerdo con el ancho de su imagen, también use las imágenes del mismo ancho y la misma altura.

height: 218px; - Altura

del control deslizante Establezca la altura del control deslizante de acuerdo con la altura de las imágenes, también use imágenes del mismo ancho y alto.

     - URL de imagen:<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg"

Reemplace todas las URL de imagen resaltadas con su propia URL de imágenes.

     - Título de imagen

Aquí puede agregar su título de imagen.

  "#"   - Enlace a la imagen

Si desea agregar un enlace a la imagen, reemplace # con su propia URL de imagen.

Fecha de la Publicación; 19-01-2019

 Fuente; helperblogger  

 Publicado por;