Como Colocar Slides no Blogger: Slides das Postagens Recentes

Colocar slide em destaque no blog com as postagens recentes pode atrair a atenção dos seus visitantes e manter as pessoas mais tempo no seu site. Usar slides de postagens no blog para mostrar links e imagens dos seus últimos posts é um gadget útil para reduzir a taxa de rejeição e divulgar as novas postagens do seu blog e com isso conseguir mais compartilhamentos nas redes sociais. Além disso, os slides no blog são interessantes porque as imagens mudando automaticamente desperta mais interesse das pessoas que visitam o blog.

Como colocar slides no blogger: Slides das Postagens Recentes

Código HTML e Gadget para Colocar Slides no Blog


Entre na pagina editar HTML do Blogger e faça um backup do template, assim se ocorrer algum erro nos códigos do blog você poderá voltar ao seu layout atual com facilidade.

Agora use o ctrl + F para achar no HTML do blog a linha: </head> e cole o seguinte código antes dela (veja no final deste tutorial como alterar o tamanho das imagens dos slides no blog).

<!-- Automatic Latest/Recent Post Slider For Blogger Start By www.exeideas.com-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<script style='text/javascript'>
//<![CDATA[
var showpostthumbnails_gal = true;
var showpostsummary_gal = true;
var random_posts = false;
var numchars_gal = 150;
var numposts_gal = 10;
var img_width = 550;
var img_height = 250;
function showgalleryposts(json){var numPosts=json.feed.openSearch$totalResults.$t;var indexPosts=new Array();document.write('<ul>');for(var i=0;i<numPosts;++i){indexPosts[i]=i}if(random_posts==true){indexPosts.sort(function(){return 0.5-Math.random()})}if(numposts_gal>numPosts){numposts_gal=numPosts}for(i=0;i<numposts_gal;++i){var entry_gal=json.feed.entry[indexPosts[i]];var posttitle_gal=entry_gal.title.$t;for(var k=0;k<entry_gal.link.length;k++){if(entry_gal.link[k].rel=='alternate'){posturl_gal=entry_gal.link[k].href;break}}if("content"in entry_gal){var postcontent_gal=entry_gal.content.$t}s=postcontent_gal;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){var thumburl_gal=d}else var thumburl_gal='http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');document.write(posttitle_gal+'</h2>');var re=/<\S[^>]*>/g;postcontent_gal=postcontent_gal.replace(re,"");if(showpostsummary_gal==true){if(postcontent_gal.length<numchars_gal){document.write(postcontent_gal);document.write('</span>')}else{postcontent_gal=postcontent_gal.substring(0,numchars_gal);var quoteEnd_gal=postcontent_gal.lastIndexOf(" ");postcontent_gal=postcontent_gal.substring(0,quoteEnd_gal);document.write(postcontent_gal+'...');document.write('</span>')}}document.write('<a href="'+posturl_gal+'"><img src="'+thumburl_gal+'" width="'+img_width+'" height="'+img_height+'"/></a></div>');document.write('</li>')}document.write('</ul>')}
//]]>
</script>
<style type='text/css'>
#slide-container {position: relative;height: 250px;width: 550px;font-family: calibri;}
.slide-desc {background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;color: #FFFFFF;padding: 5px;position: absolute;text-align: left;bottom: 0px;z-index: 99999;line-height:20px;}
.slide-desc h2 {display: block;}
#slider li {width: 550px;height: 250px;overflow: hidden;margin: 0;padding: 0;list-style: none;}
#prevBtn, #nextBtn {display: block;width: 30px;height: 77px;position: relative;left: -30px;text-indent: -9999px;top: -150px;z-index: 99999999;}
#nextBtn{left: 550px !important;top: -225px;}
#prevBtn a, #nextBtn a {display: block;position: relative;width: 30px;height: 77px;background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;}
#nextBtn a {background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;}
</style>
<!-- Automatic Latest/Recent Post Slider For Blogger Start By www.exeideas.com-->

Clique para salvar e entre na pagina layout do Blogger. Clique em adicionar gadget > HTML/javascript, cole esse outro código:

<div id="slider"><script src="http://www.dicasparablogs.com.br/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script></div>

Na primeira linha deste segundo código tem:
http://www.dicasparablogs.com.br/feeds....

Então troque pelo endereço do seu blog (não altere a parte /feed....) e clique para salvar.

Personalizar os Slides no Blog


Na primeira parte do código você poderá achar o trecho:

var numchars_gal = 150; - Numero de caracteres da descrição do post
var numposts_gal = 10; - Quantidade de posts que aparecem nos slides
var img_width = 550; - largura das imagens
var img_height = 250; - altura das imagens

Sobre Redimensionar Imagens você verá que a altura e largura das imagens também aparecem em outras partes do código com os mesmos números 250px e 550px, então altere da mesma forma que fez nesta configuração, ou seja, se alterar a largura das imagens para 400 neste código que falamos você precisa mudar todos os 550px que achar para 400px.

Outras opções que você encontrará no código é o tipo de letra (font-family: calibri;), cor da letra (color: #FFFFFF;) que você também poderá alterar como desejar. Veja aqui algumas dicas para ajudar a entender e modificar esses códigos:
O que é CSS? Para que Serve e Como usar o CSS
Espaçamento entre Linhas, Letras ou Palavras usando CSS/HTML
Código das Cores

Imagens das Setas para Navegar entre os slides


No código você pode achar 3 imagens hospedadas no photobucket que são as setas de navegação dos slides e o fundo semitransparente que aparece embaixo do titulo e resumo da postagem. Nós recomendamos que salve essas imagens e hospede no Blogger ou qualquer outro lugar que use para armazenar suas imagens, pois usar do jeito que está no código é correr o risco da imagem se excluída e você não poder recuperar.

Claro que você pode criar suas próprias setas para avançar ou retroceder os slides e assim personalizar como quiser os slides do seu blog. Veja alguns programas e dicas para editar imagens:
Site para Fazer Imagens Online e Criar Banners com Efeitos
Hospedar Imagens no Blogger - Hospedagem Grátis
Criar Banner para Blogs: Programas e Sites para Editar Imagens

Abaixo temos as imagens, o endereço de cada uma delas no código e o que cada uma delas faz. Assim você poderá trocá-las com facilidade.

http://i195.photobucket.com/albums/z105/dantearaujo/prev.png - seta voltar slide.
http://i195.photobucket.com/albums/z105/dantearaujo/next.png - seta avançar slide.
http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png - fundo semi transparente por baixo do texto.

Veja outras dicas de Gadgets úteis para blogs:
Gadget de Posts Aleatórios com Imagens no Blogger
Mostrar Lista de Postagens mais Compartilhadas em Redes Sociais
Colocar Gadget com Slides das Postagens Recentes do Blog

Encontramos esse código para colocar slides com as imagens ou fotos dos posts recentes no blog no site: EXEIdeas (em inglês). Achamos que esses scripts e html que ele usou neste sistema de apresentação de slides no blog bem simples de instalar e por isso publicamos aqui no Dicas para Blogs, esperamos que gostem e compartilhem essa idéia com outros blogueiros.

52 comentários:

  1. Fabiano sei que aqui nao tem nada haver com a minha pergunta.... mas me ajuda pelo amor de Deus ... do nada meu blog ficou doido... o sidebar saiu do lugar e foi lá pra baixo e o fundo que era branco ficou cinza :(

    sabe me dizer oq houve? e nao mexi no html do blog

    olha aí: http://ouvir-pagoneja.blogspot.com.br/

    me ajudaaaa ;/

    e engraçado que no template de que tinha salvo está direito....mas qnd fiz o upload dele ficou errado tb ;/

    ResponderExcluir
  2. já consegui resolver rsrs

    ResponderExcluir
  3. entrei no seu blog agora e pareceu normal (a sidebar está do lado do conteúdo)

    eu também vou dar uma opinião sobre outro assunto que você não mencionou: aquele seu pop up (janela flutuante) com anuncio talvez possa gerar problemas pois os visitantes e o google pode não gostar de um pop up abrindo em cada pagina

    ResponderExcluir
  4. Fabiano, essas setas em todas suas postagens, são imagens ou são tipo uma fonte? Obrigado

    ResponderExcluir
  5. João as setas que estão em nosso menu e também nos subtítulos dentro dos posts?

    não é uma fonte é uma imagem de fundo, veja o link abaixo:
    Imagem no título da postagem

    ResponderExcluir
  6. Fabiano, tem como fazer o meu blogger enviar mensagens automaticamente para e-mail de quem faz alguma coisa no meu blog? Por exemplo: "Alguém vai e segui meu blog" ai no e-mail dela vai aparecer uma mensagem tipo: "Obrigado por se inscrever em nosso blogger, Voltem Sempre" ou quando alguém vai comentar e ... Obrigado

    ResponderExcluir
  7. João acho que não tem como fazer esse tipo de mensagem para quem clica em seguir o blog.

    mas na maioria das vezes essas mensagens não tem grande utilidade e não fazem diferença, afinal se a pessoa já clicou para seguir o blog ela tem grande chance de voltar mesmo sem mensagens deste tipo.

    eu entendo sua idéia de ser gentil e criar mais ligação com a pessoa, mas não tenho esse tipo de código

    ResponderExcluir
  8. É só comigo que nenhum desses sliders de postagens recentes funciona? Já é o quarto ou quinto que eu tento num blog de testes e nenhum dá certo. O container aparece, mas fica um espação em branco.

    ResponderExcluir
  9. schreiyαrαi ۞

    não faltou nada quando você trocou o endereço do blog?

    tem que colocar o http://
    veja se não colocou duas ou nenhuma barra no final do endereço do blog antes do trecho feed...

    qualquer letra ou sinal errado neste trecho não deixa o código funcionar
    src="http://www.dicasparablogs.com.br/feeds/posts/default.....

    ResponderExcluir
  10. No meu Blog ñ deu certo , abaixo do slide aparece um espaço muito grande BRANCO , ''sem nada '' , fora isso o slide aparece normal .

    ResponderExcluir
  11. veja se a configuração do seu feed está correta.

    esse código usa o feed do blog para criar os slides

    ResponderExcluir
  12. Olá Fabiano.. Adorei o Slide..mas no meu blog ficou com um fundo escuro e e as imagens praticamente não aparecem..só as letras.. Por favor, me diz onde mexer para o fundo ficar claro e dinâmico.. :)

    Obrigada.

    ResponderExcluir
  13. é estranho acontecer isso o código não era para alterar a cor das imagens.

    se usar um template dinâmico talvez ele gere erros no código, se for esse o caso não tem como resolver.

    ResponderExcluir
  14. Fabiano,
    antes de mais nada agradeço as suas dicas que muito me ajudaram a construir o meu blog.
    Este é uma gadjet que já procuro há muito tempo e gostei do aspecto que mostra na imagem, mas no entanto nno meu blog ficou completamente diferente, não existindo qualquer forma de slide, nem aparecendo as setas.
    Será que me poderia ajudar?
    http://lusocarpediem.blogspot.pt/

    Muito agradecido,
    Rodrigo Afonso Silva

    ResponderExcluir
  15. Rodrigo na pagina editar html você colocou o código antes de < head >

    veja no tutorial o certo é colocar antes de < / head >

    esse detalhe da barra que gerou o problema pois do jeito que você fez o código ficou fora do head.

    ResponderExcluir
  16. O problema mantêm-se mesmo tendo alterado essa parte.

    ResponderExcluir
  17. outro detalhe é na hora de colocar o endereço do seu blog:

    src="http://www.dicasparablogs.com.br/feeds/posts/default?orderby=published

    qualquer letra ou sinal faltando dá erro.

    ResponderExcluir
  18. Ei me expliquem ai como deixar ele só na página inicial

    ResponderExcluir
  19. nao tem como por um ao lado do outro nao?

    ResponderExcluir
  20. Caique para as imagens ficarem uma do lado do outro não precisa de código de slides. Pode usar um código para imagens comuns (banners). Veja aqui:
    Organizar Banners

    ResponderExcluir
  21. deu certo só que o seguinte, eu queria botar uma imagem diferente para passar nos slides de cada postagem, tem como? Falae

    ResponderExcluir
  22. esse código não tem como trocar as imagens.

    só se alterar a imagem de cada postagem

    ResponderExcluir
  23. Gostei muito desse post...

    ResponderExcluir
  24. Gosto muito das suas postagens, eu não entendo muito de blog, o pouco que sei aprendi aqui com você!
    Deu tudo certo no meu slide, só que em baixo dele ficou uma faixa muito grande sem nada, fui em configuraçoes e alterei ( Configurações>>Outro>>Permitir feed de blog>>Completa>>Salvar Configurações.)
    mas aida nao deu certo o que eu faço?

    ResponderExcluir
    Respostas
    1. qual o endereço do blog?

      talvez seja algum outro código que está gerando o espaço vazio

      Excluir
    2. é esse o endereço http://kamylasacomori.blogspot.com.br/

      Excluir
    3. tem um trecho do código que está no lugar errado.

      <style type='text/css'>
      #slide-container {position: relative;height: 300px;width: 230px;font-family: calibri;}
      .slide-desc {background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;color: #FFFFFF;padding: 5px;position: absolute;text-align: left;bottom: 0px;z-index: 99999;line-height:20px;}
      .slide-desc h2 {display: block;}
      #slider li {width: 230px;height: 300px;overflow: hidden;margin: 0;padding: 0;list-style: none;}
      #prevBtn, #nextBtn {display: block;width: 30px;height: 77px;position: relative;left: -30px;text-indent: -9999px;top: -150px;z-index: 99999999;}
      #nextBtn{left: 550px !important;top: -225px;}
      #prevBtn a, #nextBtn a {display: block;position: relative;width: 30px;height: 77px;background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;}
      #nextBtn a {background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;}
      </style>

      onde você colocou esse trecho? tente achar e apagar, depois coloque novamente pela pagina design, veja aqui:
      Como Inserir Códigos no Blogger: Formatar Texto e Links do Blog

      Excluir
  25. Ooooi, Fabiano *0*
    Mds, demorei um ano pra conseguir botar isso + consegui '/-/'
    #SouNubVlwFlw
    Bom, msm assim eu tenho uma duvida o.O
    #SouNubVlwFlw²
    Não sei se você pois nesse post enorme, não vi, axo qe n botou, + tipo, qeria saber se tem alguma forma, maneira, algum jeito, de colocar segundos temporários para a troca de imagens!
    Por exemplo..

    Aparece uma imagem tisc tsc *
    Passa _ segundos tisc tsc *
    Aparece outra imagem tisc tsc *
    Passa _ segundos tisc tsc *
    Aparece outra imagem tisc tsc *

    E assim vai indo x.x
    Ou não tem como controlar os segundos entre cada imagem ?
    '-'
    ' - '
    ' - '
    Vlw pela ajuda *oo*
    Abrazzos e obrigado por criar esse blog lindo maravilhoso espetacular que me ajuda mtt
    Fuizz o/

    ResponderExcluir
  26. neste código não tem como controlar o tempo (segundos)

    ResponderExcluir
  27. Oi,
    O Slide nã está funcionando. espero que volte, é muito legal!
    Obrigada!

    ResponderExcluir
  28. esse slide depende de alguns códigos externos por isso as vezes pode haver falhas

    ResponderExcluir
  29. Oi!

    Faz um temponho os tenho nos meus blogs, recebo e-mails de vocês, sempre com novidades.
    Sempre estou atualizada com as novidades. Achei muito estranhos o slide não funcionar, nada mudei, apenas não funciona em todos os blog.

    Me dê uma dica, como faço para que funcione????

    Obrigada!!!

    ResponderExcluir
    Respostas
    1. houve um problema com os scripts externos... se eles não voltarem a funcionar então será necessário trocar o código completo pois não tem como corrigir

      Excluir
    2. Oi!

      Copiei o seu código, postei novamente .e não funciona.
      Veja como pode me ajudar. Não sei onde está o erro.
      Obrigada!

      Excluir
  30. Ficou um espaço muito grande entre o slide e os itens abaixo dele. Tem como diminuir? http://diariode-escritora.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. não achei o erro no código, mas pode tentar uma coisa.

      procure a linha position: relative;height: 400px;width: 700px;font-family: arial; e adicione o codigo !important

      assim:

      position: relative;height: 400px !important; width: 700px;font-family: arial;

      Excluir
  31. Simplesmente AMO seu blog Fabiano!
    Acompanho à tempo...

    Considero um dos melhores aparatos que existe (se não o melhor).

    Tudo que aprendo é sensacional, fiz até um banner daqui e coloquei no meu blog.

    Fiz tudo direitinho e etá alterei o tamanho, só que as imagens não passam (mudam) como slides :(

    Grande abraço.

    ResponderExcluir
  32. as imagens que você usa no blog estão no blogger ou copiou endereços de imagens hospedadas em outros lugares?

    as imagens tem que estar no blogger.

    se tiver muitas coisas (gadgets, imagens, gif animado...) no seu blog ele pode travar o código.

    ResponderExcluir
  33. Cara como faço para centralizar o Slides no blogger ?

    ResponderExcluir
    Respostas
    1. depois da linha: < style type='text/css' >
      coloque este código:

      #slider {margin:auto;text-align:center}

      mas esses slides usando vários códigos então não dá pra ter certeza se funcionará antes de testar

      Excluir
  34. Muito bom o post....masa conseguiram resolver o problema do espaco em baixo do slide ?

    ResponderExcluir
  35. vou fazer alguns testes e procurar um novo código para slides

    ResponderExcluir
  36. Olá Fabiano, fiz isso no meu blog, você pode acessar ele e me responder se tá lento?

    ResponderExcluir
  37. Ele é esse http://www.newsfoco.blogspot.com

    ResponderExcluir
  38. Respostas
    1. slides geralmente deixa o blog mais lento...

      veja se dá diferença no seu numero de visitas e tempo de carregamento da pagina no google analytics

      Excluir
  39. Olá, boa noite, pode me ajudar? como faço para colocar um slide para aparecer postagens só de uma TAG ou marcador?

    ResponderExcluir
    Respostas
    1. no tutorial falamos para adicionar um gadget com o código

      < div id="slider" >< script src="http://www.dicasparablogs.com.br/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"......

      altere o trecho http://www.dicasparablogs.com.br/feeds/posts/default colocando o nome do marcador que você quer deste jeito: /-/CSS


      então o código ficará assim:

      < div id="slider" >< script src="http://www.dicasparablogs.com.br/feeds/posts/default/-/CSS?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"......


      as /-/ são parte do código, mas o CSS é o nosso marcador que usamos para demonstração, portanto coloque o nome do marcador que você quiser usar, mas tem que ser escrito exatamente igual é o seu marcador, inclusive as letras maiúsculas. Em nosso exemplo se eu usar css com letra minúscula não vai funcionar.

      Excluir