Slider de imágenes en la cabecera del blog (slider pictures in the blog header)

Slider de imágenes en la cabecera del Blog.

Lo primero que hay que hacer es una copia de nuestro blog por si no sale todo como queremos ó tener un blog de prueba para poder hacer ahí nuestros experimentos.

Lo siguiente es desbloquear en blogger la parte de la cabecera que viene por defecto bloqueada, de esta manera nos permitirá poner dicho gadget donde queremos.

Para esto hay que tocar el código HTML y luego poner el gadget, pero como veremos es sencillo de realizar.

A continuación vamos a plantilla --> editar HTML y buscamos  con ctrl+F el código 'header o header-inner-wrap' 

una vez localizado donde pone maxwidgets='1' showaddelements='no'

podemos hacer dos cosas: borrar solo donde dice

            maxwidgets='1' showaddelements='no' 

solamente eso y nada más o cambiar donde dice 'no' por 'yes' que también debería de funcionar, os quedará como en la imagen.

Al quitar ese código os aparecerá un gadget en el Header que ya nos permitirá añadir el código que os dejo a continuación:

<style type="text/css">

    #mcis {

        display: none;

    }

    #sliderFrame {

        position: relative;

        width: 1200px;

        margin: 0 auto;

        margin-bottom:35px;

        border:5px solid #000;

    }

    #ribbon {

        width: 1200px;

        height: 500px;

        position: absolute;

        top: -4px;

        left: -4px;

        background: url(imagen que debera ser en png - ) no-repeat;

        z-index: 7;

    }

    #slider {

        width: 1200px;

        height: 500px;

        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:400px;

        left: 500px;

        width: 1200px;

        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="URL DE ENLACE"><img src="URL DE LA IMAGEN" alt="TEXTO QUE QUIERAS PONER" /></a>  

<a href="URL DE ENLACE"><img src="URL DE LA IMAGEN" alt="TEXTO QUE QUIERAS PONER"/></a>  

<a href="URL DE ENLACE"><img src="URL DE LA IMAGEN" alt="TEXTO QUE QUIERAS PONER"/></a>  

<a href="URL DE ENLACE"><img src="URL DE LA IMAGEN" alt="TEXTO QUE QUIERAS PONER"/></a>  

<a href="URL DE ENLACE"><img src="URL DE LA IMAGEN" alt="TEXTO QUE QUIERAS PONER"/></a>   

    </div>

</div>

Para adaptar el tamaño a vuestro blog tendréis que cambiar donde pone 1200px y 500px al principio del código por el tamaño que vayais a necesitar en el blog.

Las imagenes que pongáis las tenéis que subir a la red (dropbox,one drive, etc) y donde dice url de la imagen ponéis la correspondiente (botón derecho encima de la imagen --copiar enlace publico  y la pegáis en URL de la imagen).