Tutorial Blogger: Colocando slide de imagens em JQuery

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

editor html blogger
Editor HTML do Blogger

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

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!

142 thoughts on “Tutorial Blogger: Colocando slide de imagens em JQuery

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

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

  2. 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?

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

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

  4. É 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.

  5. 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!

    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!

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

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

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

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

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

  11. 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?

    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 >

    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!

    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.

    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/

    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! :)

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

    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.

  12. 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 ???

  13. 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!

  14. 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…

  15. Opa, tudo certo?

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

    Obrigado

  16. 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/

  17. 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 ???

    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!

    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 …

    3. 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!

  18. Como faz pra mudar esse tamanho padrão da imagens? O tamanho 580×325 fica desproporcional ao meu blog.

    Valeu! o

  19. Como faz pra mudar esse tamanho padrão da imagens? O tamanho 580×325 fica desproporcional ao meu blog.

    Valeu! o

  20. Olá Fabiano! Rapaz, fiz tudo certinho, mas as imagens não estão saindo e ficou com umas letras em cima dos slides, me ajuda aí neste blog: http://violaoteste.blogspot.com.br/. Esse é o código como salvei:

    b:if cond=’data:blog.homepageUrl == data:blog.url’>

    DESCRIÇÃO_IMAGEM_1

    DESCRIÇÃO_IMAGEM_2

    DESCRIÇÃO_IMAGEM_3

    DESCRIÇÃO_IMAGEM_4

    1. Olá Gilvan Filho,
      Eu acessei o link da imagem e vi que está quebrada
      A linha aparece na página pois não há uma tag de abertura (<), o código completo é esse:

      DESCRIÇÃO_IMAGEM_1

      DESCRIÇÃO_IMAGEM_2

      DESCRIÇÃO_IMAGEM_3

      DESCRIÇÃO_IMAGEM_4

      1. As letras sumiram, mas coloquei os links das imagens nos campos “URL_IMAGEM…” e as imagens continuam sem sair, como faço p/ elas saírem? Tb gostaria de centralizar o gadget, vc sabe como?

        1. Adicione a seguinte linha no começo do código do slider:

          No final adicione a linha para fechar:

          Recomendo que adicione o link que acesse diretamente a imagem, antes de adicionar no lugar do “URL_IMAGEM…” verifique se o endereço está abrindo somente a imagem.

          Qualquer dúvida basta comentar!

          1. Fiz isso que vc disse: colei o código e no final adicionei . Mas continua do mesmo jeito, sem centralizar! As imagens também continuam do mesmo jeito, sem sair, eu verifiquei, os links abrem somente a imagem no flickr.

          2. Adicione essa linha: e no final . As imagens devem abrir sozinhas sem estar dentro do Flickr. Recomendo que utilize o próprio Blogger para hospedar as suas imagens!

          3. Rapaz, fiz o que vc disse, mas não centralizou! Faz o seguinte, a senha do e-mail do blog é: violaotestegmail. Veja se consegue fazer! Se conseguir vou te dar o prêmio nobel da ajuda ao próximo…kkkk

  21. Olá Fabiano! Rapaz, fiz tudo certinho, mas as imagens não estão saindo e ficou com umas letras em cima dos slides, me ajuda aí neste blog: http://violaoteste.blogspot.com.br/. Esse é o código como salvei:

    b:if cond=’data:blog.homepageUrl == data:blog.url’>

    DESCRIÇÃO_IMAGEM_1

    DESCRIÇÃO_IMAGEM_2

    DESCRIÇÃO_IMAGEM_3

    DESCRIÇÃO_IMAGEM_4

    1. Olá Gilvan Filho,
      Eu acessei o link da imagem e vi que está quebrada
      A linha aparece na página pois não há uma tag de abertura (<), o código completo é esse:

      DESCRIÇÃO_IMAGEM_1

      DESCRIÇÃO_IMAGEM_2

      DESCRIÇÃO_IMAGEM_3

      DESCRIÇÃO_IMAGEM_4

      1. As letras sumiram, mas coloquei os links das imagens nos campos “URL_IMAGEM…” e as imagens continuam sem sair, como faço p/ elas saírem? Tb gostaria de centralizar o gadget, vc sabe como?

        1. Adicione a seguinte linha no começo do código do slider:

          No final adicione a linha para fechar:

          Recomendo que adicione o link que acesse diretamente a imagem, antes de adicionar no lugar do “URL_IMAGEM…” verifique se o endereço está abrindo somente a imagem.

          Qualquer dúvida basta comentar!

          1. Fiz isso que vc disse: colei o código e no final adicionei . Mas continua do mesmo jeito, sem centralizar! As imagens também continuam do mesmo jeito, sem sair, eu verifiquei, os links abrem somente a imagem no flickr.

          2. Adicione essa linha: e no final . As imagens devem abrir sozinhas sem estar dentro do Flickr. Recomendo que utilize o próprio Blogger para hospedar as suas imagens!

          3. Rapaz, fiz o que vc disse, mas não centralizou! Faz o seguinte, a senha do e-mail do blog é: violaotestegmail. Veja se consegue fazer! Se conseguir vou te dar o prêmio nobel da ajuda ao próximo…kkkk

          4. Blz, saiu a imagem e centralizou, mas aí eu fui tentar colocar outras (colando o link da imagem na parte URL imagem), e além de não sair a que eu tentei, sumiu a que vc colocou! Eu queria que ficasse com as imagens abaixo nessa sequência…

            As imagens que tentei colocar estão salvas na conta do blog mesmo, e não mais no Flickr

          5. Coloquei as imagens no slide do seu site. Estranho não aparecer, mas eu coloquei certo os links das imagens que você disponibilizou aqui.

            Exclui os comentários com as informações do seu Blogger, recomendo que mude a senha.

            Qualquer dúvida basta comentar! Abraço.

          6. Rapaz, valeu mesmo! Você merece o prêmio Nobel da ajuda ao próximo…rs Abraço!

            Olha, quando você tiver um tempinho, eu gostaria de saber como faz pra reunir arquivos por categorias em um único menu. Por exemplo: já consegui colocar os menus do CSS, mas só sei reunir arquivos de um mesmo mês em único menu, eu queria colocar arquivos de outros meses, entende?

            Valeu brother!

            “Ajude o seu próximo, independente de quem seja, um dia quem pode precisar da ajuda dele é você.” Clayton Cleze

          7. Agora to incucado com uma coisa: por que quando vc coloca dá tudo certinho e quando eu mexo dá errado? Por exemplo, tentei trocar a última foto por outra, mas aí já não tá aparecendo na transição dos slides? O que será isso, só aceita de sua mão é? kkk

          8. Tento colocar uma imagem diferente na transição de slide e não sai! A imagem está no google + e na dimensão correta e mesmo assim não sai, to sem poder mudar as imagens da transição…

          9. Pensei que fosse mais fácil mexer nesses códigos…

            Excluir os comentários que tem o nome da minha conta e senha? Se for isso não aparece a opção “excluir comentário” aqui no seu site…

          10. Obrigado pela sua paciência comigo, é que realmente não entendo esses códigos…

  22. Consegui colocar o slides no meu blog, mas como faço para retirar os espaços pretos laterais que ficam cobrindo o plano de fundo do blog? O gadget está ficando de um tamanho maior do que a transição de slides e tá cobrindo o plano de fundo.

  23. Consegui colocar o slides no meu blog, mas como faço para retirar os espaços pretos laterais que ficam cobrindo o plano de fundo do blog? O gadget está ficando de um tamanho maior do que a transição de slides e tá cobrindo o plano de fundo.

  24. muito o único que deu certo no meu blog vc é fera boy, ei mas como faço para diminuir o teme das imagens

  25. muito o único que deu certo no meu blog vc é fera boy, ei mas como faço para diminuir o teme das imagens

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *