Fazer Apresentação de Slides no Blogger com as Postagens Recentes

Encontramos um código para mostrar as postagens recentes do blog em forma de apresentação de slides. Isso pode ajudar a gerar mais pageviews fazendo seus visitantes conhecerem mais postagens do seu blog e assim dando mais chances das pessoas gostarem do seu blog ou recomendarem seu blog em redes sociais.

slides das postagens recentes no blog

Esse código de slides é simples de usar, mas você precisa ter cuidado na hora de fazer as alterações para não apagar nada por engano no código. Entre na pagina modelo clique para adicionar um gadget e escolha a opção html/javascript então coloque esse código:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.frasescurtas.com.br/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>


Agora veja aqui as alterações que pode fazer para personalizar os slides no seu blog:

Imagem para o thumbnail (miniatura da imagem) quando a postagem não tem imagem:
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

Largura total do slide:
#spylist ul{
width:320px; altere o valor 320 neste trecho do estilo CSS.

Tempo para trocar cada slide: intervalspy=4000

Tamanho da imagem no slide:
thumbwidth = 70; - largura
thumbheight = 70; - altura

Se quando alterar o tamanho da imagem os slides aparecer cortados no seu blog então faça o ajuste no CSS do slide alterando o valor 350 neste trecho:
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}

Mudar o tamanho da fonte do título da postagem no slide:
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:16px; - altere o valor 16

Quantidade de postagens mostradas nos slides e endereço do seu blog:
numposts = 10;
home_page = "http://www.frasescurtas.com.br/";

Depois que terminar só precisa salvar as alterações no gadget e pronto já tem slides dos posts recentes no seu blog, veja nos links abaixo outras dicas relacionadas a postagens recentes e slides para seu blog:

Fazer Pagina com Atualizações mais Recentes do Blog
Lista aleatória das postagens recentes do blog
Colocar Slides ( Power Point) no blog
Como fazer Apresentação de Slides com Banners

Lembramos que você não precisa alterar todos esses itens antes de usar os slides, alias nós sugerimos que altere somente o endereço do seu blog e faça um teste para ver os slides com suas postagens recentes funcionando no seu blog e depois personalize como quiser aos poucos, ou seja, faça uma alteração, salve e visualize o blog, pois desta forma que cometer algum erro será fácil identificar qual foi o trecho que errou.
Related Posts with Thumbnails

Link desta Pagina

Compartilhe essa Página

98 comentários:

  1. Maneiro. Pode avaliar meu blog ? http://foco-news1.blogspot.com/

    ResponderExcluir
  2. Matheus Augusto
    é dificil avaliar um blog tente descobrir o que os seus visitantes gostam mais, leia aqui: Usar Informações do Contador de Visitas para Melhorar o Blog

    muita gente pede minha opinião sobre blogs, mas certamente seus visitantes podem dar informações bem mais uteis sobre o que deve fazer ou não no seu blog.

    ResponderExcluir
  3. Fala, Fabiano!

    Primeiro, parabéns pelo seu excelente trabalho nesse site. Tem sido bastante útil pra mim e para muitos amigos blogueiros meus.

    Cara, a minha dúvida não é relacionada a essa postagem, mas eu usei a caixa de pesquisa do seu site e não encontrei nada relacionado.

    Ontem coloquei aqueles botões do addthis no meu blog. Até aí tudo bom. Hoje quando entrei no blog, percebi que o link que aponta a quantidade de comentários na página inicial sumiu.

    O detalhe é que quando entro na postagem, lá embaixo o link e/ou os comentários aparecem normalmente. Portanto o problema é apenas na página inicial.

    Você poderia me ajudar a resolver esse problema?

    Grato, desde já!

    ResponderExcluir
  4. Já estou a utilizar. Muito obrigado mesmo. Tenho acompanhado o blog desde o dia que subscrevi. Optimas dicas, muito bem explicadas e com conteúdos fantásticos. O blog do sucesso.
    Continuação de um óptimo trabalho :9
    Abraço!

    ResponderExcluir
  5. Olá pessoal!!

    O link não funciona no meu blog, o que será que está acontecendo? Copiei o link e só mudei o endereço do blog e mais nada mais nao funciona. Só funciona com o código sem alterar, poderiam me ajudar por favor? Gde abraço!

    ResponderExcluir
  6. Oi,queria saber qual e o codigo CSS que meche com o Título das postagens e o do H2,aguardo respostas...

    ResponderExcluir
  7. Legal.
    Mas acho que não funcionou, no meu ele não teve slide.

    ResponderExcluir
  8. Fabiano, eu achei esse tutorial muito bom! Eu usei no meu blog e recebi vários comentarios que gostaram!
    Ah, e eu queria te falar uma coisa, lá em cima onde você colocou o seu banner e o código, você escreveu Veja outros Banes, ao invés de Veja outros Banners.

    ResponderExcluir
  9. Fabiano, mas uma nota dez, só lembrando que não esqueçam também de alterar a homepage: home_page = "http://full-tricks.blogspot.com/";

    ResponderExcluir
  10. Fabiano será que você me tirar um dúvida? é que eu coloquei um contador de visitas desde quando fiz meu blogger no contador tem dizendo 457 visitas, porém no painel de controle do blogger na aba estatisticas lá tem a seguinte frase "Histórico de todas as visualizações de página 745", eu verifiquei e todos os meu blogger estão da mesma forma com o contador diferente com as estatisticas do blogger??? por esta assim? no seu tambem é assim? qual é o certo e qual é o errado??

    ResponderExcluir
  11. ah o contador que uso é este http://fr.web-counter.net/

    ResponderExcluir
  12. Wilson Hebert talvez tenha apagado algo por engano, mas veja aqui: Como Ativar a Opção Responder Comentarios no Blogger e compare com o html do seu blog

    Wilker obrigado pelos elogios

    Katia Ribeiro Acessórios veja que no código o link tem o http:// e no final tem outra barra. você colocou o seu link assim?

    ImOrTaL_SiEgHaRt normalmente o titulo da postagem é o estilo h2 ou h3, mas pode ter algo mais por exemplo .post h2{... ou coisas desse tipo

    Luiz Felipe veja se usou o endereço correto e não apagou nada por engano

    Anônimo obrigado por avisar foi erro ao digitar rsrs

    Ben o contador do blogger mostra visualizações(pageviews) e não visitas unicas

    ResponderExcluir
  13. Olá consegui e gostei muito valew

    ResponderExcluir
  14. Fabiano, deu certinhoooo...!!
    Obrigada querido!

    Bom Dia!

    ResponderExcluir
  15. Muito bom já coloquei no meu blog.
    Obrigada.
    Abraços
    Vanessa

    ResponderExcluir
  16. Valeu! já coloquei no meu blog!

    A cada nova postagem que vc posta meu blog fica mais interessante! Obg!

    ResponderExcluir
  17. Fabiano,estou colocando um slide em um template que estou fazendo,mas no titulo da imagem do slide aparece minha imagem que coloquei no H2 como tiro isso ???
    blog com o Template:http://teste-fgc.blogspot.com/

    A e me fale uma nota sobre o Template de 0 a 10!

    Aguardo a reposta...

    ResponderExcluir
  18. Postagem show Fabiano!!!
    Já tô usando!!!Dá também pra colocar o código numa página extra do blog!
    Obs: corrige o título do post, a palavra "Apresentação" tá digitada errado, apenas um detalhe comparado à utilidade do post!
    Bjs...Elis.

    ResponderExcluir
  19. Fabiano, queria saber como faço para que o no meu blog tenha apenas páginas selecionadas para ficar como essa sua que está como "Sidebar".
    E já aproveitando, como sempre, eu criei um modelo personalizado no photoshop de sidebar para colocar no blog,eu queria já fazia algum tempo a parte onde tem seguidores, quem eu sou, arquivos (etc.) personalizado para não ficar apenas naquele retangulo então criei, mas não sei onde coloco o html que peguei na internet, por acaso você sabe? Se puder faz um post sobre isso. Obrigada.

    ResponderExcluir
  20. Elis Culceag
    vou corrigir, obrigado por avisar

    ResponderExcluir
  21. Letícia Mayumi
    passar o template para html é complicado. provavelmente precisará dividir as imagens e depois colocar no html, veja aqui: Template do Blog, colunas de tamanhos iguais

    a idéia é essa do link, mas é claro a forma que fará a divisão depende de como é seu template


    ImOrTaL_SiEgHaRt
    não posso dar uma nota, acho que deve publicar o blog e ver a reação dos seus visitantes só assim poderá descobrir o que é melhor

    ResponderExcluir
  22. Olá mas para aparecerem as imagem onde se colocam nos artigos???

    ResponderExcluir
  23. Gostas de rir ?!
    o código usa as imagens que colocou nas postagens, isso é automatico

    a linha imgr[0] = "http://i43.tinypic.com/orpg0m.jpg"; é para postagens que não tem imagens

    ResponderExcluir
  24. Fabiano precisava falar de nota não era so me ajudar com o Baguio do Slide que eu coloquei no blog num sei bem mais,no Título do slide aparece a imagem do meu H2 como posso tirar ?

    blog com slide:http://teste-fgc.blogspot.com/

    Aguardo resposta...

    ResponderExcluir
  25. a já ia esquecendo e quando você poem o mouse por cima aparece no canto esquerdo meu H2,ponha o mouse por cima do slide para ver.
    Aguardo resposta...

    ResponderExcluir
  26. ImOrTaL_SiEgHaRt
    não tem slide no seu blog...

    Gostas de rir?!
    explicar o que do código? os detalhes sobre como alterar estão no tutorial.

    em qual parte está com duvidas?

    ResponderExcluir
  27. Duvida nos seguintes? para que servem?
    icon = " ";
    limitspy=4
    intervalspy

    ResponderExcluir
  28. '-'
    Claro que tem,e nesse blog:http://teste-fgc.blogspot.com/

    ele ta no Header em Notícias embaixo do Menu e acima da publicidade,se aparecer uma imagem para e so esperar carregar a página!!

    Aguardo respostas...poderia colocar o slide(da outra postagem) que vc fez em um blog pra min ver como fica ?

    ResponderExcluir
  29. Gostas de rir ?!
    esse código é uma adaptação de outro código então algumas variaveis dele não tem utilidade para os slides mas são utilizados no script original (http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js)

    limitspy=4 é a quantidade de slides
    intervalspy=4000 é o tempo para trocar

    ResponderExcluir
  30. ImOrTaL_SiEgHaRt

    no estilo .jdGallery .slideInfoZone h2
    { background-image: none;!important;
    font-size: 12px !important;
    margin: 2px 5px !important;
    color: #FFFFFF !important;
    }

    adicione background-image: none;!important; como coloquei acima

    ResponderExcluir
  31. eu colei e apareceram postagem q nao sao de meu blog
    onde mexer pra aparecer meus posts?
    e tenho q alterar o codigo a cada novo post?
    nao entendi
    me ajudaaa???

    ResponderExcluir
  32. Nessinha Carvalho

    você só precisa colocar o endereço do seu blog nesta linha:
    home_page = "http://www.frasescurtas.com.br/";

    depois ele faz a atualização com as novas postagens automaticamente

    ResponderExcluir
  33. AGORA DEU CERTO
    SOU MEUIO LERDA NESSAS COISINHAS A AINDA

    VELU A DICA

    ResponderExcluir
  34. Muito bom Show de Bola. Vou avisar os meus amigos do blog

    ResponderExcluir
  35. como inserir a url de cada imagem postada para aparecer no slides

    ResponderExcluir
  36. não precisa colocar o endereço de cada pagina.

    só coloca o endereço do seu blog e o código se atualiza sozinho com base no feed do seu blog

    ResponderExcluir
  37. Como resolver?Os blogs que eu sigo não consigo recuperar,foram excluidos de um dos meus blogs. o item configuração de lista de blogs não funciona.Que fazer? obrigado

    ResponderExcluir
  38. Marley
    você trocou o template ou alguém teve acesso a sua conta google que usa no blogger?

    é muito estranho dizer que a lista de blogs não funciona, mas o seu blog não funciona na lista ou você não consegue colocar a lista no seu blog?

    sobre os blogs que segue alguém pode ter excluido voce ou alguém que sabe sua senha.

    ResponderExcluir
  39. gostei!! tem como colocar as miniaturas do vídeo de cada postagem?

    ResponderExcluir
  40. mUITO OBRIGADO COLOQUEI NO MEU BLOGER E DEU CERTO VALEU MESMO...

    ResponderExcluir
  41. Elias Bento
    esse código pega as miniaturas das imagens não tem como fazer com videos pois o tipo de arquivo é diferente

    ResponderExcluir
  42. MuitOOoo bomm!Adorei já está na no meu blog!
    MuitOo obrigada!
    Conheça:www.lauramferreira.blogspot.com

    ResponderExcluir
  43. Segui meu blog e comenta só tenho um seguidor(Eu)
    mundogospelcomjesus.blogspot.com obrigado parabéns pelo seu site continue postando

    ResponderExcluir
  44. Cara, parabéns, muito bom esse código. Por favor me faça uma visita sankaverdade.blogspot.com

    ResponderExcluir
  45. parabens muito bom! tenho como fazer um desse com a mesma configuraçãoes, porem estático, ou seja,com os post parado, sem ser em forma de slide.

    ResponderExcluir
  46. Valdiney
    existe um gadget de postagens recentes ou postagens populares, então é só usar um deles

    ResponderExcluir
  47. Obrigado. Avalie o meu blog... tenho algum problema nos posts de cima: http://nacynhoproducoes.blogspot.com/

    ResponderExcluir
  48. o importante é tentar descobrir o que os seus visitantes gostam mais.

    ResponderExcluir
  49. Fabiano ! , tenho uma enorme dúvida , sou meio que "iniciante", não entendi na parte que diz "Entre na pagina modelo clique para adicionar um gadget e escolha a opção html/javascript então coloque esse código:" , clikar em adicionar um gadget , onde é que ta a opção html/javascript ? Oo

    ResponderExcluir
  50. é na pagina layout > adicionar gadget

    lá abre uma janela com varios gadgets e um deles é html/javascript que serve para colocar códigos

    ResponderExcluir
  51. Muito bom. Só mais uma coisa: como faço pra deixa-lo na horizontal? brigado

    ResponderExcluir
  52. Valdiney sua idéia foi muito boa e facil de fazer (pelo menos no teste que fiz)

    apague a linha width:220px; neste trecho:

    #spylist ul{
    width:220px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }


    e aqui troque float:none; por float:left;
    #spylist li {
    width:208px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:70px;

    ResponderExcluir
  53. Sensacional!!

    Porém, no teste que estou fazendo, não aparece os textos do post. só o Título, data e comentários.

    Tem como resolver?

    ResponderExcluir
  54. Parlapatão

    esse código não mostra o texto é só do jeito que está na imagem que postamos no inicio do tutorial

    ResponderExcluir
  55. Fabiano,

    Sabe de algum que também aparece um trechinho do texto?

    Obrigado!!

    ResponderExcluir
  56. Uma dica, se não quiser mostrar a imagem do Tinypic é só retirar esse link:

    http://i43.tinypic.com/orpg0m.jpg

    ResponderExcluir
  57. Olá, tudo bem?
    Coloquei os slides, mais não está aparecendo as minhas postagens, o que devo fazer?
    Obrigada....

    ResponderExcluir
  58. veja se não colocou nada errado no código, as vezes faltou algum detalhe por exemplo ; / " > ' ou qualquer coisa assim

    ResponderExcluir
  59. Olá,gostaria de saber como alterar os títulos e fotos dos slides,porque eles apareçeram com o endereço de um blog chamado Frases Curtas.

    ResponderExcluir
  60. tem que alterar o endereço do blog nesta linha

    home_page = "http://www.frasescurtas.com.br/";

    ResponderExcluir
  61. Não deu muito certo,onde era pra estar os slides,está tudo branco!!!

    ResponderExcluir
  62. Mariana Rosa veja se alterou corretamente a linha
    home_page = "http://www.frasescurtas.com.br/";

    não pode faltar o http nem a barra no final

    a configuração do seu feed está na opção completa?

    ResponderExcluir
  63. Peço uma ajuda, porque consegui colocar mas as letras os titulos das postagens aparecem cortadas, por favor.

    ResponderExcluir
  64. Denóvio Cossa letras cortadas? não entendi.

    não aparece o titulo completo ou tem um traço no meio das letras?

    se for o traço entre na pagina editar html procure e apague o código:

    text-decoration: line-through;


    veja mais aqui: Efeitos em links (sublinhado, sobrelinha, tachado)

    ResponderExcluir
  65. O meu ficou muito bom mas não consigo colocar na lateral, só quer ficar no meio, já alterei a css e nada.

    ResponderExcluir
  66. O meu não está funcionando.. ele está na lateral, todo direitinho, porém, não tem movimento.
    pode me ajudar?

    ResponderExcluir
  67. Cristiane Avolio

    você trocou o endereço do seu blog nesta linha:

    home_page = "http://www.frasescurtas.com.br/";

    mas tem que deixar a barra no final do endereço.

    ResponderExcluir
  68. Cara eu tenho um blog pessoal um blog meu mesmo, ele é publico, quando eu coloco esse código fica certinho mas eu mudei para "Somente esses leitores" que no caso eu escolho quem vai ler meu blog, quando eu fiz isso eu percebi que esse código não funciona nessa função, me ajuda ai cara, quero muito esse código funcionando na função "Somente esses leitores"!

    ResponderExcluir
  69. Ronielisson não sei explicar o motivo da falha.

    mas se o seu template for algum modelo que baixou pronto talvez tenha algum erro no código gerando esse problema

    ResponderExcluir
  70. muito bom o post!!!

    vejam meu blog:
    http://voceconhecia.blogspot.com.br/

    ResponderExcluir
  71. Caríssimo Fabiano, boa noite.

    Criei um blog em 07/2011 (www.sudoestelatosensu.com), e desde essa data o tenho aperfeiçoado seguindo muitas de suas fantásticas dicas.

    O gadget desta postagem foi uma das dicas que utilizava, e até o último domingo ele funcionou muito bem, só que parou, sem que eu tivesse realizado qualquer alteração em qualquer parte do blog.

    Passei a utilizar o gadget que você criou na postagem de 03/2010 (http://www.dicasparablogs.com.br/2010/03/mostrar-slides-com-as-postagens.html), mas este não funciona no IE.

    Se for possível, aponte uma solução, para um ou outro gadget funcionar por completo.

    Forte abraço, e parabéns pelas excelentes dicas!

    ResponderExcluir
  72. Valdelio com as atualizações de navegadores alguns códigos passam a dar problemas...

    vou pesquisar por novos códigos de slides, mas nos testes que fiz com alguns eles sempre apresentam diferenças entre os navegadores

    ResponderExcluir
  73. Puts cara... eu usei e mt esse HTML. Ele é ótimo!... só que a uns dias eu postei meu facebook no blog... ai do nada as imagens em slide não roda mais... e não sei oque faço para conseguir que elas apareçam... visite meu blog e me ajude por favor!!... ^^

    http://naofoirevelado.blogspot.com.br/

    obrigado....

    ResponderExcluir
  74. talvez tenha apagado algo no código sem perceber

    ResponderExcluir
  75. meu blog estava funcionado certo e erepente parouuu
    não sei pq

    ResponderExcluir
  76. pode ser alguma falha momentânea nos sites onde estão hospedados as imagens ou códigos...

    ou se você colocou algum outro código pode ter apagado algo por engano

    ResponderExcluir
  77. Como eu coloco uma imagem do meu computador no meu slid do blog?

    ResponderExcluir
  78. Pedro antes de colocar a imagem no slide você precisa enviar a imagem ao blogger e pegar o endereço dela, veja aqui:
    Hospedar Imagens no Blogger - Hospedagem Grátis

    ResponderExcluir
  79. eu fiz tudo direitinho as edições, fiz ate 3 vezes para conferir mais não ta aparecendo, eu não apaguei nada e troquei todos os links me ajuda pfvr fabiano

    ResponderExcluir
  80. verifique o endereço do seu blog nesta linha do código

    home_page = "http://www.frasescurtas.com.br/";

    tem que ser deste jeito com o http e a barra no final

    ResponderExcluir
  81. Copiei o código todo e só alterei a home-page... observando tudo! desde o "http://www ..... até o final .br/"... não funciona! No meu blog, aparece apenas o título do gadget... e o espaço reservado a eles fica em branco. Já verifiquei o feed do meu blog, está na versão completa...
    abraços
    www.pedalsolepoeira.blogspot.com.br

    ResponderExcluir
  82. infelizmente esses códigos dependem de arquivos externos e se tiver alguma falha não temos como corrigir

    ResponderExcluir
  83. Ola fabiano tenho o blog www.brasiltab.net e tenho um codigo html de gadget queria saber se tem como colocar ele pra atualizar tipo de 5 em 5 segundos ele atualiza aotomaticamente tem como pode ajudar meu skype: walberth_badboy

    ResponderExcluir
  84. para alterar o tempo dos slides faça um teste alterando aqui:


    intervalspy=4000

    ResponderExcluir
  85. Fabiano já tentei diversas vezes colocar esse slide e não consigo, aparece tudo em banco. Coloco o endereço do jeito informado com barra e tudo mais , todavia nada dar certo. coloco do jeito que está em baixo:


    home_page = "http://tempoespirita.blogspot.com.br/";

    Veja se pode me ajudar

    http://tempoespirita.blogspot.com.br/

    grato!

    ResponderExcluir
  86. Diamante Negro parece que houve um problema com algum script deste código.

    vou procurar um código para corrigir isso mas por enquanto não tenho como ajudar

    ResponderExcluir
  87. muito bom mas nao to conseguido fazer

    ResponderExcluir
  88. Depois de colar precisa mudar alguma coisa nos códigos antes de salvar.Porque eu colei e salvei e não ta aparecendo não.

    ResponderExcluir
  89. infelizmente um arquivo externo (.js) que está no final do código foi removido, por isso o código não funciona.

    vou fazer alguns testes e publicar outro código para slides em breve

    ResponderExcluir