Colocar slide no blog - Blogspot - Blogger - Wordpress

60 comentários
slide para blog

Bem vindo à página de slide para blog!

Aprenda, neste artigo, a inserir slide no blog

Este artigo foi reformulado há pouco tempo para ajudar você a gerenciar seu blog com slides de imagens e vídeos. Abaixo, você encontrará vários slides desenvolvidos por nós, do BG.

Em alguns slides inserirmos atalhos para a postagem original do BG, em outros slides colocamos a postagem aqui mesmo.

Vamos começar com o Dinâmico slide

O dinâmico slide foi desenvolvido para quem quer um visual moderno em seu blog. Com códigos simples, oferece uma animação moderna sem conflitos de scripts no blog.

Veja a demostração do slide clicando na imagem ou nos botões abaixo da imagem:
slide para blog

Agora, vamos conhecer o Moderno slide:

O próximo slide também oferece um visual moderno para quem quer divulgar seus artigos, criar espaços para publicidades ou apenas dar um destaque em seu blog. Veja o artigo e a demostração abaixo:
Moderno slide no blog

Conheça o Sofisticado slideshow para blog

Um dos slides mais completos e sofisticados para você inserir em seu blog. Com várias animações na tela de transição, possui links dentro dos textos, opção on-mouse para a tela para qual o cursor do mouse passar por cima, assim como um botão para pausar a transição das imagens. Também conta com mini imagens embaixo do slide para se ter um prévia dos próximos artigos. Com certeza, um dos melhores slides! Veja a demostração e o artigo, abaixo:
slideshow sofisticado

Agora, que tal inserir um slideshow de vídeos em seu blog?

O próximo slide é um plugin do Wordpress adaptado para o Blogger e blogs de outras plataformas. Com uma interface simples, o slideshow de vídeos oferece a opção não só de inserir vídeos nos mais variados formatos, mas também uma pequena apresentação, direito a créditos, sinopse, entre outros itens interessantes. O slideshow possui uma imagem da chamada antes da exibição dos vídeos, além do fato de não precisar de código de incorporação embed, bastando inserir as url's dos respectivos vídeos. Veja o artigo e a demostração, abaixo:
slideshow com videos do youtube

Conheça um Gadget de slide de vídeos

Tambem é uma adaptação do Wordpress para o Blogger. Um gadget para inserir vídeos do Youtube, moderno e dinâmico. Este gadget é simples e pode ser inserido direto na aba layout, na opção html/javascript. Basta inseri-lo e colocar as imagens e url's de vídeos que você quer divulgar. Pode ser colocado em qualquer área do blog. Veja, abaixo, o artigo e a demostração:
gadget com videos do youtube

Slideshow Carrossel

O slideshow carrossel é ideal para exibir várias imagens que podem ser facilmente acessadas. Como sempre, queremos um visual moderno e dinâmico para o nosso blog. Pensando nisso, nós, do BG, elaboramos o slideshow carrossel.Veja a demostração e o artigo, abaixo:
Slide show carroucel

Veja, abaixo, o tutorial de mais dois slides para você inserir no seu blog

Como colocar um slide no blog:

Slides são interessantes para mostrar conteúdos que não estão disponíveis na tela inicial, mas que se deseja dar um destaque. A maioria dos blogueiros utiliza imagens dentro de seus posts para destacar melhor suas postagens, porém, à medida que o blogueiro escreve seus posts, estes vão ficando em postagens mais antigas e para localizá-las somente através de algum tópico em sua sidebar ou da caixa de pesquisa.



Todo blog tem postagens que são mais destacadas, e o slide pode servir para fazer com que os leitores tenham fácil acesso a estas postagens.

Dois modelos diferentes de slide para você aplicar em seu blog!

Os slides podem ser inseridos como gadgets, facilitando sua manipulação, pois não há necessidade de inserir no código fonte do blog.

Primeiro slide com descrição nas imagens


Vá no menu e clique em layout. Selecione a área onde quer adicionar o slide e, em seguida, clique em adicionar Gadget. Selecione a opção html/javascript e insira o código abaixo:




Faça as alterações necessárias com a imagem, como referência de link da imagem e sua descrição. Siga o esquema a seguir:

<div class='slide' id='slide1'>
<a href='http://www.bloggerenciado.com' title='olhe a minha primeira imagem'>
<img src='http://bigbangonline.com.br/blog/wp-content/uploads/2010/11/imagem_blogcorporativo_post.jpg'/>
</a>
<div class='slideText'>
<a href='#'>
<p class='slideDes'>Aqui é uma pequena descrição do que você vai mostrar</p>
</a>
</div><!--/slideText-->
</div>

  • Azul: endereço da imagem

  • Amarelo: endereço que será redirecionado ao clicar na imagem

  • Verde: descrição da imagem

Feitas as alterações, salve e visualize seu novo slide simples, elegante e profissional, com css e jquery.

Segundo slide sem descrição nas imagens


No menu, clique em layout. Selecione a área onde deseja adicionar o slide e, em seguida, clique em adicionar Gadget. Selecione a opção html/javascript e insira o código a seguir:




O esquema de edição deste slide é similar ao de cima. A diferença é que este slide não possui descrição nas imagens. Para aplicar as devidas modificações, siga os esquema mostrado no slide anterior.

Adicione esta página aos seus favoritos, pois, frequentemente, estaremos inserindo novos modelos de slides para blogs do Blogger, Wordpress e outras plataformas.

60 comentários :

  1. Gostei vou tentar :)
    Estou seguindo venha conhecer o meu também.
    http://cantinhodoalvaro.blogspot.com.br/

    ResponderExcluir
  2. Help... tenho 2 blogs independentes- tentei nos 2...copiei os 3 codigos na sequencia e nao aparece nada na home do meu blog. As imagens aparecem no GADGET criado, mas o slide de fotos nao aparece... que pode ser...onde estou errando, fiz passo a passo varias vezes... me ajuda! obrigadaaaa

    Eu copia a URL de uma imagem q esta dentro do meu blog e deixo o link das imagens sempre com o endereço da home, esta certo? o resto tudo cpiado e colado...

    ResponderExcluir
    Respostas
    1. o css e o script da primeira e da segunda caixa é para dar a funcionalidade e o estilo o slide é o html da terceira caixinha que pode ser aplicado tanto num gadget quanto dentro de uma postagem ou um a pagina estática ou mesmo dentro do código fonte do seu blog.....

      Excluir
  3. Respostas
    1. Dentre todos os slides apresentados neste post, com certeza, um se aplica ao seu blog. Porém, se algum não deu certo, deve ser conflito de script. É necessário que eu analise seu blog.

      Excluir
  4. Respostas
    1. Blastoise, leia a resposta que dei acima.

      Excluir
  5. Cara, blog como o meu não tem o ... Poderia ter um tutorial ai ensinando como colocar ele no html ?

    Qualquer coisa visite
    http://ondaazulcataguases.blogspot.com.br

    ResponderExcluir
  6. faltou em cima aqui, o meu não tem o (head)

    ResponderExcluir
  7. Oi bom dia estou fazendo um blog e estou usando um TEMPLANTE customizaado e eu gostaria de por no lugar da imagem de apresentaçao um slide tipo esse q vc mostra no blog . Sera q vc poderia me dizer como por o slide por cima da image de apresentaçao desse blog??? fico grato por qualquer ajuda desde ja .

    segue o endereço do meu blog

    http://filmeshuntergames.blogspot.com.br/

    ResponderExcluir
  8. No meu a figura fica uma embaixo da outra

    ResponderExcluir
  9. deve estar dando conflito de scrip me passa mais detalhes para que eu possa te ajudar amigo

    ResponderExcluir
  10. Não consegui ''( http://iagofilipe.blogspot.com.br/

    ResponderExcluir
  11. amigo não tem erro coloque o estilo em css antes da tag ]]> logo em seguida coloque o script antes da tag </head feito isso vá ate layout no menu lateral do blogger e escolha aonde quer adicionar seu slide como um gadget e selecione a opção html/javascript e coloque o código da terceira caixa de auto-seleção logo acima..... O QUE ACONTECE É QUE SEU BLOG TIVER MUITOS GADGETS QUE USÃO SCRIPTS PODE ESTAR DANDO CONFLITO SO VOCÊ ME PASSANDO QUAL É O PROBLEMA QUE ESTA ACONTECENDO EM ESPECIFICO PARA MIM PODER TE AJUDAR. ABRAÇO. qualquer coisa deixe seu e-mail na minha pagina de contato com suas duvidas que eu entro em contato com você abraço!!!

    ResponderExcluir
  12. Dá certo não fera

    ResponderExcluir
  13. DA SIM ME DIZ QUAL É O SEU PROBLEMA PARA QUE EU POSSA TE AJUDAR AMIGO

    ResponderExcluir
  14. NÃO EXISTE DIFICULDADE NENHUMA É SÓ ACRESCENTAR O ESTILO CSS DEPOIS O SCRIPT QUE VAI DAR A FUNCIONALIDADE E LOGO EM SEGUIDA O HTML QUE É SLIDE PODE SER COLOCADO TANTO EM UM GADGET QUANTO DENTRO DO PRÓPRIO CÓDIGO FONTE SE EXISTE ALGUM PROBLEMA COMO MAL FUNCIONAMENTO É QUE JÁ EXISTE GADGETS OU WIDGETS QUE TRABALHÃO COM O MESMO SCRIPT É MUITO SIMPLES DE RESOLVER ME FALEM O PROBLEMA EXATO QUE EU AJUDO ABRAÇO !!

    ResponderExcluir
  15. quero aumenta tamanho do meu slide no blog

    ResponderExcluir
    Respostas
    1. você precisa procurar pela div (tag) do css , (primeira caixa de auto seleção deste post ) que se refere a largura e altura do slide e alterar os px. para o tamanho que desejar....

      abraço qualquer duvida me comunique.

      Excluir
  16. Eu li varios comentários e não acreditei que não fosse dar certo.

    Esse é o melhor slide que eu já vi (demo) pois no meu blog tambem não funcionou!

    Teria uma solução?

    ResponderExcluir
    Respostas
    1. AMIGO POSTEI UM NOVO SLIDE AQUI MESMO NESTA POSTAGEM ESSE NÃO DA PROBLEMAS COM SCRIPTS ..... ABRAÇO AMIGO......

      Excluir
  17. Oi? queria saber se a imagem em PNG transparente quando é aplicada nesse slide fica transparente.

    ResponderExcluir
  18. sim amigo independente se é gif ou png ou jpg etc... a imagem ficará de acordo como ela está armazenada na web só lembro que você tem que colocar uma imagem com as mesma dimensões do slide ou elas ficarão cortadas um conselho que dou é que sempre redimensione ela no photoshop e armazene na web copie o link e ai sim coloque no slide... abraço e obrigado pela visita.

    ResponderExcluir
  19. oi, tentei usar seu novo slide num post, mas não dá, fixa as imagens no post. E mesmo como gadget no layout do blog não dá . que estou a fazer de errado? obg

    ResponderExcluir
    Respostas
    1. olá canarita bazar, esse slide deve ser inserido num Gadget que tenha largura igual ou superior ao da demostração caso contrario não se adequará ao seu template, quanto ao slide dentro do post pode ser aplicado sem problemas desde de que o restante da sua pagina de postagem fique abaixo do código não afetando o script e o css da slide.

      qualquer duvida entre em contato conosco através do nosso menu que iremos lhe ajudar.

      abraços.

      Excluir
    2. olá canarita bazar, esse slide deve ser inserido num Gadget que tenha largura igual ou superior ao da demostração caso contrario não se adequará ao seu template, quanto ao slide dentro do post pode ser aplicado sem problemas desde de que o restante da sua pagina de postagem fique abaixo do código não afetando o script e o css da slide.

      qualquer duvida entre em contato conosco através do nosso menu que iremos lhe ajudar.

      abraços.

      Excluir
  20. Infelizmente no meu não deu certo. Segui todos os passos do tutorial, mas não obtive êxito ao realiza-lo.

    ResponderExcluir
    Respostas
    1. provavelmente você tem outros scripts em seu template que ao ser executado na web entra em conflito com os scripts do slide amigo neste caso precisa avaliar o que é mais importante... logo logo vou estar postando novos modelos de slides mis simples abraço....

      Excluir
  21. Tinha como vc colocar uma logotipo em um Blog pra mim

    ResponderExcluir
    Respostas
    1. Podemos sim amigo, esse serviço é realizado através da página de serviços BG, ultima aba do menu no topo do blog. Qualquer duvida, deixe sua mensagem lá que nós retornaremos o mais rápido possível. Abraços da equipe
      Blog Gerenciado....

      Excluir
  22. Olá andrew, os códigos devem ser colocados antes das tags, ou ACIMA ?

    ResponderExcluir
  23. Eu tentei mas não consegui.. :(

    ResponderExcluir
    Respostas
    1. Qual é a sua dificuldade nos fale detalhadamente para que possamos lhe ajudar...

      Excluir
  24. Não consigo achar esses trechos no HTML, meu layout é free. Será que é por isso?

    ResponderExcluir
    Respostas
    1. qual [e a plataforma do blog que voc"e usa EXEMPLO. blogger wordpress webnode etc...

      me informe para que nos possamos ajudar.

      Excluir
  25. Estou a seguir seu espaço meu caro e espero que siga o meu...uanderesuascronicas.blogspot.com

    ResponderExcluir
  26. Deu certo..como arrumo o tempo pq no final fica cinza!

    ResponderExcluir
    Respostas
    1. Olá, a qual slide você se refere ?
      Abraços... Andrew silva do BG!

      Excluir
  27. Muito legal Andrew! Obrigada! To criando um blog curso de Inglês, e meu método é mostrar gráficos demonstrativos das ações, com "personagens" que eu mesma criei em um site! Já consegui alguns slides bem legais! Mas esse que você passou é show!! Sem contar que é para colocar como gadget e gente não precisa mexer no html do blog!! Aff que medo! haha
    Obrigada! Assim que for acabando tantas aulas que estou preparando, vou com certeza usar esse como destaque, talvez como um caminho a seguir para os estudos não ficarem confusos, para quem está iniciando e fica meio perdido! Um graaaaande abraço! rs

    ResponderExcluir
    Respostas
    1. Olá Beth, agradecemos o contato e ficamos felizes em saber que o artigo foi útil para você. Estamos sempre atualizando o blog com novidades, não deixe de nos visitar. Aqui você sempre achará o que precisa para seu site ou blog. Se ainda precisar de um suporte específico, no menu do BG temos serviços diferenciados, abraço. Andrew silva do BG.

      Excluir
  28. Prezado Sr. Andrew,

    Sou assíduo seguidor de seus tutorias onde muita coisa boa tenho aprendido.

    Gostaria de lhe pedir um parecer sobre o conteúdo e aparência do blog que segue abaixo
    indicado:

    marmorariasantiago.blogspot.com.br

    Agradeço-lhe antecipadamente,

    Miguel alfonso

    ResponderExcluir
    Respostas
    1. Entre em contato conosco através da nossa página de contato para que possamos lhe auxiliar por email. Abraços Andrew Silva.

      Excluir
  29. Ja tentei colocar vária vezes mais não consigo. aparece só a descrição do home da minha página do que postei no slide. O que pode está acontecendo? onde estou errando? me ajude?
    o meu site é: www.interligadoscomvoce.blogspot.com

    ResponderExcluir
  30. Olá, tudo bom?
    A minha pergunta nao tem muito a ver com esse post, desculpe qualquer coisa...
    Eu tenho um blogger e um dominio registrado.. eu posto apresentaçao de ppt (slides em pdf) nesse seite... eu queria saber o que devo fazer para parar de ter que usar o slideshare como intermediário.. se em outro lugar que eu consiga fazer isso... ou se tenho que fazer a tal da hospedagem do site.... abraço!!

    Att, Caíque!!

    ResponderExcluir
    Respostas
    1. Olá Caíque, entre em contato conosco através do contato BG ou serviços BG, no menu, para que possamos estar dando um suporte para seu blog.
      Abraços Andrew Silva do BG

      Excluir
  31. Muito bom, gostei, valew pelo post!!!
    http://lojahost.net

    ResponderExcluir
  32. no meu ficou muito espaço entre o cabeçalho e a postagem ,tem como me ajudar, da uma olhada, http://aprendacomaweb.blogspot.com.br/
    Aguardo Resposta

    ResponderExcluir
    Respostas
    1. Olá, no caso em específico é preciso pegar a tag de chamada css e acrescenta o comando logo abaixo.
      margin-top: -100px;
      esse comando chamará o slide para cima.
      depois é so voce alterar o numero 100 para o numero que se adaptar ao que você desta maneira fastando ou aproximando do top do blog.

      Abraços, Andrew SIlva do BG.

      Excluir
  33. Olá. Inseri o slide sem a descrição. O número dois. Alterei o tamanho das imagens para 300 px, porém, a segunda imagem não aparece completamente. Já tentei procurar a variável e não encontrei. Você pode me dizer como posso fazer esse ajuste? Obrigado desde já.

    ResponderExcluir
    Respostas
    1. Olá victor preciso saber de qual slide você se refere amigo me informe o nome do slide acima ou mande o link do blog ao qual você inseriu para que eu possa estar avaliando o slide e consequentemente te dar uma posição melhor sobre sua duvida.

      Excluir
  34. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
    Respostas
    1. O BG não é para fazer spam amigo aqui é para ajudar outros blogueiros!!!!

      Excluir
  35. pra testar, usei o seu codigo sem alterar nada e coloquei embaixo do meu menu do blog só pra ver como ficava, mas não aparecia como slides, e sim como fotos uma embaixo da outra. Quero poder fazer as alterações com as minhas fotos e os meus links, mas antes preciso ver se vai funcionar mesmo.

    ResponderExcluir
  36. Andrew, como ajustar o o Tamanho do Slide??

    ResponderExcluir
  37. Olá! Queria saber como faço para colocar o código somente no 'modelo' do blog, na parte dos códigos, sem ter que adicionar o gadget html na página do layout. Meu layout é daqueles prontos e não permite que eu coloque gadgets acima do post, por favor, me ajudaa!!

    ResponderExcluir
    Respostas
    1. duda, vc tem que editar o código fonte de seu blog.

      Excluir
  38. Os slide são muito bons, em especial o numero 3, o problema deste numero 3 é que é muito grande aplicando ele no blog ele cobre toda a pagina, se foce menor uns 200 px para cada lado ficaria perfeito

    ResponderExcluir
    Respostas
    1. Altere a dimensão que está na CSS.

      Excluir
  39. Deu certo no meu, mas ele fica com um espaço enorme entre o topo e o slide:
    (https://3.bp.blogspot.com/-ikrv_RD31LI/VeAUHmF5O8I/AAAAAAAAQtQ/ddvNpt4eCTs/s320/adasadsa.png)


    Como faço para retirar esse espaço? Já tentei mexer no código do slide mas nada adiantou! Queria que ficasse da mesma forma que ficou no exemplo, mas não fica, fica sempre esse espaço :(

    Ah, e obrigada pelos slides, esse site foi o único onde encontrei slides para blogger :)

    ResponderExcluir
  40. olá, gostaria de saber como faço para adicionar um desse códigos no meu site, foi feito na plataforma "webnode.com.br"

    ResponderExcluir

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.