Colocar Gadget de Miniaturas de Postagens Recentes
A instalação do gadget é muito simples: entre na pagina layout > adicionar gadget > HTML/javascript e cole o código abaixo:<div id='bp_recent'></div>
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
<script style='text/javascript'>
var numberOfPosts = 5;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 125;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://dicasparablogs.com.br/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
Como personalizar o Gadget de Posts Recentes
Veja algumas opções que você pode ou deve alterar para mostrar as imagens das postagens recentes no seu blogger. A principal configuração é nesta linha que fica no final do código:src=’http://www.dicasparablogs.com.br/feeds/posts/default?max-results=5&orderby=published
Você deve colocar o endereço do seu blog onde está o nosso (http://www.dicasparablogs.com.br), mas não altere o resto do código. O numero de miniaturas que deseja mostrar trocando o numero 5 neste trecho: max-results=5, mas também é necessário mudar a linha: var numberOfPosts = 5 usando o mesmo valor nas duas.
Outras opções do gadget:
var myMargin = 5; - espaço entre as imagens.
var imgDim = 125; - tamanho das imagens.
Veja outros gadgets para blogs:
Personalizar Gadget Postagens Populares do Blog - Barras Coloridas
Gadget com Postagens mais Recomendados nas Redes Sociais
Colocar Gadget com Numeração das Paginas do Blog
Veja abaixo a demonstração deste código em funcionamento.
Adorei e já estou usando!!!
ResponderExcluirEu adoro e recomendo muito aqui ^^
Beijus...
Amei a dica e claro vou ver se consigo colocar no meu blog...muito obrigada..
ResponderExcluirbeijos e sucesso!
http://blog-everygirl.blogspot.com.br/
Tem como configura para usar verticalmente (uma img abaixo da outra)?
ResponderExcluirJCM vou fazer uns testes e se possivel publicarei um tutorial sobre isso.
ResponderExcluirmas se deixar as imagens em tamanho grande elas ficam uma embaixo da outra, por exemplo se a coluna do blog tiver largura de 250 e você colocar o tamanho das imagens em 130 ou mais elas ficam uma embaixo da outra porque não vai caber duas lado a lado.
Adorei! muito bom e obrigado, ficou ótimo no meu blog http://blowxme.blogspot.com.br/
ResponderExcluirshow de bola, to usando ja.... muito boa a dica.... será que ñ dava para personalizar a altura e a largura com width e height ??
ResponderExcluirBertê você pode personalizar o tamanho da imagem aqui:
ResponderExcluirvar imgDim = 125;
mas ela é quadrada por isso não precisa alterar a altura e largura separadamente.
isso eu ja saquei fabiano, mas eu digo assim, e se eu quizesse alterar a altura e largura separadamente ?? haveria possibilidade ??
ResponderExcluirnão tem como fazer a configuração separadamente
ResponderExcluirOlá Fabiano...No meu blog não apareceram todas as imagens você pode me ajudar?
ResponderExcluirAleksandra esse tutorial só funciona com imagens enviadas ao blogger, ou seja se a postagem tiver uma imagem hospedada em outro site não vai funcionar
ResponderExcluirok! Resolvido o problema.Modifiquei as imagens. Ah... mais uma coisa já tentei colocar o
ResponderExcluirwidget '' você pode gostar de'' no blog,mas não consegui. Segui todos os passos bem pelo menos eu acho... vc pode me ajudar mais essa vez... grande abraço e obrigada pela ajuda. abraços
Olá Fabiano, tem como eu fazer essa dica com marcador especifico?
ResponderExcluirPara aparecer no gadget apenas, o marcador escolhido...
Rui Carlos é possivel fazer.
ResponderExcluirVeja esse trecho que está no final do código
....script src='http://dicasparablogs.com.br/feeds/posts/default?max-results=5&orderby=published&alt=json-in-....
altere o endereço do blog: http://dicasparablogs.com.br/feeds/posts/default
desta forma:
http://dicasparablogs.com.br/feeds/posts/default/-/Sites Úteis
o trecho Sites Úteis é o nome do marcador, mas você tem que escrever extamente igual está no seu blog inclusive as letras maiúsculas .
no exemplo que mostramos se escrever sites úteis não vai funcionar.
ou seja ficaria deste jeito:
http://dicasparablogs.com.br/feeds/posts/default/-/Sites Úteis?max-results=5&orderby=publish.....
Valeuu ae Fabiano...
ResponderExcluirA dica funcionou perfeitamente...
Fabiano,
ResponderExcluirgostaria de saber se tem como colocar borda ao redor do total de imagens. Se tiver também gostaria de saber se tem como mudar a cor da borda.
Outra questão, uma das minhas 5 imagens não aparece, nas configurações relacionadas a feed, já está em "completa". Se você poder me ajudar eu agradeceria muito.
Blog
www.mulheresquejogam.blogspot.com.br
email
kellendsm@hotmail.com
Obrigada por sua atenção
Kellen na pagina editar html você pode colocar esse código:
ResponderExcluir#bp_recent img{border: solid 1px #ff0}
para criar uma borda da cor que desejar
Obrigada
ResponderExcluirAdorei mas estou precisando que ele mostre o titulo da postagem e queria pode configurar a altura e largura da imagem...tem como?
ResponderExcluirHerbert nesta linha você pode configurar o tamanho da imagem
ResponderExcluirvar imgDim = 125;
mas ela será quadrada.
Fabiano beleza de post!
ResponderExcluirÉ possível alterar para que exiba as postagens populares? Uso imagens externas e o widget do Blogger não mostra as miniaturas. Preciso muito de mostrar as miniaturas dos posts mais acessados =/
Nanda Poziq infelizmente esse gadget só funciona para imagens enviadas ao blogger
ResponderExcluirminha sugestão é editar as postagens populares. Salve as imagens e envie as imagens para o blogger nas postagens populares.
quando editar uma postagem popular enviando a imagem ela passa aparecer a miniatura imediatamente.
só falta aparecer o titulo
ResponderExcluirno meu blog depois deste trecho:
ResponderExcluir<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
tem isso aqui que é o código do titulo
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
então você pode tentar fazer isso no seu blog, mas faça um backup antes de mexer no html
Cara no meu blog nao deu muito certo confira se poder http://universomangakabrasil.blogspot.com.br/
ResponderExcluirVinicius
ResponderExcluirentrei no seu site agora e parece normal..... qual o problema que você notou?
Não funciona no meu blog. Fiquei tão feliz quando encontrei esse gadget, mas não aparece nada na página do blog :-(
ResponderExcluirTestei em outro blog, mas só funciona com o feed do "dicas para blogs" com meus feeds não funciona... hummm, acho que já sei o que é! Vou entrar no feed burner e depois volto para contar se deu certo.
ResponderExcluirDeu certo!!
ResponderExcluirEu estava usando, no local onde é para eu colocar meu feed, o endereço do feed que colocamos no blog. Agora substitui pela alimentação (feed) original, que fica no feedburner. Obrigada
MAIS UMA DÚVIDA!
Se eu quiser adicionar feeds de blogs de outra plataforma que nAo o blogger, não vai funcionar?
:-)
...E eu de novo!! Há como fazer essas imagens flutuarem? quase como um slide?
ResponderExcluirRenata não testei o código com feed de outros blogs então não sei dizer se funciona.
ResponderExcluirfazer slide usando esse código não dá mas é possivel fazer imagens deslizando usando o código marquee, veja aqui: Banners deslizando
não publiquei o outro comentário como você pediu, mas não tenho os códigos para ajudar nisso.
ResponderExcluirmas se publicar feeds de outros blogs é plagio e poderá ser penalizada pelo google. (mesmo que o outro blog seja seu também) por causa do conteúdo duplicado
Fabiano,
ResponderExcluirNao da pra fazer com dois marcadores diferentes, eu tentei fazer e colocar em lugares diferentes do blog, mais eles entram em conflito e acabam ficando tudo junto.
É possivel fazer separadamente?
Fernando acho que não tem como usar duas vezes o mesmo código na mesma pagina.
ResponderExcluirmas você poderia usar o código em uma pagina extra do blog e depois usar esse link como menu
Ótimo gadget, exatamente o que eu estava procurando...
ResponderExcluirNão ha maneira de as miniaturas funcionarem com publicações apenas com um video?
ResponderExcluirNelson
ResponderExcluirvídeos não geram miniaturas, então a solução é colocar uma imagem dentro da postagem que tem vídeo
Olá!
ResponderExcluirPor acaso esse gadget funciona como postagens aleatórias? Eu usei outro tutorial para postagens aleatórias do seu blog...porém quando instalei deu conflito com o script do slide. Testei esse e funcionou perfeitamente, mas quero configurá-lo para mostrar postagens aleatórias. É possível?
P.S. O que sugere para evitar esses conflitos de scripts?
está falando deste outro código:
ResponderExcluirGadget de Posts Aleatórios com Imagens no Blogger
tentei adaptar esse mas deu erro
Sorry. Confundi as coisas. rs
ResponderExcluirTestei tantos gadgets similares a esse que não lembro mais a origem dele.
Mas eu testei outro gadget com postagens aleatórias do seu blog (http://www.dicasparablogs.com.br/2013/06/postagens-imagens-aleatorias.html)...achei a formatação legal, mas daí percebi que nem sempre ele aparecia quando atualizava a página. Acho que comentei na postagem a respeito.
Vc postou outro código esse aqui: http://www.dicasparablogs.com.br/2013/01/gadget-posts-aleatorios-imagens-blogger.html
Eu gostaria de saber se dava pra colocar as imagens lado a lado ao invés de uma lista. Dá?
infelizmente no caso daquele código não posso alterar para colocar lado a lado
ExcluirFabiano tem como colocar os títulos das postagens embaixo das fotos?
ResponderExcluircom esse código não tem como colocar o titulo embaixo das fotos.
Excluirmas vou modificar o código e se funcionar corretamente publicarei um novo tutorial sobre isso nos próximos dias.
obrigado pela sugestão.
Olá Fabiano, gostaria de saber se no lugar das postagens mais recentes tem como colocar postagens aleatórias ?! :)
ResponderExcluirveja esse outro link:
ResponderExcluirGadget de Posts Aleatórios com Imagens no Blogger
Como se faz pra mesclar isso no cabeçalho? Ou pra fazer um efeito hover quanto tu passa o mouse na imagem? Preciso muito aprender isso...
ResponderExcluirprecisa adicionar um código css para criar o efeito hover (não é no mesmo lugar que coloca esse código do tutorial).
Excluiro código do efeito hover é
#bp_recent img:hover {border: solid 1px #000}
se precisar de ajuda para colocar os códigos css veja aqui:
Como Inserir Códigos no Blogger: Formatar Texto e Links do Blog
e veja também:
Efeito Girar (Rotacionar) Imagens ao Passar o Mouse usando CSS
E se eu quiser exibir também a data e quem postou (Autor) que ponto eu teria que altera nesse código.
ResponderExcluirtroque a palavra false por true na linha:
Excluirvar showPostDate = false;