Slider de imagenes con Javascript.

Hay diversos Slider de Imágenes que podemos encontrar en la red, pero casi no encontramos uno que se adapte perfectamente a el diseño de nuestro blog. Los Slider generalmente se usan para hacer saber a los lectores cuales son los artículos más leídos, más comentados, entre otros.

El Slider que hoy compartiré con ustedes, tiene un fabuloso efecto de transicion logrado con javascript y en la parte superior de la izquierda se puede observar un banda con el texto "Populares".

Para agregarlo en nuestro blog nos dirigimos a Diseño, Añadir Gadget, HTML/Javascript, y pegamos:

 <style type="text/css">
    #mcis {
        display: none;
    }
    #sliderFrame {
        position: relative;
        width: 500px;
        margin: 0 auto;
        margin-bottom:35px;
        border:5px solid #000;
    }
    #ribbon {
        width: 111px;
        height: 111px;
        position: absolute;
        top: -4px;
        left: -4px;
        background: url(https://sites.google.com/site/novedadblogger/home/Populares.png) no-repeat;
        z-index: 7;
    }
    #slider {
        width: 500px;
        height: 250px;
        background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTUpD__xwbPqdXuF-X3u2ZlEEeB0p5ZMQe1POYfjGl0WDHaxP8750-esZrKkraPEQ1gvAcnBPNMJTXBSVM4NOv4j13kWxio2zJunfvSsyBw4JpuM4GTFiQqzVsxVodILdcMfP9eKBt6ggP/s32-no/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: 265px;
        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/AVvXsEgEeLyyxffPteB1JM5uAM2gwLLfEHZEVqj3auUsWYVS7a9UVCh0y5t5I6NAGqrOxKpDRV587aCwglwg_-6qkieKVwKx25uibzGRzRhzALjSlR1ceRY7kBsWuWDMUGeZ0vHa5R_QxpUTagmf/w11-h22-no/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="https://googledrive.com/host/0B-WopI-jeOOsT1NPRC1acHpxWmc/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
    <div id="ribbon"></div>
    <div id="slider"> 
<a href="#-1"><img src="URL-IMG-1" alt="TEXTO 1"/></a>  
<a href="#-2"><img src="URL-IMG-2" alt="TEXTO 2"/></a>  
<a href="#-3"><img src="URL-IMG-3" alt="TEXTO 3"/></a>  
<a href="#-4"><img src="URL-IMG-4" alt="TEXTO 4"/></a>  
<a href="#-5"><img src="URL-IMG-5" alt="TEXTO 5"/></a> 
    </div>
</div>

Cambia lo resaltado de colores por la URL y texto que indica.

Vía Helper Blogger