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!

  • vlw man massa ajudo muito ^^

  • Como deixar que ele atualize as postagens recentes??

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

  • Cáah

    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

  • De nada!

    É um prazer ajuda-lá.

  • Rafael

    Por que demora pra carregar a página?

  • Mariana

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

  • É porque a divisão do seu template está por cima do slide…

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

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

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

  • Alan Brandão

    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?

  • Tente usar a mesma jquery do Wow Slider… Abraços!

  • É por causa dos scripts excessivos na página.

  • 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

    • Para diminuir o comprimento do slide, basta modificar os valores de “width” e “height” nas linhas CSS do mesmo.

    • Nao tem mano to tentando diminuir este slide faz um tempao

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

  • 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

    • Esse slide é configurado manualmente, pois foi feito para blogger e o mesmo não tem opções avançadas…

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

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

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

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

  • funcionou legal, muito top

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

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

    • Muito obrigado cara, deu certo!!!

    • Fabianou ou Viagem… infelizmente não funcionou.

  • Muito bom..confira em http://www.lagosesportivo.com.br

  • Como faço para aumentar o tamanho do slide??

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

  • Anonymous

    Não tem como mudar o efeito nesse slide?

  • 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

  • ñ apareceu!

  • 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

  • Obrigado!!! Me Ajudou muito!

  • No meu não deu certo !

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

  • Tem como aumentar o tamanho do slide , como w

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

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

  • man vc é o cara!!!! ajudou muito!!!!!!!! vo virar seguidor do site , GOSTEI!

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

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

  • Gostei muito!

  • 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

  • Obrigado pelo tutorial !! Funcionou direitinho no meu blog, na primeira tentativa !!

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

  • 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

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

  • 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

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

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

  • Muito foda, resolveu meu problema…Muito fodam VLW!

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

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

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

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

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

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

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

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

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

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

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

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

  • Deu super certo. Valeu!

  • Aramis Serafim

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

  • Costa

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

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

  • Mateus

    Obrigado. Coloquei no meu blog http://www.assombrado.com.br e deu certinho.

  • elisama

    deu certo confira ele aqui –>http://desdegarotinha.blogspot.com.br/

  • Vic

    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…

  • Vic

    dava mas ja nao da… porque sera?

  • bruno

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

  • onde coloco o link de destino , quando clicar na imagem!

    • Procure por:

      <a href=”LINK_IMAGEM_

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

  • Muito bom!

    Vlw, Fabiano!

  • Opa, tudo certo?

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

    Obrigado

  • Como consigo redimensionar ele?

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

  • As imagens ficaram umas cima da outra por que ? fiz algo errado ?

  • Conseguir, agora quero saber como diminuo o slide ?

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

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

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

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

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

      Abraço.

  • 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

  • Não conseguir fiz tudo passo a passo e refiz novamente, mas nada…

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

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

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

    • Deve adicionar em Modelo > Editar HTML

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

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

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

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

  • Testado e aprovado….show!

  • Yuri Moreira Pereira

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

    Valeu! o

    • No espaço aonde coloca o link das imagens tem as duas referências – width:580px;height:325px – aonde width é a largura e height é a altura, ambos em pixels.

  • Yuri Moreira Pereira

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

    Valeu! o

    • No espaço aonde coloca o link das imagens tem as duas referências – width:580px;height:325px – aonde width é a largura e height é a altura, ambos em pixels.

  • Gilvan Filho

    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

    • 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

      • Gilvan Filho

        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?

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

          • Gilvan Filho

            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.

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

          • Gilvan Filho

            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

          • Olá, veja lá no seu blog como ficou, recomendo que exclua as informações da sua conta no Blogger.

          • Gilvan Filho

            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

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

          • Gilvan Filho

            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

          • Gilvan Filho

            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

          • Gilvan Filho

            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…

          • Guest

            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…

          • Gilvan Filho

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

          • Gilvan Filho

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

          • Gilvan Filho
  • Guest

    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

  • Vanildo

    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.

  • Vanildo

    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.

  • Alice Pereira

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

  • Alice Pereira

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