Buscar

sábado, 28 de marzo de 2015

Hacer un slider de imagenes


Disfruta de nuestras recetas
Hola os vengo a hacer un post que me ha pedido una de las integrantes de la asociación, aunque de todas formas os valdrá para todos los que queráis, el slider que os voy hacer son para fotos de 1200x500 px, si queréis cambiar el tamaño deberéis cambiar algunas cosas vosotros mismos, yo os digo que es complicado pero podéis hacerlo lo que tenéis en cuenta es que si cambiáis el tamaño deberéis cambiar todo e incluso los botones, yo que lo personalicé os diré que me costo mucho lo que queremos hacer es algo como esto.





Postres Riquisimos Primeros platose

   como veis se sale del blog pero es como yo se lo hice a mi amiga, aquí no queda bien,

     Lo primero que debéis conocer o saber es poderlo poner en la cabecera debajo o encima de la misma normalmente no se puede hay que tocar el html donde aquí os lo digo:

  • Primero de todo crear una copia de seguridad del blog, para no meter la pata o coger el BLOG DE PRUEBA del que he hablado alguna vez.
  • Si veis en la imagen siguiente, los gadchet que tiene mi blog no puedo poner el slider lo que voy hacer es tocar el html para poder meter un gadchet ahi.



  • Vamos a Editar en html, y deberéis buscar lo siguiente:"header-wrapper" o "header" para encontrarlo le dais a ctrl+f y veréis lo siguiente o algo parecido.



     lo que deberéis borrar es Maxwidgets='1' showaddelemente='no'  no ocurre nada lo único que le estas indicando que debe dejar poner gadget, esto viene bien por si alguna de las plantilla no os dejan poner gadget buscar el gadget que no os deja poner y quitar esas mismas cosas . Viene muy bien para poner el gadchet de paginas por ejemplo encima de la cabecera.

     Al quitar esos comandos os saldrá algo como esto

  • Y ahora lo que os recomiendo es que vayáis al blog de notas del ordenador y allí copies los siguientes códigos y hagáis los cambios allí, yo es lo que hago sobre todo si queréis modificarlo.


<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 - es lo que pone recetas del mes) no-repeat;
        z-index: 7;
    }
    #slider {
        width: 1200px;
        height: 500px;
        background: #fff url(https://lh6.googleusercontent.com/-V7xLkgfh1O8/Ufo_dpsg85I/AAAAAAAABF0/pFT5oNtt_2w/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://lh6.googleusercontent.com/-PrCS8GOrP-s/Ufo5rj88CbI/AAAAAAAABEk/mLp19FTjxQI/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>

      Si por ejemplo no queréis enlazar a ningun sitio poner "#"

  • Cuando cambies los datos, añadir un gadchet para html , colocarlo donde queráis ponerlo y voilá ya esta.
    Si alguien tiene dudas avisarme por Whatsap o Facebook.

1 comentario:

  1. Hola!
    Acabo de encontrar este tutorial.
    Podrías explicar que se debe cambiar?

    Gracias.

    ResponderEliminar

Gracias por pasarte, comentar y unirte.
Nuestro mail es asociacion.bloguer@gmail.com