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!
Eu sei que
Eu não uso o tão famoso Navi (
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() {$('#featured').orbit({advanceSpeed: 5000,'bullets': true,'timer' : true,'animation' : 'horizontal-slide'});});</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 (
]]></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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTACYE-z-_4RAUI1Uzpfp0pSDWubqnilYYK3P07m8n6W2DFw9KVRIn7c3tx9dK5MnVDVXSfm9d-TYBzUXBt_qPiB-rfHwL9LmMAzqydKfHV_jo_9kcxa8g17aH5kGWnuW4s1kv1bEuZeeA/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/AVvXsEiJIZH4aEUWQhh_mFpZ1U-4nAzdazBWuCqoilZBFOMqkgUmBV4VlagLx3CxhTgvo92DO8NfE_gLFONHP_t-Xsnh9k-HWbMwAvdxU7_lCGw-nCK6z6yK7eHlVC3wE1ZtREaYL-5CImUIDQT_/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/AVvXsEjoKirpyqvKarmmMwmeQpSocnaJT7RoGcK3vqqlLC5KdjPaXW48PUqWvsr3hxGiAvhloJangGecz3id2zfB1zN4PniIPy_xyKXq-Iazbt86FK8itLukGQ2yCWY2Lmsrer9ArhZgzPNZD49U/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ó
Pra quem não entendeu o que são as bullets/setas aqui tem legendinha:
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 (
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.
É isso. Beijinhos com glitter :*
Amei o tuto super útil! uhhuuu primeira a comentar www.princesasdorocker12.blogspot.com.br
ResponderExcluirBom que gostou, Camila!
ExcluirAhh, vc me salvoou *-* SEMPRE quis colocar um desses!
ResponderExcluirEstou seguindo aqui, se puder, segue o meu? Obg!
Beijos ||| prettyinlove-ari.blogspot.com.br
Que legal, flor :D
ExcluirAmei esse slide é lindo
ResponderExcluirbeijos
Bom que gostou, Lola!
ExcluirQue demaaaaaaaaaais!
ResponderExcluirQueria muuuuuuuuuito esse tuto!
Beijoos :*
blogueira-indecisa .blogspot.com
Bom que gostou, Ali *---*
ExcluirAmei esse tutorial.Que bom que você postou ele!
ResponderExcluirBeijinhos com gloss pink
universoteengirl-porlarissa...
Bom que gostou, Lari!
ExcluirAh, não funcionou :'( HEELP??
ResponderExcluirAcabei de arrumar o código, tenta de novo, ok?
ExcluirSinto muito pelo transtorno! D:
AWWWWW, que lindo esse tutorial, sua linda! *-------------* Amei, quem sabe eu use futuramente...
ResponderExcluirNossa, 10 palavrões? LOL HKJGFHKGJFJK
Bjos e bom feriado *-*
sugar-dance.org
Bom que gostou, Camilla *---*
ExcluirSim! ASHUASHUASH
Adorei esse tuto. Vou usa-lo futuramente com certeza.
ResponderExcluirxoxo
http://www.chovendoalgodaodoce.com
Que bom, fofa :D
ExcluirOie Laura! Nossa, todo mundo tem uma priminha assim, né? Hahahaha, gostei da sua opinião.
ResponderExcluirBjos e bom feriado *-*
sugar-dance.org
^^
ExcluirAmei Paula, Já até coloquei nos favoritos para suar no próximo layout,estava querendo mesmo saber *-*
ResponderExcluirBeijoos
Amor dava para ter uma tuto explicando como vc colocou a ask no lado ?? rsrs
Excluirpatydeallstar.blogspot.com
Pode deixar que sai na segunda o tuto, ok? ^^
ExcluirQue slide legal! Sempre quis aprender a fazer , mas nem pedi :S
ResponderExcluiromeubrilhantemundo.tk
Bom que gostou, Ana!
ExcluirSlide perfeito! Ótimo tutorial, explicou direitinho! xD
ResponderExcluirNhannw' Slide no blog fica uma graça! :)
Bom que gostou, Buuh!
ExcluirÉ grandinho,rsrs. Mas fica bem legal *U* o último modelo free seu é lindo *------------*
ResponderExcluirBom que gostou, Nanda *----*
ExcluirMeio complicadinho hehehe
ResponderExcluirmas vou ver se ponho no meu próximo layout.
Salvei nos favoritos :D
Beijos
neversaynever-believe.blogspot.com.br
Okok! ^^
ExcluirO 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
ResponderExcluirOkok!
ExcluirSuper adoreei o tuto,parabéns Paulinha
ResponderExcluirÓtimo post *-*
Beijinhos ~GA
Bom que gostou, Leh!
ExcluirNossa, 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 =( '
ResponderExcluirSweet Teen
Bom que gostou, Tamara!
ExcluirFica lindo amei!!
ResponderExcluirhttp://ianapaulinhaaaa.blogspot.com.br/
Bom que gostou, Iana!
ExcluirAmei o tutorial *-*
ResponderExcluirKisses ~
Garotek.blogspot.com.br
Bom que gostou, Naay!
ExcluirAdorei o tutorial,o resultado é lindo e o nome é Slide Nivo aushaushuahsuah'
ResponderExcluirCaprichadasbr.blogspot.com
Bom que gostou, flor! Okok ><
Excluiramei pq eu nao conhecia o tutorial :)
ResponderExcluirÓtimo tutu! *-*
ResponderExcluirAinda não tinha visto em nenhum cantinho, hehehe!
Beijão e bom feriado.
http://umaxicaradeleite.blogspot.com
Amei seu blog, simplesmente lindo, continue assim *-*
ResponderExcluirBeijo!
http://www.antees-dos-18.blogspot.com.br/
Bom que gostou :3
ExcluirTestei o tutorial, e não deu certo Paula :/
ResponderExcluirJá arrumei ali, ok? Tava com um código errado, sinto muito pelo transtorno!
Excluiro novo lay tá mt lindo viu?
ResponderExcluiradorava o outro mas adorei esse tb.
obrigada pelo comentário no meu blog
bjs
www.martinanasviagens.blogspot.com
Bom que gostou, Martina :3
ExcluirAhh :(
ResponderExcluirEu tentei, tentei, mas não aparece :(
blog-the-memories.blogspot.com
Ai flor, eu amei :)
ResponderExcluirMuito 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
Aaah, eu gostei da sua ideia! *u*
ExcluirOkok, vou tentar participar! :D
Aaai , eu ja tentei duas vezes e em blogs diferentes no modelo travel , mas nenhuma deu certo :(
ResponderExcluirEu preciso muito deste tutu , pode me ajudar amiga ?
Beijoos !
http://meninachicmc.blogspot.com.br/
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? ^^
ExcluirBoa sorte com o orbit!