12/10/2012

Tutorial: Slide Orbit

Créditos: - Pra todo mundo que tinha testado o tutorial e não tinha conseguido, agora eu arrumei o código que tava errado e tá funfando, ok? :3 Desculpa pelo transtorno!
overdose de gatinhos
 Bom dia, leitoras!
 Eu sei que ninguém pediu esse tutorial ainda (ou pelo menos acho que ninguém pediu), mas como eu gosto dele e acho que é legal pra ficar no ~histórico do blog~ eu quis trazer.
 Eu não uso o tão famoso Navi (é esse o nome? e_e), uso o menos conhecido Orbit, que na minha opinião é lindo e mega fácil de se colocar e editar. Eu trouxe também algumas imagens pra vocês usarem, todas feitas por mim.
 Caso alguma de vocês ainda não tenha visto o slide daqui do blog/esteja vendo isso no futuro, ele é assim:
até já tirei essa foto e_e

 Primeiramente vamos instalar no HTML. Vá em Modelo> Editar HTML> Tecle Ctrl+F e procure por:
</head>
 Assim que encontrar, cole acima desse código o seguinte:
<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 vamos á parte que tem que ser personalizada. Procure (ainda no Ctrl+F) por:
]]></b:skin>
 Cole acima do código encontrado o seguinte:

/* 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: 2px solid #CORDABORDA;}
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(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhPl2pVcI/AAAAAAAAAas/O7A5Aa7ZMhs/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(http://2.bp.blogspot.com/_dsEG33PDaHw/TMHhQItQqeI/AAAAAAAAAaw/afLXhP0yQI8/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(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPCHG1JI/AAAAAAAAAak/EiGTzJCfL1c/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: none
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
padding: 8px 0;
text-align: center;
border-bottom: 2px solid #CORDABORDA;
}
div.caption span {
padding: 0 10px;
font-size: 0px;
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(URL_DA_SETA_DA_DIREITA);
right: 10px;
}
div.slider-nav span.left {
background-image: url(URL_DA_SETA_DA_ESQUERDA);
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(URL_DAS_BULLETS);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}
.orbit-bullets li.active { color: #222; background-position: -7px 0;
}

 Agora é só modificar. O que está em negrito são os códigos da borda das suas imagens, deixe os dois códigos iguais, ok? E o que está em itálico são os links das imagens que você vai precisar fazer/colocar.
 Pra quem não entendeu o que são as bullets/setas aqui tem legendinha:
 Caso você vá fazer os seus próprios, as bullets tem que ser 14X7 e as setas tem que ser 33X33. E como sou ótima pessoa não tenho vida, fiz algumas pra vocês, ok? Como nesse meu estilo não tem legenda eu fiz umas imagens pra vocês colocarem como legenda (tipo as que uso nos slides aqui do blog, sabem?). Aqui estão os conjuntinhos, cliquem neles e em "Abrir link em nova aba".
 + ++
+++
++
+++
+++
+++
 Ah, no conjuntinho rosa é pra usar a "bolinha" como seta da esquerda e da direita, ok? Se pegar qualquer um desses credite.
 E chegamos á parte final (e mais importante) que é a de adicionar o slide no seu blog. Vá em Layout> Adicionar Gadget> HTML/Javascript e cole nele o seguinte código:
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='featured'>
<a href="LINK_DO_POST_DA_IMAGEM_1"><img rel='foto1' src="URL_IMAGEM_1" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto1'>DESCRIÇÃO_IMAGEM_1</span>
<a href="LINK_DO_POST_DA_IMAGEM_2"><img rel='foto2' src="URL_IMAGEM_2" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto2'>DESCRIÇÃO_IMAGEM_2</span>
<a href="LINK_DO_POST_DA_IMAGEM_3"><img rel='foto3' src="URL_IMAGEM_3" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto3'>DESCRIÇÃO_IMAGEM_3</span>
<a href="LINK_DO_POST_DA_IMAGEM_4"><img rel='foto4' src="URL_IMAGEM_4" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto4'>DESCRIÇÃO_IMAGEM_4</span>
</div>
</b:if>

  Agora é só mudar o que está sublinhado pelo que se pede e o que está em negrito é o tamanho das imagens do seu slide, que você pode mudar de acordo com as que vai colocar (todas tem que estar do mesmo tamanho) ou adequar as suas ao tamanho que já está ali (580X325).
 Clique em visualizar e veja se deu tudo certo. Se sim, parabéns, você conseguiu! Uhu! Se não, tente de novo, você pode ter errado algo, certo?
Post completo por Piink Cookie. Todos os direitos reservados. Copyright 2012. Plágio é crime.
 E aí, gostaram? Torço que pra que sim. Qualquer problema é só falar comigo, como sempre, ok? E não se esqueçam de pedir tutoriais/mandar críticas/mandar elogios na ask box!
 É isso. Beijinhos com glitter :*

56 comentários:

  1. Amei o tuto super útil! uhhuuu primeira a comentar www.princesasdorocker12.blogspot.com.br

    ResponderExcluir
  2. Ahh, vc me salvoou *-* SEMPRE quis colocar um desses!
    Estou seguindo aqui, se puder, segue o meu? Obg!
    Beijos ||| prettyinlove-ari.blogspot.com.br

    ResponderExcluir
  3. Que demaaaaaaaaaais!
    Queria muuuuuuuuuito esse tuto!
    Beijoos :*

    blogueira-indecisa .blogspot.com

    ResponderExcluir
  4. Amei esse tutorial.Que bom que você postou ele!
    Beijinhos com gloss pink
    universoteengirl-porlarissa...

    ResponderExcluir
  5. Ah, não funcionou :'( HEELP??

    ResponderExcluir
    Respostas
    1. Acabei de arrumar o código, tenta de novo, ok?
      Sinto muito pelo transtorno! D:

      Excluir
  6. AWWWWW, que lindo esse tutorial, sua linda! *-------------* Amei, quem sabe eu use futuramente...

    Nossa, 10 palavrões? LOL HKJGFHKGJFJK

    Bjos e bom feriado *-*
    sugar-dance.org

    ResponderExcluir
    Respostas
    1. Bom que gostou, Camilla *---*
      Sim! ASHUASHUASH

      Excluir
  7. Adorei esse tuto. Vou usa-lo futuramente com certeza.

    xoxo
    http://www.chovendoalgodaodoce.com

    ResponderExcluir
  8. Oie Laura! Nossa, todo mundo tem uma priminha assim, né? Hahahaha, gostei da sua opinião.

    Bjos e bom feriado *-*
    sugar-dance.org

    ResponderExcluir
  9. Amei Paula, Já até coloquei nos favoritos para suar no próximo layout,estava querendo mesmo saber *-*
    Beijoos

    ResponderExcluir
    Respostas
    1. Amor dava para ter uma tuto explicando como vc colocou a ask no lado ?? rsrs

      patydeallstar.blogspot.com

      Excluir
    2. Pode deixar que sai na segunda o tuto, ok? ^^

      Excluir
  10. Que slide legal! Sempre quis aprender a fazer , mas nem pedi :S

    omeubrilhantemundo.tk

    ResponderExcluir
  11. Slide perfeito! Ótimo tutorial, explicou direitinho! xD

    Nhannw' Slide no blog fica uma graça! :)

    ResponderExcluir
  12. É grandinho,rsrs. Mas fica bem legal *U* o último modelo free seu é lindo *------------*

    ResponderExcluir
  13. Meio complicadinho hehehe
    mas vou ver se ponho no meu próximo layout.
    Salvei nos favoritos :D
    Beijos
    neversaynever-believe.blogspot.com.br

    ResponderExcluir
  14. O HTML é um pouco grande, mas eu vou testar no meu blog. Tem post novo lá no blog passa lá. E tbm eu quero que você vote na disputa sangrenta lá no blog, preciso de 100 votos

    ResponderExcluir
  15. Super adoreei o tuto,parabéns Paulinha
    Ótimo post *-*
    Beijinhos ~GA

    ResponderExcluir
  16. Nossa, que lindo o tuto e fica super fashion, todo bonitinho e cute. Achei bem útil, quem me dera se eu tivesse talento e soubesse mexer em tudo isso, sério eu sou muito burra, '-'. Flor na minha escola não teve brincadeira do saco cheio não, infelizmente =( '

    Sweet Teen

    ResponderExcluir
  17. Fica lindo amei!!

    http://ianapaulinhaaaa.blogspot.com.br/

    ResponderExcluir
  18. Amei o tutorial *-*
    Kisses ~

    Garotek.blogspot.com.br

    ResponderExcluir
  19. Adorei o tutorial,o resultado é lindo e o nome é Slide Nivo aushaushuahsuah'

    Caprichadasbr.blogspot.com

    ResponderExcluir
  20. amei pq eu nao conhecia o tutorial :)

    ResponderExcluir
  21. Ótimo tutu! *-*
    Ainda não tinha visto em nenhum cantinho, hehehe!
    Beijão e bom feriado.

    http://umaxicaradeleite.blogspot.com

    ResponderExcluir
  22. Amei seu blog, simplesmente lindo, continue assim *-*
    Beijo!
    http://www.antees-dos-18.blogspot.com.br/

    ResponderExcluir
  23. Testei o tutorial, e não deu certo Paula :/

    ResponderExcluir
    Respostas
    1. Já arrumei ali, ok? Tava com um código errado, sinto muito pelo transtorno!

      Excluir
  24. o novo lay tá mt lindo viu?
    adorava o outro mas adorei esse tb.
    obrigada pelo comentário no meu blog
    bjs
    www.martinanasviagens.blogspot.com

    ResponderExcluir
  25. Ahh :(
    Eu tentei, tentei, mas não aparece :(
    blog-the-memories.blogspot.com

    ResponderExcluir
  26. Ai flor, eu amei :)
    Muito obrigada!!
    Pensei em fazer por assunto não por post, vou fazer um post que redirecione ao marcador... Vamos ver se essa ideia maluca funciona kk
    Espero você no Especial de Fim de Ano lá no blog :)
    Já tá acabando!! :(

    http://deumjeitosomeu.blogspot.com.br/

    Beijos :D

    ResponderExcluir
    Respostas
    1. Aaah, eu gostei da sua ideia! *u*
      Okok, vou tentar participar! :D

      Excluir
  27. Aaai , eu ja tentei duas vezes e em blogs diferentes no modelo travel , mas nenhuma deu certo :(
    Eu preciso muito deste tutu , pode me ajudar amiga ?
    Beijoos !
    http://meninachicmc.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Claro que posso, Laura! É que, infelizmente, esse slide é super chatinho, não aceita muitos códigos no blog e nem tutorial de gadget no cabeçalho. Mas se não conseguir viver sem esses, tem outro slide super simples, é o slide numerado, você encontra tutorial lá no Cherry Bomb, mas se quiser posso fazer aqui também. O que prefere? ^^
      Boa sorte com o orbit!

      Excluir