Ads Top

SLIDER USANDO

1- En el Escritorio Blogger hacemos clic en Diseño.
2- Hacemos clic en Añadir un Gadget donde queramos poner los anuncios.
3- En la lista seleccionamos HTML / JavaScript 


<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/AVvXsEhS4rPxJfbgUqzL2zcM5SwB_PdAGC7xpgsNmIou9lHm1kORQYsj2ezvV6ZNsGASGly2lu4qh0Y54iMPwyXBDc3SWeDJSBbJnzx6YBUZfgjZS8uyDlTnbwz6_b3zjXWFYhZkKzSLbLy5AHmj/s109-no/ribbon.png) no-repeat;
        z-index: 7;
    }
    #slider {
        width: 500px;
        height: 250px;
        background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0XEKbaD9e19bwYhroOdKHSQM8CuBTfQDGPi4nSoskVBGtEXSyaE6k9GtpYfTpFT0pd_BtBix61zbbo_BB4EcdSYcic_iUSJ95HXf5QmPWj3KWxSPO_hKAx2nacDPqabqG7JbirbXiaid2/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/AVvXsEhH0LaOFIEZ1gUbcZVpQ0Z3xnklxTxr6MiE-lifm_eTrxHnA4cNM9LnVyX9RoAY_C5gaOUuqrM3SqMeyrsgQWiPt1I0ND8CNZDKIVBpoqwO0VIX9Ox2F6aaaT2E9tL_fR2wg6zo-yIbRAE_/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/AVvXsEibsVmA5hAB4WJa8uMlAp3OZua1JuQbqz_AIikJb9quoD7x-TmfWLk4_zcn19sKIIWRwZm5b2qU2BVe1_WLS-ZZwTusJfnqIZ0O4gkW4HZNfGQIVsIZ_4SJ1DczXBVVEdTqX1qHkDAai_ia/w500-h250-no/1.jpg" alt="Slider de Imágenes"/></a>  
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4ccmFsJqhN8lXwhWOj-4atW2BJ6utaXoImcYEFYaEERc-xhhuH9CB0owa8wyB1YMwglCdAckhzFU7oNERWkIm5rqfSldrjgxEM1db7CEroJZMCuIYQB5BI2u58pR1D5mVOvnHAscD41O4/w500-h250-no/2.jpg" alt="Z Blogger"/></a>  
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBu1mPM9D9cxQjcT7Tr8Jpxc-LJv7NJkNI18r6Qyuv17Eekw6xcKzthkwcuIEoiJsnyyMfjoTXeruKXHG5MAFnZnVocq0c39BLzj9DJRazGnns-P1sJ6YGLOyDo3HXbcW821C0BsyjMzSS/w500-h250-no/3.jpg" alt="Hecho con JavaScript"/></a>  
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRi8tZ2ZxYcrlG65nNZIBjRAsHHAZ-vA6B5mAb-G7kUUJSgsklwwBhCQpDb1gOBcFrMh2FZWvpPkPq7ymoSnJPa01z4UApmvi3v2FIXRXIvY7PZ6M5FQTOR8qVGMhHDeM3oG_rCKEW5jGu/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/AVvXsEhM19T9PZe96u73XsbJS81NR-lCfAyoGLcimpUFIoqqH-cGqrb8QBAI3jbpW_yssInxDJoEuyAKDfj5FYkCjUOQikOT3qttM_1UhR3J3gajdxx5CC6GYquxVsumv4qC-C3KsDmDPThxS_Wh/w500-h250-no/5.jpg" alt="http://zblogger.blogspot.com"/></a> 
    </div>
</div>
 
_______________________________________________________________________________________
 


      URL de las imágenes.

      Texto que acompañará a la imagen.

      URL del enlace cuando hacemos clic en la imagen. 
 
PARA CAMBIAS EL TAMAÑO: 

Para cambiar el tamaño tienes que modificar algunos campos de la parte style del código. Fijate en 
sliderFrame, slider y navBulletsWrapper.
 
PARA ELIMINAS EN LETRERO "POPULARES":
 
 
Para eliminas el letrero POPULARES solo tienes que eliminar la parte del código donde dice #ribbon del código CSS. 
Busca la palabra "script" y elimina la línea donde pone id=ribbon, para ser mas especifico elimina la palabra "ribbon", 
entre las comillas, no eliminas las comillas, solo la palabra ribbon.
Con la tecnología de Blogger.