01/06/12

Tutorial Blogger – Colocando slide de imagens em JQuery

Marcadores

slide jquery
Este artigo é realização do pedido de Joel Sorio por e-mail no qual ele quer colocar um slide em seu blog (parceiro do GdT). Então vou ensinar a como colocar no Blogger, a mesma plataforma que ele usa, com a ferramenta JQuery que aumenta os efeitos durante a transição das imagens.

Para colocar o slide no seu blog, é preciso escolher as imagens que farão parte da animação. Neste tutorial, vou usar a configuração com o tamanho máximo de 580 pixels por 325 pixels. Edite as imagens conforme o tamanho máximo em um programa de imagens de sua preferencia e logo após envie todas pro Picasa (Servidor da Google).

Pode ver um pequena demostração acessando nossa página de testes. Está funcionando perfeitamente e sem erros na página, na plataforma Blogger.

Recomendo que faça o backup do template antes de seguir com este tutorial, para que possa voltar caso haja um erro na edição ou no layout.

Indo ao editor do template

Primeiramente, acesse o seu painel do Blogger, abra o menu dropdown e elcolha a opção “Modelo”. Depois clique no botão chamado “Editar HTML” e “Prosseguir”.
Editor HTML do Blogger
Editor HTML do Blogger

Colocando o script no template

Depois de ter acessado o editor HTML, pesquise a seguinte linha utilizando a ferramenta do próprio navegador (Ctrl+F):

</head>

Encontrou? Caso tenha visto, copie os códigos abaixo e cole em cima da linha pesquisada:

<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>

Adicionando estilos ao slide

O próximo passo é adicionar os estilos (ou CSS).

Para colocar no template, pesquise por:

]]></b:skin>

E cole acima as seguintes linhas CSS:

/* 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(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: #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(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPefIDjI/AAAAAAAAAao/Gyy0k0F5Hzw/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhNd07EPI/AAAAAAAAAaY/_k9SqP88gV8/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(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhLtWyUXI/AAAAAAAAAaU/8MQ8LP5flS8/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;
}

Colocando as linhas HTML no template

Por fim, ensinar a colocar algumas linhas adicionais para visualizar o slide na página do seu blog. Para isso, crie um novo gadget na página layout no painel do Blogger e cole dentro o seguinte código:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='featured'>
<a href="LINK_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_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_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_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>

Coloque os links do artigo que representa a imagem onde está escrito “LINK_IMAGEM”, adicione a URL da imagem onde está aparecendo “URL_IMAGEM” e descrição em cada linha.

Qualquer duvida é só comentar, até mais!

109 comentários

  1. vlw man massa ajudo muito ^^

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha conseguido colocar o slide em seu blog, ficou muito legal.

      Abraço!

      Excluir
    2. Eu não consegui ! Por que ?

      Excluir
    3. Você deve seguir os passos desse tutorial de forma correta e com extrema atenção!

      Excluir
  2. Como deixar que ele atualize as postagens recentes??

    ResponderExcluir
  3. tutorial muito bom parabéns!
    http://www.jcminishop.com/blog/

    ResponderExcluir
  4. Muito, muito Obrigado pelo tutorial! Há um tempo estava procurando um bom Slide, mas, quando achava algum não pegava. Só o seu que pegou, e foi o mais bonito que achei! Obrigado :D

    ResponderExcluir
  5. De nada!


    É um prazer ajuda-lá.

    ResponderExcluir
  6. Por que demora pra carregar a página?

    ResponderExcluir
  7. No meu blog ele parece funcionar, mas a largura dele ficou como se fosse 1 pixel, porque? o.o

    ResponderExcluir
  8. É porque a divisão do seu template está por cima do slide...

    ResponderExcluir
    Respostas
    1. Olá Fabiano! Você poderia dizer, por favor, como se conserta este problema da divisão do template ficar por cima do slide?

      Excluir
    2. Também estou com esse problema, poderia me ajudar?
      Parece que o template fica por cima do slide e só aparece uma linha de pixel.

      Excluir
    3. Olá, peço que envie uma screenshot ou endereço da página para eu verificar o problema com o slide. Qualquer dúvida basta comentar aqui no artigo!

      Excluir
  9. Alan Brandão2/9/12 00:25

    Segui o tutorial e deu super certo. Muito obrigado! Uma dúvida: que código eu colocaria pra, em vez de deslizar, as imagens fizessem a transição em fade?

    ResponderExcluir
  10. Tente usar a mesma jquery do Wow Slider... Abraços!

    ResponderExcluir
  11. É por causa dos scripts excessivos na página.

    ResponderExcluir
  12. como colocar um tipo de slide com um tamanho de imagem convencional em um template já com um slider diferenciado com imagens mais compridas que o normal ???
    link do blog = http://nfswvicio.blogspot.com.br/


    ass : Gabriel walker

    ResponderExcluir
    Respostas
    1. Para diminuir o comprimento do slide, basta modificar os valores de "width" e "height" nas linhas CSS do mesmo.

      Excluir
    2. Nao tem mano to tentando diminuir este slide faz um tempao

      Excluir
    3. Olá, obrigado pelo slide como já foi dito é o melhor e mais fácil de pegar da net, já o tamanho dele no blogger não consegui no CSS mas no "width" e "height" das imagens no gadget do Blogger, mas fica a dica que tem que reduzir ou aumentar todas as imagens apreferência.

      Excluir
  13. Curti os tutoriais mais to levando uma surra aqui. to pra começar um blog adulto e queria deixar o slide funcionando na página inicial logo acima dos posts.
    Mas existe alguma maneira do slide ser baseado no feed ?

    Estou usando o template 00343 @ templateparablogspot.com

    ResponderExcluir
    Respostas
    1. Esse slide é configurado manualmente, pois foi feito para blogger e o mesmo não tem opções avançadas...

      Excluir
  14. É possível colocar mais imagens no Slide, obviamente? Se sim, saberia me dizer se existe um limite? Ou poderia ir adicionando novas imagens (com links para minhas postagens e tudo mais) sem medo de um dia parar de funcionar por excesso de imagens? Se puder responder minha dúvida, eu agradeço! Até mais.

    ResponderExcluir
    Respostas
    1. Olá Mr. Game World,

      O slide não traz nenhum tipo de limite, mas recomendo que não exagere na quantidade de imagens para não deixar a sua página pesada demais!

      Abraço.

      Excluir
  15. vlw, consegui, deem uma olhada: http://www.downloadroid.blogspot.com.br/

    ResponderExcluir
  16. Muito show esse tutorial.
    Fácil, prático e funcional.
    Exatamente como eu queria.

    ResponderExcluir
  17. Cara parabéns pelo tutorial. Porém, eu gostaria que o slide aparecesse somente na Página Inicial. Tem como adicionar alguma linha de comando para isso?

    Abraços e parabéns pelo seu site, está demais!

    ResponderExcluir
    Respostas
    1. Olá Viagem a Cores,

      Você pode fazer o seguinte, poderá utilizar o seguinte código:

      < b:if cond='data:blog.url == data:blog.homepageUrl' > - Retire os espaços -

      ------ Código do Slide ------

      < /b:if > - Retire os espaços -

      Espero ter ajudado, um grande abraço!

      Excluir
    2. Muito obrigado cara, deu certo!!!

      Excluir
    3. Fabianou ou Viagem... infelizmente não funcionou.

      Excluir
  18. Muito bom..confira em www.lagosesportivo.com.br

    ResponderExcluir
  19. Como faço para aumentar o tamanho do slide??

    ResponderExcluir
  20. Olá NatsuOwn,
    Vou mostrar a linha aonde pode ser aumentada o tamanho, lembrando que todas as imagens devem seguir sofrer a mesma definição...

    Vou deixar em negrito a linha css para mudar o tamanho da largura e altura das imagens:

    < a href="LINK_IMAGEM_2">< img rel='foto2' src="URL_IMAGEM_2" style='width:580px; height:325px;' />< span class='orbit-caption' id='foto2' >DESCRIÇÃO_IMAGEM_2< /span >

    Aonde esta em negrito é feita a modificação do tamanho das imagens deste slide e devem ser feitas também na imagem 1, 3 e 4 ou mais caso haja.

    Abraço.

    ResponderExcluir
  21. Não tem como mudar o efeito nesse slide?

    ResponderExcluir
    Respostas
    1. Olá, não é possível mudar o efeito! Abraço.

      Excluir
  22. Deu tudo certo mais nao consigo só deixar na pagina inicial nem usando esse código < b:if cond='data:blog.url == data:blog.homepageUrl' > - Retire os espaços -

    ------ Código do Slide ------

    < /b:if > - Retire os espaços - o que e faço URGENTEEEE

    ResponderExcluir
  23. Não apareceu nada!! Nem pequeno, nem grande, nada! E eu fiz tudo certinho como está explicado... Pode me ajudar? Será que é por causa do template q eu instalei? Obrigada!
    http://www.geral-mais.com

    ResponderExcluir
  24. Obrigado!!! Me Ajudou muito!

    ResponderExcluir
  25. Valew pelo tutorial, me ajudou muito http://www.aindatorindo.com ^^

    ResponderExcluir
  26. Tem como aumentar o tamanho do slide , como w

    ResponderExcluir
    Respostas
    1. Sim é possível!

      Encontre a linha aonde está o valor de "width" e "height" no código do slide (não no script) e mude de acordo com a sua preferência.

      Abraço.

      Excluir
    2. Fabiano, fiz isso... mas a imagens ficam embaçadas... e estão no tamanho que coloquei no código!

      Excluir
  27. man vc é o cara!!!! ajudou muito!!!!!!!! vo virar seguidor do site , GOSTEI!

    ResponderExcluir
  28. Cara, como faço para centralizar a imagem no blog? Abç.

    ResponderExcluir
  29. Vlw mesmo cara, estava precisando de um desse, seu site é muito bom. Obrigado e continue fazendo tutoriais. Abraços!

    ResponderExcluir
  30. Cara blza?Meu querido show debola seu post, parabéns mesmo...cara poderia explicar mais detalhadamente como agente poderá deixar o slide somente na pagina principal, vc explicou acima mas como não entendo sua linguagem se vc explicasse ajudaria muito, se não pode parabéns de qualquer maneira o slide ficou show...aguardo sua resposta

    ResponderExcluir
  31. Obrigado pelo tutorial !! Funcionou direitinho no meu blog, na primeira tentativa !!

    Veja funcionando >>> http://amtonline.blogspot.com.br/

    ResponderExcluir
  32. Primeiramente parabéns pelo tutorial e deu certinho aqui no meu blo. mas eu quero saber como eu fasso para deixar o slide mais rapido?
    abraços

    ResponderExcluir
    Respostas
    1. A velocidade do slide é controlada através do script do mesmo, basta procurar por "advanceSpeed" e mudar o valor com a velocidade de sua preferencia. Abraço!

      Excluir
  33. Sem comentários. Só tenho uma palavra pra dizer. Obrigadoooooooooooo. Valeu mesmo pela atenção e por disponibilizar essa ótima ferramenta. Caso alguém queira ver o resultado segui o link abaixo http://www.rockdown13.com

    Abraço e fica com Deus

    ResponderExcluir
    Respostas
    1. Por nada, qualquer dúvida estou à disposição! Abraço.

      Excluir
  34. Não Consegui Fazer . Segui tudo q Tinha q fazer mas ..

    ResponderExcluir
    Respostas
    1. Normalmente os templates tem tags diferentes e é preciso achar o mais parecido, caso tenha duvidas basta comentar!

      Excluir
  35. Muito foda, resolveu meu problema...Muito fodam VLW!

    ResponderExcluir
  36. Como faço para aumentar o tamanho do slide ou alinha-lo na area de postagem?

    ResponderExcluir
  37. Funcionou aqui, muito bom cara! parabéns e muito obrigado pelo simples tutorial ;)

    ResponderExcluir
  38. Não sei como agradecer, tutorial simples, fácil e me ajudou muito! Obrigadissíma!

    ResponderExcluir
  39. Eu não consegui me ajuuuuuuuda!
    socorro gente..
    kk

    eu fiz tudo certinho no começo
    mais a parte do gadjet e colocar link da imagem
    url da imagem nao estou sabendo..será qe pode me ajudar?

    ResponderExcluir
    Respostas
    1. Vou destacar aqui os lugares aonde você troca a imagem e o link de sua preferência:

      < img rel='foto2' src="URL_IMAGEM_2" style='width:580px; height:325px;' / >< / a >< span class='orbit-caption' id='foto2' > DESCRIÇÃO_IMAGEM_2 < / span >

      Excluir
    2. Então eu não sei qual a diferença de "Link" de imagem e "Url" de imagem...
      onde pego isso ???
      "Url" eu pego Clicando na propriedades de imagem
      e copio o codigo, certo?! E o link ??
      Url Tá certo ou estou invertendo ??
      por favor me ajuda!!!
      no meu blog está ficando uma foto em cima da outro nao está como slides...já fiz de tudo!

      Excluir
    3. LINK_IMAGEM_ = é o link da PÁGINA (artigo, site, página estática) que a imagem no slide vai retratar.

      URL_IMAGEM_ = é o link da IMAGEM.

      DESCRIÇÃO_IMAGEM_ = uma breve descrição sobre a imagem no slide.

      Excluir
    4. Então
      olha o que eu estou fazendo..
      Link_IMAGEM : eu peguei o link onde a imagem está postada, certo?
      URL_ IMAGEM : Propriedades da imagem e copiei o codigo
      DESCRICAO: Coloquei o titulo falando da foto

      minhas fotos estao ficando uma em cima da outra! nao está como slides, oq ta pegando ?? Me ajuda por favooorrrrr

      http://camiilagata.blogspot.com.br/

      Excluir
    5. To enxendo o saco né?!
      Mais é qe nao estou conseguindo preciso da tua ajuda...
      euu juro que se me ajudar irei fazer um post sobre isso
      ensinando as pessoas tbm.. muito dificil ¬¬
      sei qe meu blog nao tem nada haver cm isso
      mais vou fazer só pra agradecer! :)

      Excluir
    6. Olá! Entendo o sua dificuldade em colocar de forma correta este slide em seu blog, bem como a paciência em adiciona-lo.

      Para que as fotos não fiquem uma sobre as outras você deve adicionar o script do slide na área correta e o estilo CSS também, ambos estão escritos neste artigo.

      A tag URL_IMAGEM é aonde você deve colocar o endereço de uma foto na internet, e o LINK_IMAGEM é o endereço do seu artigo aonde está a foto...

      Obrigado desde já!

      Excluir
  40. Parabéns pelo tutorial, foi o único que eu achei e consegui usar.
    Você poderia dizer como faz para mudar os slides de lado? Pois eu queria por na direita. Obrigada.
    http://doisquintos.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. É possível colocar em qualquer área de seu blog, mas é necessário um conhecimento básico de HTML para que haja sucesso...

      Para colocar acima de seus artigos, procure pela linha:

      div class="main section" id="main"

      E cole o último código que esta neste artigo antes do código encontrado.

      Para diminuir ou aumentar o slide, encontre a linha aonde está o valor de "width" e "height" no código do slide (não no script) e mude de acordo com a sua preferência.

      Abraço.

      Excluir
  41. Aramis Serafim5/2/13 10:38

    Olá Pessoal, instalei este plugin no meu site, onde ele carrega 5 imagens .png transparentes. Porem quando abre o site as imagens carregam todas de uma so vez, uma em cima da outra. E como as imagens são transparentes, fica uma zona.
    As imagens passam uma por vez .... Mas tem como quando carregar o plugin, carregar apenas uma imagem ???

    ResponderExcluir
  42. Como faço para que o slide show tenha mais numeros de fotos? Alguém me ajuda?

    ResponderExcluir
  43. Basta continuar o código HTML do slide:

    <a href="LINK_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>

    <a href="LINK_IMAGEM_5"><img rel='foto5' src="URL_IMAGEM_5" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto4'>DESCRIÇÃO_IMAGEM_5</span>

    <a href="LINK_IMAGEM_6"><img rel='foto6' src="URL_IMAGEM_6" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto4'>DESCRIÇÃO_IMAGEM_6</span>

    Pode colocar quantas imagens tu quiser nele, mas cuidado para não deixar pesado no seu blog...

    Abraço!

    ResponderExcluir
  44. Obrigado. Coloquei no meu blog www.assombrado.com.br e deu certinho.

    ResponderExcluir
  45. deu certo confira ele aqui -->http://desdegarotinha.blogspot.com.br/

    ResponderExcluir
  46. Oi, estava tudo bem e de repente deixou de dar... já fiz os mesmos passos e não dá nada... sabe qual as razões para poder deixar de dar? valeu...

    ResponderExcluir
  47. dava mas ja nao da... porque sera?

    ResponderExcluir
  48. Gostaria de saber como fazer pra imagem se ajustar ao slide, eu queria usar ela apenas 580x150px

    ResponderExcluir
  49. onde coloco o link de destino , quando clicar na imagem!

    ResponderExcluir
    Respostas
    1. Procure por:

      <a href="LINK_IMAGEM_

      Onde está escrito "LINK_IMAGEM_" você coloca a URL de destino.

      Excluir
  50. Opa, tudo certo?

    Fera, esse slide que você está disponibilizando é somente para blogger?

    Obrigado

    ResponderExcluir
  51. Como consigo redimensionar ele?

    ResponderExcluir
    Respostas
    1. Por padrão, os tamanhos estão assim:

      style='width:580px; height:325px;'

      Mude os valores de width e height no tamanho que você desejar.

      Excluir
  52. As imagens ficaram umas cima da outra por que ? fiz algo errado ?

    ResponderExcluir
  53. Conseguir, agora quero saber como diminuo o slide ?

    ResponderExcluir
  54. Por favor, como tira ou muda aqueles números que ficam ?
    Olha como ficou o meu: www.oscorujas.com

    ResponderExcluir
  55. Olá vc pode me dizer o q deu errado? Porque as bolinhas no canto de cima não estão alinhadas?
    Aqui está a página onde eu testei:
    http://yumenonak.blogspot.com.br/

    ResponderExcluir
  56. To precisando de ajuda se puder me ajudar agradeço muito.
    As bullets do meu slide ficam separadas quando coloco o slide dentro do gadget.
    Quando coloco o código html do slide direto no html abaixo de:
    -div class='region-inner main-inner'
    Ele fica perfeito mas não consigo alinhar ele com a postagem, fica muito pra esquerda.
    Aqui tá o link do blog:
    http://nathmoments.blogspot.com.br/

    ResponderExcluir
  57. Ae o slide quase deu certo, porem onde fica os pontinhos azuis que ficam trocando d acordo com as imagens fica aparecendo os numeros 1,2,3,4!e ao inves de 4 pontos azuis ficam aparecendo tbem pontos pretos
    no total de 8 pontinhos. Como faço para resolver isso ???

    ResponderExcluir
    Respostas
    1. Olá, preciso do endereço do seu blog para que eu possa analisar com mais profundidade.

      Abraço.

      Excluir
  58. Estou com problemas com o meu slider, que já veio com o template... poderia me ajudar. Se possível, me adicione no Facebook ou G+... abração

    ResponderExcluir
    Respostas
    1. José, envie um e-mail para que eu possa resolver seu problema.

      E-mail: contato@guiadatecnologia.com

      Abraço.

      Excluir
  59. Não conseguir fiz tudo passo a passo e refiz novamente, mas nada...

    ResponderExcluir
  60. Como Faço para deixar o slide apenas na página inicial do meu blog? http://ocorretorpaulo.blogspot.com.br/ Tutorial muito bom, ficou ótimo!

    ResponderExcluir
    Respostas
    1. Olá Paulo Roberto,

      Você pode fazer o seguinte, poderá utilizar o seguinte código:

      <b:if cond='data:blog.url == data:blog.homepageUrl'>

      ------ Código do Slide ------

      </b:if>

      Espero ter ajudado, um grande abraço!

      Excluir
    2. Olá Fabiano Obrigado pela atenção onde devo colocar este código ? em modelo editar Html ? ou layout html java script? tentei em html java script porém la ja possuia este 2 códigos ...

      Excluir
    3. Deve adicionar em Modelo > Editar HTML

      Excluir
    4. Ah Ok , cara sem querer abusar kkkkk , onde devo colar os códigos? acima de /* ORBIT SLIDER (segunda parte do tutorial) Ou acima de <script (primeira parte do tutorial)

      valeu Abraço!

      Excluir
    5. Acima do código HTML do slide (última parte), caso tenha colocado o HTML em um widget HTML/JavaScript recomendo você colocar diretamente no template, mas fácil de ocultar...

      Excluir
    6. Consegui Fabiano !!! haha valeu msmo agora está perfeito vale a pena lembrar caso alguem te pergunte , nomeando o gadget fica mais facil de localizalo no editar HTML e resolver facil este incomodo da uma olhada aqui ---> http://www.cherryboomb.com/2012/02/ocultar-gadgets-em-determinada-pagina.html

      abraço!

      Excluir
    7. Ótimo Paulo! Obrigado pela dica, abraço.

      Excluir
  61. Testado e aprovado....show!

    ResponderExcluir

Seu comentário é muito importante e você é totalmente responsável por ele. Ao comentar você concorda com as nossas políticas.
EmoticonEmoticon