Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

06 julho 2009

Gadget de Posts Rotativos

Encontrei no Blog Doctor um gadget muito interessante que mostra todos os posts do blog como um pequeno slide. Você pode ver uma demostração aqui neste blog de testes, na sidebar.

Eu fiz algumas modificações no estilo original e disponibilizo aqui  uma versão que se adapta a qualquer largura de coluna, seja na sidebar, seja acima dos posts.

O gadget mostra todos os posts do blog, do último publicado ao primeiro, e exibe o título do post, autor, data e um pequeno resumo do texto.


 

Copei todo o código do gadget escolhido, vá em Layout, Adicionar Elemento de Página e escolha HTML/JavaScipt e cole o código, fazendo as seguintes modificações:

<script src="http://www.google.com/jsapi/?key=PUT_AJAX_KEY_HERE" type="text/javascript"></script>
  <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">
 function showGadget() {
 var feeds = [
 {title:'title',url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
        ];

 new GFdynamicFeedControl(feeds, 'feedGadget',
 {numResults : 1000, stacked : true, title: "BLOG_TITLE ~ Random Posts."});
    }
 google.load("feeds", "1");
 google.setOnLoadCallback(showGadget);
 </script>
<div id="feedGadget">Loading...</div>

  • Onde está AJAX_KEY_HERE deve ser colocada a chave da API de pesquisa AJAX, que você obtém clicando aqui. Concorde com os termos e condições, coloque a url do seu blog e copie o número fornecido e cole no local indicado;
  • Onde está MYBLOG coloque o nome do seu blog;
  • Onde está BLOG_TITLE ~ Random Posts. coloque o título que preferir para o gadget.

Artigos Relacionados

42 comentários:

Klaylton Fernando disse...

Oi Ariane eu te sigo no Twitter, e gosto muito de passar aqui só para ver as novidades, através deste comentário queria só que voce me add no orkut.
bboyguil@hotmail.com
eu sou Administrador do Blog Conexão Brasil HIp Hop, dar uma olhadinha lá.
www.conexaobrasilhiphop.blogspot.com
Agradeço!!!

Weverton Guedes disse...

Olá Ariane!
Adorei esse gadget, porém ao inclui-lo na coluna de postagem, ao invés de ficar certinho centralizado ou no canto esquerdo, ele fica pra lá do centro com uma trecho em cima da outra coluna. Poderia me ajudar? Desde já agradeço!

Luiz Otávio disse...

é bem interessante, mas no meu blog ficou gigante, apareceu todas as postagens mesmo... abraço

Unknown disse...

Otimo valeuu muito obrigado

Chris Gar disse...

Muito legal, Ariane..Parabéns!!!

Ariane disse...

Weverton, posso sim! Tinha um erro no código (já arrumei) mas para vc não precisar instalar de novo, altere o valor de width em #feedGadget para width:580px;

Luiz Otávio, como pode ver, comigo deu certo. O que eu queria saber mesmo é pq vc retirou os créditos do Template Blue....

None disse...

Olá Ariane!
Eu gostei muito deste gadget, pois faz com que as postagens mais antigas não fiquem esquecidas.
Ah, na área MY BLOG eu escrevi quase a mesma coisa "mewbrog"
rsrsrsrsrsrs

♫ Quelccy ♫ ('This Sound Smeels Rainbow') disse...

Oi Ariane! Adorei seu blog! Está me ajudando muito mesmo! Obrigada! Mudei totalmente a cara do meu blog depois que te encontrei! Mil beijus!
http://thissoundsmellsrainbow.blogspot.com/

Osnar Andrade disse...

Super bacana essa dica^^
Num dexa os posts antigos serem esquecidos .
Parabéns.

Anônimo disse...

Oi Ariane, nesse meu 1º comentário no seu blog, gostaria de parabenizá-la e agradecê-la por suas dicas, elas sempre foram e ainda estão sendo muito úteis para mim.
Interessante essa sua dica, muito embora o Wonzio tenha o widget bem parecido com esse. Valeu!!!

Cris... disse...

nossa amei esse aplicativo...muito util...mas o meu está aparecendo com a lateral cortada =(. Se vc puder me ajudar agradeço...
Tbm gostaria muito de permitir que meus visitantes se cadastrassem e recebecem por email informações sobre minhas atualizações. Vc sabe como posso fazer isso????

muito obrigada
http://cris-modabatoneblush.blogspot.com/

Ariane disse...

Cris, disponibilizei agora um código único que se adapta a qualquer largura de coluna, se vc quiser substituir o novo pelo anterior, fica melhor e aí basta acrescentar o nome do seu blog e a chave, como antes. Para enviar por email as atualizações, vc precisa se cadastrar no FeedBurner, pois este serviço é oferecido por eles, ok?

Chris Gar disse...

Persiste a dúvida qto a alteração de cores

Ariane disse...

Bleffe, se vc notar a primeira parte do código - O CSS, onde está colocado o estilo do gadget- encontrará a propriedade background (mais de uma vez) . Altere os valores das cores em background e vá visualizando as mudanças antes de salvar, até que fique do seu agrado.

Marcos Takata disse...

Ariane, em meu blog ficou GIGANTE com todas postagens. Não ficou como um slide. Que fazer. Obrigado

Ariane disse...

Marcos, você fez as mudanças necessárias no código, colocando a chave e o endereço do seu blog?

Recanto da Rose disse...

Olá, Ariane!!!
Gosto muito das dicas que você disponibiliza para nós blogueiros.
Inseri no meu blog, o Receitas Saborosas, duas dicas que você postou: o Gadget de Posts Rotativos e o Hack Leia Mais Resumo de Postagem ficaram show.
Também inclui um link para a tua página no meu blog.
Se quiser dar uma conferida é http://recantodarose.blogspot.com/
Abraços,
Rose

Vilma Pires disse...

Ariane te acho o máximo.Tentei colocar o gadget de posts rotativos e deu erro com relação ao meu feed,você pode me ajudar?Obrigada.

Ariane disse...

Vilma me indica em que blog colocou e deixa ele lá, mesmo com o erro, para que eu possa ver o código, ok?

Anônimo disse...

O meu deu o mesmo problema que a Vilma! :/

Luna Sanchez disse...

Ariane,

Parabéns pelo blog, obrigada pelas dicas, que já me ajudaram e ajudam muito.

Sobre esse gadget, coloquei no meu blog, gostei da idéia, mas devo ter errado alguma coisa quando alterei as propriedades, porque ele ficou "pulando", aumentava ou diminuía um pouquinho, a cada troca de pots...

Minha pergunta : tem como colocar imagens como links, ao invés do resumo do post? Se não, me explica como fazer um slide (ou algo parecido), em que passe as imagens de todos os posts, sendo que elas levem ao post referido, quando clicadas? Quero colocar isso na sidebar.

Muito obrigada.

[Professor Carlão] disse...

Olá Ariane!

Gostaria de saber se é possível destacar no blog os posts mais acessados pelos leitores do meu blog. Como posso fazer isto? Muito grato. Um forte abraço!

Wellshofar disse...

olá Ariane, primeiramente parabéns pelo blog!
super útil, gostaria de colocar um link seu em meus blogs.
tenho uma dificuldade. vc pod me ajudar?
esse foi o erro que deu no meu gadget: "Feed could not be loaded."
vc pod me ajudar?
meu email: wellingtonshofar@gmail.com
meus blogs:dandoumamaozinha.blogspot.com
http://wellington-negocios-online.blogspot.com
sucesso!

MDSBezerra disse...

Olá,

Pesquisei o seu blog e não achei um post sobre minha dúvida... então, peço licença para perguntar aqui:

Tenho curiosidade em saber qual o limite (capacidade) da plataforma blogspot...

Quantos hits por dia um blogspot suporta sem dar pau?

Sei que blogs hospedados (no pacote básico) geralmente dão pau a partir de uns 100.000 hits por dia (quanto você teria que fazer um upgrade na sua hospedagem).

E o blogger? Tem algum limite? Se tem, qual é?

Um abraço.

Filipe "Angelus" Ragazzi disse...

O meu fica dando:

"Feed could not be loaded."

Não faço idéia porque.

:(

Filipe "Angelus" Ragazzi disse...

Agora deu certo!!

Ficou foda o blog.

Muito Obrigado!

Victor Reis disse...

Olá,gostaria de pedir uma ajuda para configurar corretamente este slide,pois ele ficou desformatado,meu endereço é:http://victorreispba.blogspot.com/
Muito obrigado!

Ariane disse...

Victor o problema é que a sidebar é muito estreita (180px) e um padding-right:20px; Tenta aumentar a largura da sidebar para 200px e substituir o padding-right por padding-right:10px; Também ajudaria colocar uma altura fixa no gadget (onde está height:auto, colocar uma altura fixa, como height:200px).

Anônimo disse...

Muito bom! Já instalei no meu blog e funciona perfeitamente. Muito obrigada por mais esta dica. Boa semana pra você.
Vera

Anônimo disse...

Infelizmente nao consegui(não consegui encontrar onde modifico,é no gadget ou na estrutura da pagina?),acho que vou desistir,muito obrigado por tentar me ajudar!
victorreispba.blogspot.com

Unknown disse...

O meu eu coloquei na sidebar. Desde que eu coloquei, ta escrito "loading" e fica nisso. Não muda! Pq será? Alterei tudo direitinho... Help, please!

Unknown disse...

oi
não conseguir colocar no meu! :( Aparece "loading" e não sai disso. Alguém pode me ajudar?

Unknown disse...

Ariane, agora o problema é "Feed could not be loaded" pq será?

helppp

Unknown disse...

Ariane tentei falar com vc pelo twitter mas não deu certo :(
Estou seguindo os tutoriais para fazer meu próprio layout, e estava indo tudo em quando descobri que em outro computador meu blog ficava desconfigurado!
Me lembrei que estava trabalhando em um computador com a resolução baixa, e resolvi editar visualizando no laptop, que é muiito mais alta.
No primeiro pc eu usava o IE e no laptop uso o googlechrome.
Usei aquele site para visualizar meu blog em outros navegadores e vi que estava um desastre.
Mudei tamanho do width da sidebar e do main-wrapper, margin, padding e nada muda! não sei, mas acho que aconteceu isso quando coloquei essa visualização de posts.
o meu blog é www.e-letradas.blogspot.com
me ajude! eu só peço ajuda quando não sei mais o que fazer!
bjos

Ariane disse...

Bibiana tenta colocar float:left; em navigation. talvez isso ajude

Unknown disse...

hahaha

COMEÇOU A FUNCIONAR MISTERIOSAMENTE! hehhe

Obrigado de qualquer forma.
A ferramenta é show! Pra quem quiser ver como ficou: http://dreycka.blogspot.com

Bjs

Anônimo disse...

Obrigado, não tenho nada a reclamar. Instalei esse gadget e antes tinha o seu template Chronos, mas ele tinha alguns probleminhas, por isso agora uso um tal de "Ele", que eu fiz algumas alterações. Parabéns por tudo.

Vento Carioca disse...

Olá!
Obrigada pela dica, ficou ótimo .
Parabéns pelo blog.
Obrigada

Marcos disse...

Olá,

Ariane,

Esse gadget "Posts Rotativos" funciona de imediato, ou somente quando os feeds são enviados pelo feedbuner?


Tentei seguir o tutorial, mas, não funcionou no meu blog.

Ficou apenas no "Feed could not be loaded."

Abç

João Moreira disse...

Oi Ariane!

Está no meu blog de testes e funciona bem, mas está aparecendo meu email antes do nome:
por arieromsalik@yahoo.com.br (Arierom Salik)-
05 Jul 2009.
Tem como evitar? Mas gostei da dica.=)

Obrigado; Arierom.

Joe Carvalho disse...

Oi Ariane:
Bem, não consegui instalar o seu gadget dos posts rotativos. Sou novo no blogger e segui tudo certo, mas fiquei em dúvida quando logo no início vc disse:

"Copei todo o código do gadget escolhido, vá em Layout, Adicionar Elemento de Página e escolha HTML/JavaScipt e cole o código, fazendo as seguintes modificações:"

A opção "ADD elemento da página" que vc diz é a mesma "elemento da página" ou precisa ter o "add" antes? Uma outra pergunta: A opção HTML/Java Script é dentro dela ou é aquela aba do lado que diz "editar HTML"?
Caso seja a mesma, eu fiz dentro dela no código fonte que aparece lá, porém nada aconteceu, nem mesmo uma mensagem de loading ou erro. Ah, eu tb já entrei no site para pegar o código que disse e fiz todas as substituições no código que passou.
Estou quase desistindo. Me dá uma luz?

Abraços.

Anônimo disse...

Olá Ariane. Instalei o gadget no meu blog e funcionou direitinho, mas eu queria saber se tem como as postagens aparecerem aleatoriamente, sem seguir a ordem cronológica? Obrigada. Luciana

Postar um comentário

Os comentários são moderados.