Como poner un Slider de imagenes en Blogger (like putting a slider pictures in blogger)

Como poner un Slider de imágenes chulo con JavaScrip en el Blog

Como poner un Slider de imágenes super chulo que funciona de manera fácil en JavaScrip, con unos efectos de transición muy bonitos.

Podéis añadir este gadget a vuestro blog para mostrar cuales son los post mas leídos ó poner las imágenes que queráis ya que es totalmente personalizable de manera muy fácil.

Se puede cambiar el tamaño, las imágenes, los rótulos etc con un poco de lógica mirando el código.

Como siempre vamos a DISEÑO --> AÑADIR UN GADGET --> Seleccionamos HTML/JavaScrip y en el pegamos el código:

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhogr96l_XFOM8rGs6wPyU_Zf0kvCTt1G0sFaZDmNiwAol16cVuVl1nQZkOf_MfJqhMK1V8sqkOw75_lm3Lcm4dR1xV2GInBrgyDVmnnQ33tUgo29wRcL3Dt4e3zTIYv0vuWwoTLq4RAEW9/s109-no/ribbon.png) no-repeat;
        z-index: 7;
    }
    #slider {
        width: 500px;
        height: 250px;
        background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM_g2zZAzlxZedNqFBIOkR7BjSekuwhl1iT3UXveZ7r2lsJZTk0jih96PRZSYQDNSl_I2Law_sY-hECPzdcWWdB_I8qYAGw1OUD3v1OtBY9GX_LCb_tWv6a69DhaY6GaZ2QhLNdaxFJ7Dd/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/AVvXsEh-WyhmiraMoV7zuf6wlhQhl9kaaoiPXeg1qK6b4HJRaBIvDrWts6STiYpqIc56VAu5G1TJNBwu3vQMRCabcQU7H9Ks8B_8MU0xMxIRCp7v3jrWMxKuM34OgxElDMjfCwLw01Mk-YFF21zK/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="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidYkvHLAhOV-RpVpKXm3hJy2JdQRDLmCcgswcBoxsB-GEgLalPkh7DMqoMsckOtVkXS9c5obhBnwAtwGZaShXUTqhzPgWSuQ9-tn-Xo4WU-gEWk0DB6GzU8w3REKEEneIarZtC4PIwomvy/w500-h250-no/1.jpg" alt="Slider de Imágenes"/></a>  
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTehWRvE14xDHEgpHiJ7_SR9emQgEEk49-Pdu-2FdegnCv1d6EKtVzEZ3u7N3YbvmwA-4J4j7L9wr6jWcyYHAmaMKi_5MXvQjZ2DjKK2KxKnocIR4wZk63LS-m-7oSlJbfN2KhT13hyphenhyphenNoK/w500-h250-no/2.jpg" alt="Texto"/></a>  
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1jfTyPoqul9GjhUVMfyf9Gj4GKAPvvOc_A_ZtaNxYh0PMMNfdVrSCt6R1N_uVtjCC5DrVpBHGg80VyR0rfaNQ2eEbCbNJxD1V3G4ErvbQpCxOX1cfxjKZ0XBHKNPIdWSacHoAZ38SvHHy/w500-h250-no/3.jpg" alt="Hecho con JavaScript"/></a>  
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQGZUFc6WAscW8_xiMLTrmcjS6jzoV5KSkOyQXcSgZ5M7V1WgVqNuJgTivMrLl9dvKe-gLla6afC2Shng-GV7c3bNy1pnXBP3Nm6BOTaM_OSAtbUFIz57zRUQkMQFC7hoOXrVpOAHuOj6I/w500-h250-no/4.jpg" alt="Aquí puedes poner el texto que quieras"/></a>  
<a href="http://zblogger.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL-gsWM331AJnGi4N3S1nVi5kr1GE3-ZLxkJWtxEGMgU6c6ptFRDd07Z0em-jmRCgR-czE8fbHup5EQbveJhg5qyIIOY6WgPftBtNkjfZrLAkoyUJTMiz1hiEi7S-IjW6l3naUrnOAmStl/w500-h250-no/5.jpg" alt="texto"/></a> 
    </div>
</div>

En dicho código tenemos que modificar:

      URL de las imágenes.
      Texto que acompañará a la imagen.
      URL del enlace cuando hacemos clic en la imagen. 




NOTA: Las imágenes tienen que ser todas del mismo tamaño. Tamaño recomendado 500px x 250px



Para quitar la cinta que dice populares de las imagenes hay que eliminar la linea que os pongo en rojo negrita que esta mas arriba donde dice ribbon.