Slide de imagens com JQuery

Por conta especialmente do pedido da Dalva do blog Garota Sentimento, hoje vou lhes ensinar a fazer esse slide de imagens igual o quê uso na página principal do blog. Aprendi a fazer esse slide no Trechy Teen. E deu um bom trabalho para fazer ele, por isso fiquei alguns dias sem postar.

» Aconselho que antes de fazer esse tutorial copiei todo o html do seu blog e cole no bloco de notas do seu computador para, caso algo dê errado, você posso colocar o html antigo de volta. E faça o tutorial calmamente prestando atenção em cada passo, pois é um tutorial muito comprido «

     Abra o seu painel do blogger e vá em Modelo (na antiga interface chamado de  Design), clique em editar html e depois marque a caixinha expandir modelos de widgets. Quando carregar aperte Ctrl + F e procure por </head> e colo logo abaixo o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]-->
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#featured&#39;).orbit({
advanceSpeed: 5000,
&#39;bullets&#39;: true,
&#39;timer&#39; : true,
&#39;animation&#39; : &#39;horizontal-slide&#39;
});
});
</script>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Orbit Plugin 1.1
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
//]]>
</script>

     Agora aperte novamente Ctrl + F, mas dessa vez procure por ]]></b:skin> e logo acima cole o seguinte código:

/* ORBIT SLIDER
----------------------------------------------- */
#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
>}
div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}
div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}
span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5a60myLzfaJKdGgbEUwuO7WN0Kg0b7rtMYXFcA2WzbB9WLm6r4z1OdJVtYeu1YudcKvAYSWrAC2zwuVNEUB9ZgXCLimzewM1vDzRvQbzebCd6Snu7ziZVmioFx-3Lx0fvysPAvwuBhgOT/s1600/rotator-black.png);
background-repeat: no-repeat;
z-index: 3;
}
span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}
span.rotator.move {left: 0;}
span.mask.move { '
width: 40px;
left: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9UflvvH3Wx-1VoVBhAvc_iMqn2FibDLgsEZpnAwpTYBoYPdBbI2E9vUUoqjugku8sJ8kV4f7OEBKrevTMsXXY-m6dIjQTPALGHTRQ52meZB5q8B8x3P-1P5JsoKRcBe2uisoBTvsuZ_bZ/s1600/timer-black.png);
background-repeat: repeat;
background-position: 0px 0px;
}
span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmGViOce2vTipXg1-DKkdyAZ3UKzrc5OqsGjyH9VAyw1Pc7q_6JIYqwAx1Rgur_J-7lCZ06jiZBfhNLD8TwTvjVeYZAQVuDtw4u9ZhT1M4AWSVhMs_gnDYkOI1fqUKVk_-3SJ8txa8TPoo/s1600/pause-black.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}
div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }
div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}
div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8); '
margin: 0;
}
.orbit-caption { display: none; }
div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}
div.slider-nav span.right {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_md8XYY-6PD2I7FV_2Y32IYHOVFjPy240x2cbFcvPcpqjmuRyw48NgKIxrATuDha3eUZT2tMWwpwlkB-MpO7uQCi-ksI7uZ9ZBPUfVgoFdDAHCdCynS_56WwrA3yYI05G-EYT6J9q-cKS/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj-h2op5k-E-GOwg_dcZd8PPMMcK1KhJ_2CJureFRPRTm7Z4SRxjLB20E3u8oC7bLV7D22STfOTbEff6WDfx-s9X49u0OWZtuVwmTqlnFSlggZCO-3N5c23sjj7DRjFijqB0dlv-P_39P-/s1600/left-arrow.png);
left: 10px;
}
.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}
.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0oFkL8Sv8ii1hmMJAH4aB9V7gPH2hk7AEoZKlBgOQsaJCjNhObR9vWwmzJDrMTxAM770zW0qBs66Ddc_2ukhHzWYpMuCQ5TYa1hZ9EFH_Y8zf4IFj_BI4ZfMAFnzY3IMLqHC4KeBrV6aY/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}
.orbit-bullets li.active { color: #222; background-position: -7px 0; }

Personalização
     Você pode deixar o slide do jeito mesmo que está ai, mas se você quiser dar uma personalizada pode trocar ou remover as imagens de passagem do tempo, aquelas bolinhas que mostram quantos slides tem e em qual está e as setas que mudam de um slide para o outro. Para isso você vai ter que olhar imagem por imagem que há no código que você vai querer modificar, então vamos uma por uma:

  Imagem de transição do tempo
     Essas imagens estão representadas no código com as seguintes urls:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5a60myLzfaJKdGgbEUwuO7WN0Kg0b7rtMYXFcA2WzbB9WLm6r4z1OdJVtYeu1YudcKvAYSWrAC2zwuVNEUB9ZgXCLimzewM1vDzRvQbzebCd6Snu7ziZVmioFx-3Lx0fvysPAvwuBhgOT/s1600/rotator-black.png (metade da esquerda)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9UflvvH3Wx-1VoVBhAvc_iMqn2FibDLgsEZpnAwpTYBoYPdBbI2E9vUUoqjugku8sJ8kV4f7OEBKrevTMsXXY-m6dIjQTPALGHTRQ52meZB5q8B8x3P-1P5JsoKRcBe2uisoBTvsuZ_bZ/s1600/timer-black.png (metade da direita)

     Localize as urls no código para modificar as imagens. Se você quiser substituí-las então faça imagens semelhantes e de mesmo tamanho, hospede em um site de hospedagem de imagens como esse e troca as urls. Eu tirei essa imagem do meu slide porque achei que fica mais bonito, se você quiser tirar também é só excluir do código as duas urls que lhes mostrei.

Imagem de pausar a transição dos slides
     Essa imagem é representa com a seguinte url:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmGViOce2vTipXg1-DKkdyAZ3UKzrc5OqsGjyH9VAyw1Pc7q_6JIYqwAx1Rgur_J-7lCZ06jiZBfhNLD8TwTvjVeYZAQVuDtw4u9ZhT1M4AWSVhMs_gnDYkOI1fqUKVk_-3SJ8txa8TPoo/s1600/pause-black.png

     Agora é só fazer a mesma coisa da imagem anterior: localizar a url e substituir pela url da nova imagem que você fez ou apagar a url se você não quiser ter essa imagem no seu slide. Se você retirou as imagens de transição de tempo aconselho que também retire essa se não fica bem estranho.

 Setas para passar de um slide para outro
     Das imagens editáveis são as mais importantes do slide, e são representadas pelas seguintes urls:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj-h2op5k-E-GOwg_dcZd8PPMMcK1KhJ_2CJureFRPRTm7Z4SRxjLB20E3u8oC7bLV7D22STfOTbEff6WDfx-s9X49u0OWZtuVwmTqlnFSlggZCO-3N5c23sjj7DRjFijqB0dlv-P_39P-/s1600/left-arrow.png (seta da esquerda)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_md8XYY-6PD2I7FV_2Y32IYHOVFjPy240x2cbFcvPcpqjmuRyw48NgKIxrATuDha3eUZT2tMWwpwlkB-MpO7uQCi-ksI7uZ9ZBPUfVgoFdDAHCdCynS_56WwrA3yYI05G-EYT6J9q-cKS/s1600/right-arrow.png (seta da direita)

     Novamente localizem a url das imagens e depois de fazer a suas próprias setas troque as urls das que já estão no código pelas das novas setas. Aconselho não retirar essas dois imagens pois são importantes para seus visitantes conseguirem "navegar" pelos seus slides.

 Bolinhas que representam cada slide
     Representadas pelo seguinte url:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0oFkL8Sv8ii1hmMJAH4aB9V7gPH2hk7AEoZKlBgOQsaJCjNhObR9vWwmzJDrMTxAM770zW0qBs66Ddc_2ukhHzWYpMuCQ5TYa1hZ9EFH_Y8zf4IFj_BI4ZfMAFnzY3IMLqHC4KeBrV6aY/s1600/bullets.png

     Essa imagem não acho muito necessário, na minha opinião dá pra excluir numa boa, mas se você quiser continuar com essas bolinhas pode fazer uma imagem nova e mudar a url do código assim como já ensinei anteriormente nesse tutorial.

Adicionando Gadget
     Para adicionar um slide desses ao seu layout basta salvar tudo que já fizemos acima, ir em Layout (na antiga interface do blogger terá que clicar em Design) no seu painel do blogger, clicar em adicionar um gadget, escolher html/java script e colar o seguinte código:

<center><div id='featured'>
<a href="LINK DA IMAGEM 1"><img rel='foto1' src="IMAGEM 1" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto1'>DESCRIÇÃO DA IMAGEM 1</span>
<a href="LINK DA IMAGEM 2"><img rel='foto2' src="IMAGEM 2" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto2'>DESCRIÇÃO DA IMAGEM 2</span>
<a href="LINK DA IMAGEM 3"><img rel='foto3' src="IMAGEM 3" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto3'>DESCRIÇÃO DA IMAGEM 3</span>
<a href="LINK DA IMAGEM 4"><img rel='foto4' src="IMAGEM 4" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto4'>DESCRIÇÃO DA IMAGEM 4</span>
</div></center> 

     Onde estiver escrito link da imagem substitua pelo endereço da página para a qual o leitor será redirecionado quando clicar em cada slide que passar respectivamente. Onde estiver imagem substitua pela url da imagem que será exibida em cada slide. E está escrito descrição da imagem você escreve um pequeno texto descrevendo sobre o que fala a página cuja a qual cada slide se refere.

Qualquer dúvida é só perguntar