#SLIDEDOBLOG - Slide Diapo

Oi gente! Esse tutorial é do slide que é usado aqui no blog. Confira abaixo o tutorial.

Diapo by Pixedelic

1) Coloque esse código no seu css.

.pix_diapo {
 background: #ccc; /* ALTERA O FUNDO */
 height: 200px;   /* ALTERA A ALTURA */
 margin: 0 10px;
 overflow: hidden;
 position: relative;
 width: 500px; /* ALTERA A LARGURA */

}
.pix_diapo > div {
 display: none;
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}
#pix_prev, #pix_next {
 cursor: pointer;
 display: block;
 height: 40px;
 margin-top: -20px;
 position: absolute;
 top: 50%;
 width: 40px;
 z-index: 1001;
}
#pix_prev {
 background: url(https://1.bp.blogspot.com/-Al7QbuoAXBk/V93WwGLc0bI/AAAAAAAAA6Q/z-7RPfi4o4g--nVIvazGNXDzxEv44T8agCLcB/s1600/prev.png) no-repeat;
 left: 10px;
}
#pix_next {
 background: url(https://2.bp.blogspot.com/-ayGaSKn5bHM/V93WvsfBbQI/AAAAAAAAA6M/hFZn4UUep2gjJMoya8s7WQ4aEz3W83kWwCLcB/s1600/next.png) no-repeat;
 left: auto!important;
 right: 10px!important;
}


.pix_relativize {
 overflow: hidden;
 position: relative;
}
.imgFake {
 cursor: pointer;
}
.elemHover {
 position: absolute;
}
.caption {
 background: #000; /* ALTERA O FUNDO DA LEGENDA */
        bottom: 20px;
 color: #fff;
 display: block;
 font-size: 13px; /* ALTERA O TAMANHO DA FONTE */
 padding: 15px;
        margin-bottom: -20px;
 width: 500px; /* ALTERA A LARGURA */
        text-transform: uppercase; 
        font-family: 'Arial'; /* ALTERA A FONTE */
}
.ui-loader {
 display: none;
}

2) Coloque os scripts antes da tag < / head>.

<script src='http://static.tumblr.com/wldnpu3/m1lmufnqi/jquery.min.js' type='text/javascript'></script>
<script src='http://static.tumblr.com/wldnpu3/t42mufnr5/jquery.mobile-1.0rc2.customized.js' type='text/javascript'></script>
<script src='http://static.tumblr.com/wldnpu3/uRUmufnrx/jquery.hoverintent.js' type='text/javascript'></script>
<script src='http://static.tumblr.com/utmut0z/YHWniwou8/diapo.js' type='text/javascript'></script>
<script src='http://static.tumblr.com/wldnpu3/Yi4mufnsy/jquery.easing.1.3.js' type='text/javascript'></script>
<script>

$(function(){

 $('.pix_diapo').diapo();

});

</script>

3) Coloque esse código onde quer que apareça o slide.

<div class="pix_diapo">
<div>
<a href="LINK "><img src="LINK DA IMAGEM "/></a>
<div class="elemHover caption fromRight elemToHide"> 
LEGENDA AQUI</div>
</div>