Imagens Deslizantes com JQuery Slider

Pin It
140 Comentários »

Em outro artigo publicado, você já viu Como Instalar um Slide no Blog.
Agora neste tutorial você aprenderá um outro modelo de Slider usando o JQuery.
Para aplicação, é necessário usar HTML, CSS e Javascript.
Clicando na imagem abaixo você pode ver um exemplo deste efeito em funcionamento.


Demo

Só para lembrar, sempre é bom que você faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.

Para instalar este Slider,siga os passos a seguir:

1.Instalar o arquivo Javascript:

Acesse o painel do blogger, no menu “modelo”, vá em “Editar HTML” e procure pela tag </head>
e cole logo ACIMA dela o conteúdo deste arquivo.txt.
Salve as modificações!

2.Aplicar estilos ao Slide – código CSS:

Agora volte no menu “Modelo” >> “Editar HTML” , e procure pela tag ]]></b:skin>
e cole ANTES dela:

 /*--Container geral--*/ 
.main_view { float: left; position: relative; } 
/*--Estilos do container das imagens--*/ 
.window { 
height:289px; 
/*-- as imagens devem ter a mesma altura ou mais-- */
 width: 800px; /*-- as imagens devem ter a mesma largura ou mais-- */ 
border:1px solid #610000;
 overflow: hidden; 
position: relative; 
}
.image_reel { position: absolute; top: 0; left: 0; } 
.image_reel img { float: left; } 
/*--Estilos do container da numeração--*/ 
.paging { position: absolute; 
bottom: 40px; right: -1px; 
width: 220px; height:41px;
 z-index: 100; text-align: center; 
line-height: 40px; 
background:url(http://4.bp.blogspot.com/_q4j3j-JA2ro/S0TDw0n697I/AAAAAAAANBw/XhlF84popQU/s000/transparencia.png); 
-moz-border-radius-topleft: 15px;
 -moz-border-radius-bottomleft: 15px; 
-webkit-border-radius-bottomleft: 15px; 
-webkit-border-radius-topleft: 15px; border:1px solid #000; 
display: none; } 
/*--Estilos do link da numeração--*/ 
.paging a { outline:none; padding: 5px 10px; text-decoration: none; color: #999; 
background: #000;border: 1px solid #000; -moz-border-radius: 17px; -khtml-border-radius: 17px; 
-webkit-border-radius: 17px; } 
/*--Estilos do link ativo da numeração--*/ 
.paging a.active { font-weight: bold; border: 1px solid #000; color: #fff; 
background: #920000; -moz-border-radius: 17px; -khtml-border-radius: 17px; 
-webkit-border-radius: 17px; }
 /*--Estilos do link hover da numeração--*/ 
.paging a:hover { font-weight: bold; } 

Salve!

3.Editando cores de fundo, bordas, altura e largura do Slide:

Em .window , edite os valores de height(altura) e widht (largura) total do seu slide. Personalize de acordo com o tamanho de seu template (Coloque o mesmo valor para largura que possuir a sua Header)
Lembrando que as imagens utilizadas devem ter a mesma largura ou mais!

Edite as cores de bordas em “border“.
Edite cor de fundo em “background“.

Em .paging, onde está background:url(http://4.bp.blogspot.com/_q4j3j-JA2ro/S0TDw0n697I/AAAAAAAANBw/XhlF84popQU/s000/transparencia.png), eu usei uma imagem como exemplo, mas você pode trocar por uma imagem de sua preferência, basta alterar a url (endereço) de sua imagem.

4.Escolhendo local que ficará o slide:

Agora você deve escolher onde quer posicionar o slide.

4.1. Abaixo do cabeçalho:

Um excelente local é logo abaixo do cabeçalho, ou abaixo do menu(caso seu blog tenha um menu instalado abaixo do cabeçalho).

Vá no menu “layout” verá um campo para “Adicionar Gadget” bem abaixo do cabeçalho do blog, é lá que você irá colar o código do slide que você quer instalar.
Se não houver um campo para “Adicionar Gadget” abaixo do cabeçalho, você terá que fazer algumas modificações no código do template. Siga este artigo e veja como Como Instalar Gadgets abaixo do Cabeçalho

5.Código HTML:

Vá para o menu “Layout” .
Clique em “adicionar um gadget”, escolha o modo HTML/javascript e cole o seguinte código:


<div class="main_view"> 
<div class="window"> <div class="image_reel">
<img src="url-imagem-1" alt="" /> 
<img src="url-imagem-2" alt="" /> 
<img src="url-imagem-3" alt="" /> 
<img src="url-imagem-4" alt="" /> 
</div></div> 
<div class="paging"> 
<a href="insira-seu-link-1" rel="1">1</a> 
<a href="insira-seu-link-2" rel="2">2</a> 
<a href="insira-seu-link-3" rel="3">3</a> 
<a href="insira-seu-link-4" rel="4">4</a> 
</div></div>

Para fazer com que a numeração que aparece no slide funcione como um menu que redirecione para determinada postagem, você poderá, basta inserir a url da sua postagem onde está “insira-seu-link”.

Se você quiser inserir um link diretamente nas imagens, basta inserir
<a href=”link-para-imagem-1″> antes de <img src=”url-imagem-1″ alt=”" />
devendo ficar assim:

<a href="url-link-para-imagem-1"> <img src="endereço-imagem-1" alt="" /></a>
Slide somente na página inicial (opcional):

Se você quiser que ete slide apareça somente na página inicial do seu blog, você terá que incluir o código da condicional.
Você deve colar o código de abertura da condicional logo ACIMA da linha que inicia o código html do slide, e APÓS o código de encerramento do slide, você deve colar e a tag de fechamento da condicional.

Deverá ficar assim:


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

<div class="main_view">
<---restante do código--->
</div></div>


</b:if>



O código destacado em “azul” é a condicional.
O código destacado em “laranja” é o código de instalação do slide.



Lembrando que, a funcionalidade deste script pode variar de acordo com o template.
Templates que possuem muitos scripts, acabam gerando “conflitos” entre si, por isso alguns arquivos javascript dão erro pra alguns, mas funcionam perfeitamente para outros.
Caso este script não funcione em seu blog, verifique se você já tem instalado algum outro script que conflite com o JQuery. Para melhor entendimento, leia: Por que alguns scripts não funcionam no meu blog.

Caso queira aprender como ocultar ou exibir este slide que você instalou, em determinadas páginas, leia o artigo:
Ocultar Elementos em Página Específica

Vanessa é blogueira desde 2009, e 'aspirante' a web design nas horas vagas. Autodidata, viciada em internet, adoradora de blogs, seus códigos e templates, apaixonada por programas gráficos, tecnologia e web design,e fascinada pelo estilo gótico. Leia Mais sobre a autora »



140 comentários em: “Imagens Deslizantes com JQuery Slider

  1. Céu Carvalho disse:
    Eu gostaria de saber como editar meus links do menu?

    Tipo, Home tá ok eu acertei, mas quanto a “Entrevistas” eu quero que quando cliquem apareça todas as minhas postagem onde eu estou entrevistando alguém. Como faço isso?

    Quanto ao slide acertei também =D

  2. Vanessa Me ajdua porfavor Eu quero adicionar o slide eu tou conseguindo mais eu queria saber se da pra adicionar texto pra quando as pessoas virem a imagem teja o texto na frente ou quando coloca a seta emcima aparecer o texto tem como?
    • Vanessa disse:
      O efeito deste slide é este que está ai. Se existe outra forma de altera-lo, desconheço. Vc terá que testar e descobrir por sua própria conta.
  3. natanael disse:
    ola

    eu queria saber como que tira esse slide do meu blog

    porque agora meu blog se atualiza automaticamente

  4. Taillard disse:
    Vanessa

    Por incrivel que pareça eu achei o efeito de um slider 2D ,sem ter que colocar uma estrada de codigos como exige,um mega slider em um site australiano e outro americano.
    O que diferencia o tal slider…è a forma de apresentar as imagens com 4 quadros cortados e invergados.
    Mas estou testando esse aqui,para colocar em 4 quadros separados.
    Se der certo…
    Te dou um toque!

  5. lenilson disse:
    Olá, coloquei o slide no meu blog, e coloquei link para cada imagem, mais ta dando um problema, em vez de ficar so o link q eu adicionei, fica 2 juntos o link da HOME + o link da pág q eu coloquei.

    O código:

    Como aparece o link no slide:

    oque posso fazer para resolver esse problema?

  6. natanael disse:
    ola vanessa

    eu fiz tudo certo so não conssegui coloca os links na imagens
    pra clica na imagem e ir pro post?
    teria como explica mais sobre isso?

  7. vivi disse:
    Olá, muito bom o tutorial e o código, mas estou com um problema:
    as imagens vao ficando atrasadas, de forma que na terceira ou quarta, vejo metade da anterior, e metade da seguinte. Como corrijo?
    • Vanessa disse:
      Se no seu blog está aparecendo de forma diferente, lamento, mas ou vc fez algo errado ou pode ser algum problema relacionado ao seu template e para tentar descobrir, teria que ser feita uma análise mais minuciosa, e infelizmente eu não disponho de tempo para isso. De qualquer forma, agradeço pelo comentário.
      • vivi disse:
        Obrigada Vanessa, vou revisar o código se tem algum erro ou tentar outros templates!
        • Taillard disse:
          Vivi
          Boa rainha!
          Eu tambem tinha o mesmo problema e quebrei o cranio,atè dar 2px a mais no tamanho do quadro da imagem e…inserir medidas x e y nas imagens do slider.
          E pronto!
          Ou seja dentro do link da imagem coloque width800 e heigth.499
          Beijao e boa sorte!
  8. Eu não estou conseguindo colocar a imagem,você poderia me ajudar?Passo a URL das imagens e você coloca no HTML do tamanho igual da DEMO.As imagens já estão prontas, se você puder me ajudar me envie um e-mail.Obrigada pela atenção…
    • Vanessa disse:
      Lamento, mas eu não posso e nem tenho tempo para prestar customização individual, inclusive nos termos de uso já deixei o aviso falando a respeito. De qualquer forma, agradeço o comentário.
  9. Mariano disse:
    Eu queria saber como faz para colocar as imagens ja que elas são estão aparecendo, se tiver como me ajudar me responde por favor.
  10. alarcon disse:
    O efeito é ótimo só que gostaria de saber como centraliza-l0 no blogger, mas desde já muito obrigado.
  11. oi meu anjo!!!
    parabéns pelo blog, mas eu não consegui fazer essa ” imagem deslizante” sera que poderia me ajudar?
    desde já obrigado
  12. Como faço pra configurar quando clicar nas imagens e irem pra postagem?
  13. Aline disse:
    Olá querida.
    Hoje depois de muito tempo que eu já havia instalado este slide no meu blog notei que no internet explorer ele está dando um erro: a última imagem do slide simplesmente não aparece. No Mozila e Crome, o slide roda normal. VC Sabe o que pode ser feito para que ele funcione corretamente no IE? Bjs
    • Vanessa disse:
      Infelizmente o IE é sempre um problema…as vezes funciona pra alguns corretamente, e para outros não..e não sei como resolver.
      • Aline disse:
        Nem me fala, detesto ter que ficar adivinhando o que fazer pra tudo funcionar normal nesse IE…
        • Aline disse:
          Descobri uma solução, pra quem tiver o mesmo problema:

          É só definir o tamanho do slide 2 pixels maior que as imagens que você for usar.

          Por exemplo, eu usei imagens de 849 pixels. Então defini o slide para ter 852 pixels.

          Agora está rodando normalmente no Mozila e IE.

          Bjs

  14. Erica disse:
    Oi! Tem como deixar os slides mais rápidos?
    Obrigado pelo tutorial!
    Foi o único que deu certo no meu blog.

    Bjos!

  15. Leonardo disse:
    Eu adicionei com sucesso o slide no entanto as imagens não aparecem.
    Imagina o que possa ser?
  16. AlinneSoares disse:
    Olá, eu fiz todos os passos no meu blog igual está ai, mais não funcionou a imagem ficou parada, não desliza nem nada. o que eu faço?
    • Vanessa disse:
      Recursos que funcionam a base de arquivo javascript a sua funcionalidade pode variar de acordo com o template. Templates que possuem muitos scripts, acabam gerando “conflitos” entre si.
  17. Aline disse:
    Oi flor!
    Acabou que eu achei o lugar certinho de trocar as cores.
    Mais uma vez agradeço por partilhar conosco. Bjs
  18. Aline disse:
    Olá! Adorei, está ótimo esse baner, obrigada por compartilhar.
    Queria saber se tem como mudar as cores do quadrinho onde ficam os números, onde no código eu devo mudar? Queria trocar o preto/vermelho por rosa/verde. Bjs
  19. Dani disse:
    Olá, eu to com uma duvida: Se eu quiser colocar 2 slides deste? como faço? Mudo o que no codigo?

    obrigada

    • Vanessa disse:
      Dani,eu nunca testei..mas acredito que o que deverá mudar é somente o local que vc escolher para colocar o 2º slide.
      • Dani disse:
        exatamente. eu adicionei o codigo (que deve ir no gadget) novamente e não apareceu nada. Tentei mudar o nome das id’s mas mesmo assim nao deu. O que me sugere?
  20. Wdesign disse:
    Olá, estou usando um template desses novos do blogger, que eh aqueles com slides e tal.

    gostaria de saber como que eu faço pra quando clicar na foto ou titulo dela, o usuario va diretamente pra uma postagem do proprio blog?

    Agradeço desde ja. Valeuu

  21. Não consigo aumentar o número de imagens :(

    Já tentei até macumba!!!

    Coloco a numeração, as imagens e nada!

    O link é templatefleury.blogspot.com.br

    Beijos!

    • Vanessa disse:
      Daniela, não tenho como te ajudar, pois eu nunca testei aumentar a quantidade de imagens neste slide. Não sei te informar se é possível.
    • Jared disse:
      é só repetir esse código:
    • Weverson Cruz disse:
      Tem que repetir os códigos e aumentar o container da numeração!
  22. Mahomies disse:
    No meu blog não tem a tag:]]> o que eu faço?
  23. Erico Graeff Fotografia disse:
    Funcionou quase tudo certo, o unico problema é que as imagens não trocam, fica sempre a mesma. O que eu faço?
  24. Jéssica disse:
    Já descobri! Só precisei ler o post novamente :D
  25. Jéssica disse:
    Oi, o tutorial é ótimo, mas gostaria de saber se tem como fazer com que a imagem seja clicável, já que para ir ao post correspondente à imagem é necessário clicar no número do slide.

    Obrigada!

  26. .:: Nessa ::. disse:
    @Caio
    O efeito deste hack é esse que está ai..se existe uma outra forma, eu desconheço.
    Vc terá que pesquisar e ver se encontra algo por ai.
  27. Caio Cesar disse:
    Tem como colocar um espaço para escrever na parte de baixo do slide?
  28. Web Designer Caxias disse:
    Muito bom valeu.
  29. - Gmais - disse:
    Caramba, vocês, sãod emais, deu certinho no meu, valeeu ae a todos!
  30. Beleza Sergipana disse:
    Eu novamente. Gostei bastante, ele funciona quase perfeitamente. O problema é o link, não redireciona para o post. Mas como o DEMO que você colocou como exemplo, também apresenta o mesmo probleminha, creio, que saiba onde está o erro.
  31. Beleza Sergipana disse:
    Mensagem do seu Google Docs:

    "Este documento irá em breve ser atualizado para a versão mais recente de documentos do Google."

    Será por isso que o link não funciona?

  32. Beleza Sergipana disse:
    Ficou tão bonito, mas só que quando vou clicar na imagem para redirecionar para o post, não acontece nada. Continua a seta, a mãozinha indicando que é um link, não aparece. Ó único problema é esse. Tem como resolver.

    Fico grato.

  33. Yuuki May :: disse:
    e para postar em wordpress ? não encontrei a parte do em lugar nenhum, faço como dai? :S
  34. . disse:
    DeskP o meu também só consigo se for como Gadget se for na postagem ou na Pagina não consigo fica do mesmo jeito que o seu
  35. Samuel Souza disse:
    Amigo, esse slide continua aparecendo nas páginas/postagens internas do blog? Estou precisando de algo assim, para banners, mas teria q continuar exibição internamente. Aguardo resposta. Grato.
  36. DeskP disse:
    No meu blog só aparece a 1ª imagem, e só. Não aparece os numeros e nem ficam passando as outras imagens. o que faço ?
  37. José Viriato disse:
    Saudações Clau…
    Antes de mais, quero expressar minha profunda gratidão pelas dicas valiosíssimas que tem dado. Acredito que demanda tempo e muita atenção para testar os codigos, preparar os posts e depois publicá-los. Como se não bastasse, tem que responder às nossas questões e dúvidas. Estou imensamente grato pela força que dá a cada um de nós.

    Seu slide funcionava, só que havia umas alterações a fazer, pois "desarrumava" o layout que estou a usar. No entanto, depois de ler o seu artigo umas 4 vezes e refazer os passos vez após vez, e lendo outros artigos sobre personalização e os locais ideais para se colocar o código, eu cheguei la, e ainda mudei umas coisinhas para adequa-lo ao que queria.

    Se desejar dar uma olhada no blogue de teste cá vai ele: http://manicoteste.blogspot.com/

    O meu único problema é que as imagens demoram a ser carregadas e olha que já comprimi elas ao ponto de nao perderem a qualidade.

    Tem como adicionar um codigo qualquer que possa so mostrar o blogue ou o slide quando as imagens estiverem já carregadas?

    Abraços de Angola.

  38. Priscila Batista Brasil disse:
    Para aumentar a quantidade de Slide… aparecer mais de 4
    acrescente em:

    .main_view {
    float: left;
    numResults : 10; (acrescente isso…. 10 é a quantidade de slide)
    position: relative;

    depois aumente o tamanho do container de numeração em:
    .paging {
    position: absolute;
    bottom: 5px;(aqui modifica a posição dos números em no slide)
    right: -1px;
    width: 800px; (aqui aumenta o tamanho do container para caber mais numeros de fotos)
    height:5px; (aqui modifica o tamanho do fundo preto transparente)
    z-index: 100;
    text-align: center;
    line-height: 5px; (aqui tambem modifica a posicao dos numeros no slide)

    PRa finalizar:

    Depois é só acrescentar a mesma quantidade de fotos que vc quiz aumentar no codigo html aplicado no Gadgets

    ______________________________

  39. Bruh_SM disse:
    Olá… Estou sem conseguir habilitar o slideshow.
    Bom, primeiramente, peguei meu template do blog
    http://evelyns-place.com.br/
    Bom, o gadjet e o primeiro código HTML deram certo, porém o segundo código não funciona.
    Aparecem dois tipos de mensagens:
    "The element type "body" must be terminated by the matching end-tag"
    ou
    "Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente."
  40. .:: Nessa ::. disse:
    Kayo, M1$@eL:
    Lamento, mas eu não tenho como ajudar, pois pode ser algo relacionado ao template e para tentar descobrir, teria que ser feita uma análise mais minuciosa, e infelizmente eu não disponho de tempo para isso. De qualquer forma, agradeço pelos comentários.
  41. M1$@£L disse:
    Olá Clau, tenho a mesma duvida do Kayo.

    Coloquei o slide no blog : http://www.lenegros.blogspot.com/

    Notei que a PRIMEIRA imagem aparece inteira, porém as proximas aparecen cortadas e a última tem um espaço em branco do lado direito.

    As imagens são exatamente do tamanho do slide , então , porque tem espaço sobrando no final??!

    Me ajuda aee!

  42. Kayo disse:
    Olá…Eu coloquei o slide no blog
    Link:http://adolescente-pop.blogspot.com/

    Mas aconteceu que ficou um espaço em branco no final da ultima foto do slide….Eu procurei o motivo e descobrir que tinha que colocar um url de imagem no "paging" e eu fiz isso…Mas quando eu fiz isso o slide parou de funcionar,as fotos não passavam mais e os numeros sumiram….Como eu faço pra preencher esse espaço branco com o slide funcionando normalmente???

  43. Blog de testes disse:
    Clau,
    Sempre fica as mesmas imagens no slide? Tem como a cada nova postagem, automiticamente "puxar" imagens do novo post? Ou teria que fazer isso sempre, manualmente?
    Obrigada!
    Sarah
  44. .:: Clau ::. disse:
    Divulgacion RBD
    No final do artigo já tem um link para o tutorial que trata sobre o assunto.

    Beatriz
    Estão no código do passo 2. Usa crtl+f qdo quiser localizar algo no html do seu template.

  45. Beatriz Moura disse:
    clau onde encontro esse window e paging , nao entendi ?
  46. Divulgacion RBD disse:
    Tem como colocar o gadget somente na página inicial do blog?
  47. .:: Clau ::. disse:
    Rock in Barro
    Não sei te informar pq nunca o fiz e nunca testei. Vc terá que testar ai pra ver se dá ou não.
  48. Rock in Barro disse:
    Há possibilidade de tirar esses números e essa barra preta fazendo apenas as imagens deslizarem?
  49. .:: Clau ::. disse:
    Backstage
    O efeito deste hack é esse que está ai..se existe uma outra forma, eu desconheço.
    Vc terá que pesquisar e ver se encontra algo por ai.
  50. Backstage disse:
    Clau, eu consegui fazer e tals, as imagens os números… Tudo direitinho, mas será que não tem como eu colocar títulos nesses slide, como o titulo da postagem?
    Obrigado desde já, vou esperar a resposta!
  51. .:: Clau ::. disse:
    André
    Tenta fazer o teste e seguir a dica que o René Gustavo deu.

    René
    Obrigada pela ajuda viu? ;)

  52. René Gustavo disse:
    Meu amigo, não tenho certeza, mas para por esse slide em uma postagem, você tem que seguir os mesmo procedimentos, e quando chegar no procedimento 4, não crique o gadget com HTML/java, basta criar uma postagem, com a opção de HTML, e colocar o HTML do procedimento número 4. Ok?
    Não tenho certeza, porém, acho que pode dar!

    OBS: Não esqueça de editar a altura e a largura do slide para que não fique irregular na postagem!

    Abraços!

  53. André Felipe disse:
    Como posso colocar um slid assim em uma postagem?
  54. .:: Clau ::. disse:
    Carol
    Se vc quiser alterar o tempo do efeito da transição, vai ter que mexer no arquivo javascript, e editar ele todo.
  55. Carol disse:
    onde muda o tempo de transição das imagens ?
  56. .:: Clau ::. disse:
    Natineces
    Eu não sei te dizer, pq eu não testei.
  57. natineces disse:
    Nossa vlw mesmo ficou perfeito.
    http://neceslove.blogspot.com/
    Eu só queria lhe fazer uma pergunta…da pra ser mais de 4 imagens??Tipo a gente mesmo adicionar mais um numero??
    Se não der não tem problema por que eu já gostei do mesmo jeito kkkkkkkkkk bjs e parabéns pelo site ele é incrível…to sempre aqui agora *-*
  58. .:: Clau ::. disse:
    Jorge
    Este tipo de slide foi projetado para ser apresentado assim desta forma. Se vc quer colocar descrição, é melhor colocar a descrição na própria imagem.
    Se vc precisa de um slide que tenha possibilidade de colocar descrição e títulos em textos, sugiro que escolha um outro modelo de slide.
  59. Gamus disse:
    Nossa muito bom seu tutorial consegui fazer =)
  60. Jorge disse:
    Muito Obrigado pela dica, mas gostaria de saber como colocar uma legenda como nesse no slide como nesse abaixo

    http://www.mundoblogger.com.br/2009/11/instalando-um-slide-no-blog.html

  61. Vídeo Aulas d disse:
    Olá Clau blz, Faz tempo que eu queria um slide assim para finalizar meu projeto e hoje eu terminei graças a você. De uma espiada pra tu ver como ficou VideoAulasd.blogspot.com

    Pena que você não faz Vídeo Aulas por que se fizesse eu já teria postado no por la.

    Um Abração.
    Eduardo Chaves.

  62. Leo2505 disse:
    Bom, consegui resolver o problema de larguras… (que a animação ia cortando progressivamente a imagem no meio)

    Eu declarei a width da img nas propriedades da imagem no gadget e resolveu o problema.

    Se alguém passar por esse mesmo problema já sabe a resposta hehe

  63. Leo2505 disse:
    Onde eu arrumo a distância do slider? Tipo… ele tá cortando progressivamente um pedaço de cada imagem, provavelmente é no Jquery que está programado para percorrer uma distância X e parar, porem essa distância é menor que a imagem/css… se alguém conseguir me ajudar agradeço :]
  64. Enche Lingüiça disse:
    Obrigado ficou muito bom no meu blog novo quando eu abro no chrome mas qd eu abro no Internet Explorer os botoes ficam quadrados pq será isso????

    abçs

  65. ADM disse:
    Obrigado

    Fico muito bom melhor Slider que já vi!

  66. Luiz disse:
    Ai,como que deixar mais lento um pouco.
  67. Dftmarques disse:
    está muito bom o código. Obrigado. Sou um blogueiro de Portugal!!!
  68. Mania Surf disse:
    ta tendo um problema no meu slide, o slide 1 passa muito rapido e fica tudo branco, da outra vez que eu tentei foi o slide 4 qu ficou tudo branco. onde estou errando a unica coisa que eu mudei foi o tamanho
  69. ENTER MICRO INFORMÁTICA disse:
    Você é muito Inteligente,saca mesmo do assunto e está me ajudando muito,desde já agradeço por compartilhar tantas informações valiosas.
    Eu consegui postar a galeria,mas os números ficaram na vertical,preciso saber como faço pra colocar eles na horizontal.
    vlw!!
  70. Chico Canavieira disse:
    Coloquei no meu blog esta ferramenta. o que deu um ar de muito profissionalismo ao meu blog. quem quiser conferir como ficou: http://www.chicoetutoia.blogspot.com
  71. Fael disse:
    Clau, eu instalei esse slider no meu blog, o beembolado.blogspot.com
    O que acontece é que as imagens ficam sempre lado a lado e nunca aparecem os botões "1", "2", "3" e "4" para passar as imagens.
    Sei que você não pode me ajudar a selecionar o erro no meu blog sem ver o código, mas será que você poderia me dizer o que é que pode estar dando errado no meu código, e uma possivel solução para este erro.
    Ficaria muito feliz em receber uma resposta satisfatoria sua. Queria dizer também que metade do meu blog foi construido a partir de dicas daki!! ;P
    muito obrigado desde já!! ;D
  72. Felipe disse:
    Oiii to tentando fazer o seguinte.
    hoje em um site uso o lightbox para ambliar minhas fotos direto do banco de dados, ate ai tudo bem, mas estou atualizando o site layout e tudo , e coloquei aquele jquery para fazer passar os banners do topo do site, o problema que os dois juntos nao funciona somente um ou outro.

    você saberia me dizer porque isso acontece e se tem um mode de resolver?

  73. Luiz Roberto Monteiro disse:
    Gostaria de aproveitar a oportunidade de te parabenizar pelo seu site / blog. Ele é excelente. Tem muitas dicas para todos os níveis e sempre com a preocupação de ser o mais didático possível, deixando fácil o que muitas vezes poderia ser e é complicado.

    Parabéns mesmo.
    Continue assim.

  74. Luiz Roberto Monteiro disse:
    Boa tarde.
    Consegui colocar em prática esse post e deu tudo certo, eu até mudei as configurações dele.

    Sou novato no assunto blog e html, e me surgiu um problema que gostaria de saber se você consegue me ajudar: coloquei os slides deste post e usei a última dica que você colocou, para quando clicarmos na foto ele encaminhar para o link que colocamos. Só que tem um probleminha, quando coloco um site qualquer ele não vai, porque no atalho antes tem o url do meu blog, tem como tirar isso?

    Exemplificando:
    Cliquei na foto e ela encaminhou para:
    nomedoblog.blogspot.com/www.algunsite.com.br

    Mas eu gostaria de tirar a primeira parte e quando clicar na foto ou no número me direcionasse para:
    http://www.algunsite.com.br

    Tem como?

    Agradeço desde já a atenção dispensada.
    Um abraço

  75. Mariana Borges. disse:
    Clau, não tem como eu adicionar legenda não?
  76. Rhuann Tavares disse:
    vlw clau!!!
  77. .:: Clau ::. disse:
    Rhuann Tavares
    Sobre o problema que ocorrer no seu blog, não tenho como ajudar.
    Sobre o recurso que vc perguntou: procure o tutorial "Instalar ferramenta breadcrumbs".
  78. Rhuann Tavares disse:
    Ei Clau…
    to em processo de criação do meu blog e ja mudei bastante coisa do slide original mas….
    heheheh… (tinha que ter um mas)

    a área de comentário sumiu e não sei como fazer pra voltar a aparecer d novo, sei nem quando que sumiu, só a gora que me dei conta…

    e outra, tenho rodado pela net procurando de tudo quanto nome um gadget que localiza as páginas como se fosse um mapa tipo esse que você tem no seu blog.

    [[[Inicio » Efeitos Imagens » Slides » Imagens Deslizantes com JQuery Slider]]]

    me ajuda!!??

    vlww desde já…

  79. Gontijø disse:
    Clau, me desculpe pela inha ignorancia!!
    Acabei de descobrir que vc jah publicou isso!!
    Desculpe por te fazer perder tempo!
    Seu site é demais!!
    Parabéns!!
  80. Gontijø disse:
    Querida Clau…
    Gostaria de saber se teria como usar esse slider, mas no lugar das imagens apaenas, colocar imagens dos últimos posts publicados no meu blog, como o gadget de postagens recentes, com links para os determinados posts!!
    Aguardo uma resposta sua…
    PS.: Bem que você poderia fazer um tutorial sobre isso se você souber fazer esse efeito é claro!!
    Beijos!!
  81. .:: Clau ::. disse:
    José Filho
    Que bom que deu certo ;)
  82. José Filho disse:
    Clau,
    desculpa ter te incomodado. Eu mudei meu template, deu certinho. Muito Obrigado pela sua dica excelente!

    http://newspepperblog.com

  83. .:: Clau ::. disse:
    José Filho
    Vc deve ter feito alguma coisa errada. Não tenho como te ajudar e nem saber o q aconteceu no seu template. Se vc verificar no blog de testes ele está funcionando perfeitamente.
    Ah e não esqueça que as imagens utilizadas devem ter a mesma largura ou mais q o slide.
  84. José Filho disse:
    Não consegui, eu acho que tem algo errado com o CSS, porque quando eu instalo o gadget, aparece uma imagem ao lado da outra (às vezes até em baixo), e em baixo aparecem os números em formas de links. Me ajude por favor! Eu achei lindo esse slide e quero botar no meu blog http://www.newspepper.tk/, além do mais eu confio bastante no conteúdo do seu blog.
  85. .:: Clau ::. disse:
    andraD,
    X-Pro Games

    Este tipo de slide foi projetado para ser apresentado assim desta forma. Se vcs quiserem colocar descrição, terão que colocar a descrição na própria imagem.
    Se quiserem um slide que tenha possibilidade de colocar descrição e títulos em textos, tem outros tipos de slides publicados, eu sugiro que deem uma olhada no marcador "slide" e escolham outros modelos.
  86. X-Pro Games disse:
    Gostaria de saber se há como colocar uma descrição nas 4 imagens que ficam passando. Se possível, crie um tutorial para nós!
    Ótimo trabalho o seu!
  87. andraD disse:
    Como coloco uma descrição nas imagens?
  88. ::Clau:: disse:
    Christian:
    Eu quem agradeço pelo comentário. Obrigada!
  89. ::Clau:: disse:
    Gabriel Braganholo:
    Vc deve ter feito alguma coisa errada na hora de instalar os códigos. Não tem como eu saber especificamente o q ocorreu no seu template.
  90. imagine - comunicação impressa e digital disse:
    Clau, vim agradecer a sua disposição de disponibilizar todo esse utilíssimo material e a sua atenção em sempre sanar as nossas dúvidas… muito obrigado!!!! :D

    Christian

  91. imagine - comunicação impressa e digital disse:
    Clau, vim agradecer a sua disposição de disponibilizar todo esse utilíssimo material e a sua atenção em sempre sanar as nossas dúvidas… muito obrigado!!!! :D

    Christian

  92. Gabriel Braganholo disse:
    Certo, eu consegui, mas aconteceu outro probleminha, se puder me ajude por favor, a última imagem nunca aparece, eu coloco mais imagens e tudo, mas nunca aparece a última, nem mesmo com as quatro. Obrigado. Parabéns pelo blog, tudo muito bem feito.
  93. ::Clau:: disse:
    Gabriel Braganholo:
    Vc tem que ajustar as medidas e ir testando. A parte referente a numeração já está marcado no código, agora é só ir ajustando e fazendo testes ai.
  94. Gabriel Braganholo disse:
    Oi, poderia me ajudar?
    O menu com as números ficou desalinhado, ele ficou para fora do slide.
  95. ::Clau:: disse:
    imagine – comunicação impressa e digital:
    Mas vc deve estabelecer a flutuação no código CSS (passo nº 2 do tutorial) e não em postagem, vc terá q editar o float do código e ir testando.
  96. imagine - comunicação impressa e digital disse:
    Ah, e eu já o coloquei onde vc indicou, coloquei como postagem e centralzei, mas não muda!!!
    grato
  97. imagine - comunicação impressa e digital disse:
    Oi CLau, tudo bem?
    Eu tenho seu blog favoritado aqui porque é muito bom… tem me ajudado muito… vlw!!!
    Mas tenho uma dúvida… Eu consegui colocar essas imagens deslizantes no bog, porém, ele fica ao lado esquerdo da tela. Mudei o float para right e ele vai para o lado direito. Coloquei margin-left e funcionou, porém, numa resolução menor ele não fica centralizado. Vc pode me dar alguma dica para q eu possa centraliza-lo…
    Novamente tenho q falar, suas dicas tem me ajudado muito… VLW
    Agradeço…
  98. ::Clau:: disse:
    @gabriel
    é que este tutorial é para ser aplicado apenas para blogs da plataforma blogger.

    @Carlos antonio correia de farias:
    Deve ser algo relacionado ao template que vc usa. O funcionamento deste slide pode variar de template para template, pois funciona a base de um script, e para cada caso é um caso. Não há como eu saber especificamente qual o problema q ocorreu no seu.

    @Usina Gamer
    Eu acredito que para este slide não seja possivel fazer isso que vc quer. A não ser que vc coloque a legenda diretamente na imagem, ou utilize outro tipo de slide.
    Se quiser dá uma olhada neste: Instalando um Slide no Blog.

  99. Usina Gamer disse:
    gostaria de colocar Legendas nas imagens , como faço isso?
  100. Carlos antonio correia de farias disse:
    não consigo colocar no meu blog….
    mim ajuda por favor…
  101. gabriel disse:
    Me ajuda meu site é okayflash.com
    gostaria de por um deslizante so que pequeno dentro so site como faço
    , também naum achaa essas tags ]]>

    espero uma resposta aqui mesmo

  102. karatuca disse:
    ok obrigado, é que de vez em quando os números atrapalham
    mais se você souber de um outro tutorial que tenha um parecido com este: (navegação e legenda) por favor me avise meu email (caso não publique este comentário)
    agradecido; Yan Carlos
  103. ::Clau:: disse:
    @karatuca:
    Olha vc pode tentar mexer no CSS,e alterar o posicionamento. Eu não sei se vai resolver,é só uma sugestão, mas vc pode tentar e testar, mas eu aconselho a vc só fazer isso se entender bem sobre códigos, caso contrário é melhor vc procurar e usar outro modelo de slide.
  104. karatuca disse:
    tem como mudar a posição dos números que aparecem as imagens, como colocar abaixo das imagens ou acima?
  105. Rosariano (o) Forever disse:
    Queria reproduzir esse estilo : é possivel? que modificações teria q fazer?
  106. ::Clau:: disse:
    @Diário da Erva:
    Acredito que deva ser a versão do seu navegador, pq pra mim ele está normal. Eu uso a última versão do mozilla.
  107. Diário da Erva disse:
    Muito bom msm, o código está perfeito !!!! Antes de tudo obrigado !! o único problema foi que desalinhou acredito eu no position no firefox, no ie e no chrome esta perfeito, não sei o q fazer mais,,passei quase uma noite inteira tentando acerta esse problema, mas se eu ajeito no firefox desalinha no chrome e no ie, se vc puder dar uma olhada, meu blog é esse .
    Mas desde já lhe agradeço pelo código e vou continuar na busca do posicionamento perfeito. até mais…
  108. ::Clau:: disse:
    @Video Aula:
    Pq provavelmente já tem Crosscol habilitada em seu template e vc deve estar tentando acrescentar mais uma…isso causa erro mesmo. Verifique o código do seu template.
  109. Video Aula disse:
    ei,,pq quando vou colocar aquele dvi crosscol dá erro?
    Adiciono abaixo do menu bar,que é onde eu quero..mais ele da erro no html..pq?
  110. ::Clau:: disse:
    @Derick Furlanetto:
    Fico feliz que tenha conseguido! Volte sempre.
  111. Derick Furlanetto disse:
    Obrigado deu certo!
  112. ::Clau:: disse:
    @Enzzopaiva:
    Leia a postagem com atenção que no tutorial já explica como fazer isso.
  113. Enzzopaiva disse:
    Olá, como eu posso adicionar links nas fotos ? assim, a pessoa vê a foto, clica em cima e é redirecionada pra uma outra pagina ???
  114. ::Clau:: disse:
    @Renatto França:
    Vc não deve ter copiado o código do campo nº 4 todo,copiou? é o que está abaixo de : div class="paging"
    ou então vc precisa ajustar, no CSS, as cores dos numeros de acordo com as cores do seu template.
  115. Renatto França disse:
    No meu não fik os numeros "1, 2, 3, 4" só as imagens passando
  116. Žéß?_?T disse:
    pena que no meu blog nao fica bom se eu nao colocaria. era disso que eu tava prescisando, mas eu vou add nos favoritos vou ver se colocou em algum outro blog
PageRank Checking Icon

© 2009-2014 Mundo Blogger - Todos os direitos reservados | Design by Vanessa |