Como instalar um slide de destaques no blog

em 2 de março de 2015

slide de destaque com muitas transições para blog
Em muitos templates que personalizo para meus clientes e em quase todos os que vou colocar à venda em minha futura loja de templates à pronta entrega(sim, eu vou ter uma loja, em breve, este mês ainda, me aguarde!!!) eu coloco variações desse slide.

Ver a demonstração


Vou ensinar você hoje como colocar em seu blog, tá?
Vem comigo!
Para começar vou partir das explicações gerais:
  1. Ese slide não é automático, ou seja: cada lâmina dele, cada imagem, precisa ser editada no tamanho correto, hospedada e ter seu endereço inserido no código HTML do slide;.
  2. Não é complicado, ao contrário, é bem simples; mas leia e releia até se certificar de haver entendido o passo a passo;
  3. As medidas que vamos usar são 640px de largura por 300px de altura. Claro que você pode alterar essas medidas, mas até pegar o jeito sugiro seguir essas do meu exemplo, ok?
  4. Não faça em seu blog! Experimente antes em um blog de testes! Isso é altamente recomendado, escute a tia Elaine!
  5. Se quiser usar suas próprias setinhas e bullets basta ter as imagens, hospeda-las e efetuar a troca no código, no local onde está marcado. Em meu exemplo tanto as setas quanto os bullets são pretos.

Colocando o slide no blog


Para começar vá ao painel de seu blog de testes e clique na aba Modelo.
A seguir clique em Editar HTML e tecle Ctrl+F dentro da caixa de códigos.
Na barra de busca que expandir digite </head> e tecle Enter para localizar.
Abaixo de </head> cole este código:

Copiar o 1º código

Salve e a seguir clique em Layout.
Vai aparecer o modo Layout de seu blog; clique em Adicionar um gadget e na caixa de opções escolha HTML/JAVASCRIPT.
Dentro da caixa que expandir cole este segundo código:

Copiar o 2º código

Faça as alterações no código:
Onde marquei em verde é o endereço de sua imagem;
Onde marquei em laranja é o endereço do post, página ou do marcador para onde a imagem direciona ao ser clicada;
Onde marquei em pink é o texto da legenda da imagem;
Não apague as aspas, tá? Senão não funciona.

Depois de feitas as alterações salve o seu slide, arraste para cima da área do post e salve as alterações do layout.
Veja se está tudo certo.
Caso algo tenha dado errado releia o passo a passo até se certificar de haver feito tudo certo.


Como hospedar imagens no próprio Blogger?


Faça assim: crie um post de rascunho em seu blog, um post que não será publicado.
Carregue nesse post todas as imagens que for usar.
Depois de carrega-las clique sobre cada uma delas, deixe-as em Tamanho Original e copie a url (se estiver no Firefox) ou o link da imagem (se estiver no Chrome).
Este é o endereço da imagem.
Mesmo se deletar o post de rascunho não perde a imagem, a menos que a delete do seu álbum Picasa, tá?


Onde editar as imagens para o slide?


Até no Paint dá certo. Basta que cada imagem tenha o tamanho do slide, que em meu exemplo é 640px de largura por 300px de altura.
Editores mais avançados como Photoshop, Photoscape, Photofiltre, etc... todos servem para redimensionar, cortar e editar imagens.

Aqui tem um post meu com dicas de sites para baixar imagens de ótima qualidade, de graça.

Não consegui, e agora?

Releia tudo, refaça tudo.
Se ainda assim não deu certo veja se não há outros scripts em seu blog que possam causar conflito com o slide.
Por exemplo, um outro slide vai anular este e vice-versa.
Caso as imagens apareçam mas não há transição verifique se não há algum script causando o conflito.

Caso você queira ter em seu blog mas não consiga sozinho ou não tenha tempo e paciência para fazer entre em contato comigo e combinamos o valor, eu deixo prontinho em seu blog por um preço super acessível!


Brindes para você

Abaixo seguem algumas imagens de bullets e setinhas para você usar.
Baixe em seu pc, hospede em seu blog e divirta-se!

Bullets








Setas






Gostou do tutorial?
Comente, compartilhe o post!
Eu agradeço...

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

44 comentários , comente também!

  1. Muito interessante, para quem percebe e é capaz de pôr em prática os seus ensinamentos.
    Parabéns pela sua futura loja.
    Um abraço e uma boa semana

    ResponderExcluir
  2. Eba!!!! Que legal você ter uma loja! Tenho certeza de que vai ser um sucesso (muuuito merecido, diga-se de passagem!).
    Quanto ao tutorial, nem preciso dizer que amei, né?! Vou tentar colocar e depois te conto!
    Obrigada e até breve! #curiosapraversualoja
    Beijos,
    Cris

    ResponderExcluir
  3. Gostei muito das dicas!
    Vou tentar fazer depois :D

    www.boutiquedecliches.com.br

    ResponderExcluir
  4. Muuuuuuto show! Obrigado pela tutorial


    sessentaenovecontossecretos.blogspot.com

    ResponderExcluir
  5. Coloquei no meu site e ficou umas chaves enormes atrapalhando a visualização, oq faço ?

    ResponderExcluir
    Respostas
    1. As ferramentas de edição só aparecem para você.
      Nesse caso seria preciso retira-las do gadget, direto no código fonte de seu template.

      Excluir
  6. aDOREI O TUTORIAL, GOSTARIA D ESABER SE POSSO TIRAR O EFEITO DAS TRANSICOES... E ONDE POSSO FAZER ISSO. OBRIGADA

    ResponderExcluir
    Respostas
    1. Janaina, os efeitos não podem ser retirados.
      bjsss

      Excluir
  7. Elaine eu fiz mais o slide ficou da mesma altura do menu.
    tentei almentar mais nada aconteceu. o que devo fazer?

    ResponderExcluir
  8. Elaine, instalei o slide no blog conforme disse no tutorial. Contudo, as imagens não passam da forma adequada. Elas ficam lentas, travando e ocupando o slide anterior !

    ResponderExcluir
  9. Elaine Você é maravilhosa!
    O meu Blog está lindo, pelo menos eu acho rsrsrs!
    Estou muito orgulhosa pois estou conseguindo transformar ele do jeito que eu queria.
    Muito Obrigada!!!
    www.obuquedenoiva.com.br

    ResponderExcluir
  10. Oi Elaine, tdo bem?
    Sabe me dizer como mudar o efeito de mudança para o efeito fade?
    obrigada :)

    ResponderExcluir
  11. Eu fiz mas a imagem fica bem pequena no slide, mas o resto deu certo!! O que eu fiz de errado??

    ResponderExcluir
  12. Elaine, boa tarde!
    Queria muito saber como ajustá-lo do lado esquerdo, igual à demonstração do tutorial.

    ResponderExcluir
  13. elaine heeelp mee o meu ja tem o menu no lugar que deveria ficar o slide o que eu faço?

    ResponderExcluir
  14. oi elaine, muito obrigada mais uma vez! o tutorial é ótimo e foi muito fácil colocar o slide :)

    ResponderExcluir
  15. oi... tudo bem?
    obrigado pelo tutorial, gostei muito, mas estou com um probleminha....
    Eu coloquei os códigos certinhos e tals, mas o primeiro slide vai pro link que coloquei certo, mas os outros fica caindo numa dessas paginas de protetor de links que fica pedindo pra colocar numero de celular e nunca funciona.... o que poderia ser ?

    o site que coloquei foi esse www.ichiroanimes.com

    obrigado desde já....

    ResponderExcluir
  16. Obrigada pelas dicas, Elaine! Sempre venho aqui aprender alguma coisa interessante, suas explicações são super detalhadas e fáceis de fazer, mesmo para uma leiga curiosa como eu!

    ResponderExcluir
  17. Ola Elaine! Adoro os seus posts, graças a si consegui fazer o blog que sempre quis, muito obrigada! Mas tenho uma pergunta, como é que abro a barra de pesquisa do html no Machintosh? Obrigada, mais uma vez!

    ResponderExcluir
  18. SENSACIONAL!!! Uma explicação de forma muito simples e objetiva, dando segurança pra quem faz as alterações em seus blogs. Parabens Elaine, que Deus possa abençoar muito a sua vida e te dar sucesso em seus negocios.

    ResponderExcluir
  19. Explicação excelente!
    Consegui inserir em meu blog :)

    ResponderExcluir
  20. Oi! Adorei <3 Instalei e alterei sem problemas. Só queria uma ajuda em algo: Como altero o tipo de animação dos slides? Obrigado.

    http://monolitoviajanteblog.blogspot.com.br/

    ResponderExcluir
  21. O template q peguei já tinha um scrip d slides nele, mas era mto ruim d usar, retirei, e achei o seu, coloquei td certinho... porém só aparece as imagens, e não funciona os slides, acho q deve ter algum conflito do outro slide q tinha... pode resolver pra mim? Me fala o valor, faz favor. Obrigado. (preciso urgente)

    ResponderExcluir
  22. oi linda
    eu amo suas tutoriais pq sempre dá certo, mas dessa vez não deu pq em vez de um slide ficou 4 fotos paradas no template.
    e agora?


    bjoss

    ResponderExcluir
  23. Vou testar e se conseguir volto aqui. bjs

    ResponderExcluir
  24. Olá Elaine,
    Quero agradecer pelo seus post são muito uteis.
    Já consegui colocar o meu blog com o look que eu queria.
    Uma pergunta o slide não aparece no telemóvel, parto do príncipio que seja por causa do código não estar adaptado para o site/blog ser responsive.
    Existe maneira de contornar isso?
    É que o drop down menu também não está a aparecer na versão telemóvel.
    Obrigado pela ajuda e Parabéns pelo blog com dicas úteis.

    ResponderExcluir
  25. Obrigado pelo poste, depois de 10 dias procurando um que funcionasse achei o seu, testado e aprovado, só não posto o link aqui porque meu blog tem conteúdo adulto e por isso não vou postar o link pra quem tem interesse de ver o resultado.

    ResponderExcluir
  26. Oii amei a dica
    gente estou seguindo todos que me seguirem :D

    http://crentetambemsediverte.blogspot.com.br/

    ResponderExcluir
  27. O meu ficou assim.... http://imgur.com/RIyIdcW
    Os sub menus se misturaram com o slide... Ajuda pleaseee

    ResponderExcluir
  28. Tem como colocar um script que carregue as postagens recentes do blogger no slide

    ResponderExcluir
    Respostas
    1. Wesley, aqui no blog há alguns slides de posts recentes.
      Procure na categoria Slides, talvez algum sirva ao que você precisa.

      Excluir
  29. Perfeito Elaine, seus tuturiais sempre salvam!
    Eu estou procurando como fazer slide de fotos dentro do post, para que possamos usar muitas imagens para ilustrar o post sem ficar aquela "tripa" imensa.
    Até agora não encontrei nada muito confiável, uns sites para criar o html mas enho medo.
    quando você recomendar algo eu confio rsrs.

    Bj

    ResponderExcluir
  30. Boa noite Elaine,

    Incrível Elaine, está de parabéns, ficaram excelentes em nosso blog, veja como ficou,

    https://bio-orbis.blogspot.com.br/

    Abraços da Equipe BioOrbis. ;)

    ResponderExcluir
  31. Elaine, parabéns pelo excelente trabalho. Sou um blogger assíduo, e, já à muito tempo, visito o seu site/blogger para buscar dicas. E todas as que encontro, são sempre excelentes. PARABÉNS!

    ResponderExcluir
  32. nossa vc é muito inteligente kkkkk nunca manjei em codigos html, e estou tendo sucessos em tdos. mto obr

    ResponderExcluir
  33. Oiiii,
    Deu certinho. Muito obrigada.
    Será que tem como você ensinar a diminuir o espaço entre imagens e o botão?

    Além disso, teria como você me dar uma dica de como usar moldura no slide? Acho que o meu está meio esquisito.
    http://blogueiraaaa.blogspot.com.br/

    ResponderExcluir
  34. Obrigado, Elaine, pelo seu tutorial. Super certinho e muito fácil. Já sou seu fã! Que tenhamos mais pessoas como você! Abraços...

    ResponderExcluir
  35. Nossa adorei deu super certo, é só seguir o passo a passo, obrigado, bj

    ResponderExcluir
  36. Socorro, Elaine!
    Consegui fazer todas as alterações necessárias mas estou com um probleminha.

    Não consigo acessas as abas do menu multinível que ficam em cima do slide...ao passar a seta ela deixa de acessar o menu e acessa o slide! Help!!!!

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…