Esse código é muito parecido com o Gadget de Posts Aleatórios com Imagens. A única diferença entre eles é que esse gadget do link o titulo da postagem aparece ao lado da imagem e esse que vamos mostrar agora o titulo aparece escrito sobre a imagem com uma aparência muito semelhante ao gadget dePostagens Relacionadas do nrelate.
Entre na pagina layout > adicionar gadget > HTML/javascript e coloque esse código:
<style type="text/css">
/* BloggerSentral Recent Posts Image Gallery CSS Start */
.bsrp-gallery {clear:both;}
.bsrp-gallery:after {display: table;clear: both;}
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 12px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.bsrp-gallery a img {background: #fff;float: left;border: 2px solid #000;}
.bsrp-gallery a:hover img {padding:1px;border: 1px dashed #000;}
/* BloggerSentral Recent Posts Image Gallery CSS End */
</style>
<script>
// Tutorial at http://www.bloggersentral.com/2013/05/recent-posts-image-gallery-for-blogger.html
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from BloggerSentral.com">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
hoje = new Date()
numposts = (5 +(2*(hoje.getSeconds())))
var bsrpg_thumbSize = 140;
var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>
Como Personalizar o Gadget
Você pode alterar alguns detalhes no código como, por exemplo, trocar o endereço da imagem que aparece caso não seja possível localizar o thumbnail (imagem) na sua postagem, isso é feito trocando esse endereço de imagem:http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s72-c/default+image.png
Veja como é simples Hospedar Imagens no Blogger
Para escolher se o gadget mostrará as postagens recentes ou postagens aleatórias modifique esse trecho do código:
numposts = (1 +(hoje.getSeconds()))
Desde jeito o gadget mostra posts aleatórios, mas se quiser mostrar postagens recentes troque essa linha por:
numposts = 1
Esse numero 1 pode ser alterado, por exemplo, se colocar o numero 5 a lista de posts recentes começa na sua quinta postagem mais recente. Sobre os posts aleatórios eles são "sorteados" entre os 60 posts mais recentes do seu blog, portanto se o seu blog ainda não tiver essa quantidade de postagens poderá gerar erro.
Layout do Gadget e Tamanho das Imagens
Você pode alterar o espaço entre as imagens modificando essa linha de código:.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 20px
O valor 15 é o espaço ao lado de cada imagem e o numero 20 o espaço abaixo então altere como achar melhor.
Para alterar as bordas das imagens modifique o código border nessas linhas:
.bsrp-gallery a img {....
.bsrp-gallery a:hover img {....
Veja aqui sobre: Colocar ou alterar as bordas
A quantidade de imagens (links de postagens) é nesta parte do html: max-results=4, apenas altere o numero 4 para a quantidade que desejar.
Finalmente o tamanho das miniaturadas das imagens é nesta parte: var bsrpg_thumbSize = 145. Então faça testes para ajudar o tamanho das imagens ao seu template mas lembre-se que quanto maior a quantidade e tamanho das imagens mais lento seu blog ficará. Leia sobre: Editar e Otimizar as Imagens do Blog: Carregar Imagens mais Rápido.
Adaptamos esse código a partir do tutorial publicado no Blogger Sentral (em inglês) e esperamos que goste deste acessório para seu blog e que ele ajude a manter as pessoas mais tempo no seu blog afinal a principal utilidade de gadgets de posts relacionados é fazer as pessoas visitarem mais paginas do blog para diminuir a taxa de rejeição e assim melhorar seu posicionamento no Google, conseguir que mais pessoas compartilhem suas postagens e muitas outras vantagens de fazer as pessoas visitarem mais paginas do seu site.
Demonstração do Gadget de Postagens Aleatórias (Aperte o F5 e veja outras imagens)
Olá, eu gostaria de saber se eu consigo escolher apenas um marcador para exibir as imagens?
ResponderExcluirFico no aguardo!
Dar pra fazer isso com marcador especifico?
ResponderExcluiré possivel fazer isso com apenas um marcador.
ResponderExcluirquase no final do código tem essa linha::
script src=\"/feeds/posts/default?start-index=.....
troque esse trecho por:
script src=\"/feeds/posts/default/-/Marcador?start-index=......
a palavra Marcador é o nome do marcador que você quer, mas precisa escrever exatamente igual está no seu blog inclusive letras maiúsculas, por exemplo, aqui no Dicas para Blogs temos o marcador Gadgets se colocar no código "gadgets" com letra minúscula não vai funcionar (o mesmo vale para acentos e espaços em branco).
Meu Deus muito obrigado! Você não sabe o quanto eu procurei por isso :')
ExcluirNo meu não deu certo! Eu coloquei lá bem direitinho e não pegou. Como meu blog começou agora postei só 5 coisas no marcador e mesmo assim não mudou nada. O que faço?
Excluirda para colocar TODAS as postagens ou somente nas últimas 60 postagens ???
ResponderExcluirna linha de código
ResponderExcluirnumposts = (5 +(2*(hoje.getSeconds())))
altere o numero 2 por 3, 4, 5.....
cada numero que aumentar são mais 60 postagens.
Consegui... Muito obrigada!!!! ;)
ResponderExcluirFabiano,
ResponderExcluirObrigado pela resposta, deu certo aqui no meu blog, você é o cara rsrs.
Só mais uma pergunta, eu consigo centralizar as imagens dentro do gadget, tentei colocar a tag center mais não rolou.
Lucas
ResponderExcluirneste código usamos o float: left; isto faz a imagem ficar a esquerda, se quiser apagar está no trecho:
.bsrp-gallery a img {background: #fff;float: left;border: 2px solid #000;}
não consigo centralizar o gadget, ja mudei left para center e não deu certo
Excluiro float é que faz as imagens ficarem lado a lado, para centralizar o texto do gadget o código é
Excluirtext-align: center
não existe float:center
nao consigo centralizar o gadget o que preciso apagar?Fabiano?
Excluircentralizar o gadget inteiro?
Excluirse for altere a primeira linha do css .bsrp-gallery, deste jeito:
.bsrp-gallery {clear:both;text-align: center;margin:auto}
ooi, eu nao estou conseguindo achar o HTML/javascript na part ede add um gadget :(( me ajuda ?
ResponderExcluirBrenda entre na pagina layout, clique no botão adicionar gadget e procure por html/javascript
ResponderExcluirFabiano,
ResponderExcluirE da pra colocar esse codigo no wordpress?
esse código é feito com base no feed gerado pelo blogger eu não testei no wordpress.
ResponderExcluirmas tente colocar o endereço do seu blog nele para ver o que acontece. Se funcionar veja se não deixou sua pagina muito lenta
faz um tempaõ que eu estava atrás de um codigo desses , obrigada mesmo
ResponderExcluirTem como deixar ele na vertical o invés de horizontal para deixar na lateral do blog?
ResponderExcluirmas o código como está eles já aparecem na vertical... se no seu blog não está aparecendo um do lado do outro é porque está com pouco espaço (largura da coluna onde está o gadget)
ResponderExcluirAcho que esse blog é um dos melhores que eu acesso quando quero melhorar meu Blog. Vocês estão de parabéns.
ResponderExcluirprojetonebula obrigado pelos elogios..
ResponderExcluirOlá!
ResponderExcluirFuncionou aqui, mas nem sempre que atualizo a página as postagens aleatórias aparecem. Hora aparecem, hora não aparecem. Sabe dizer alguma causa?
http://musicacafe.blogspot.com.br/
fiz alguns testes e notei o problema também... contudo ainda não achei como arrumar isso.
Excluirassim que possível vou publicar um novo post sobre o assunto
Hummm
Excluirpensei que fosse problema de conflito de scripts.
Tudo bem! Obrigado pela atenção!
Obrigado!
se tiver muitos scripts no blog isso também pode causar falhas e deixar seu blog mais lento.
Excluirse achar que tem scripts demais no seu blog sugiro que remova algum que tenha pouca utilidade, assim seu blog pode carregar mais depressa. Mas isso não deve ser a solução para esse bug do código.
Muito bom, obrigado.
ResponderExcluirBoa tarde Fabiano, era exatamente este tipo de widget que estava procurando, porém com os títulos logo abaixo das imagens, e que eu pudesse regular o tamanho e não encontrei nem mesmo nos sites internacionais. Mas este que você publicou é muito bom e estou usando.
ResponderExcluirAbraços,
Aldo
Olá amigo! Tem como adaptar esse script para exibir posts recentes de um blog externo? Grato.
ResponderExcluirsim é possível fazer.
Excluirna parte final do código procure por:
script src=\"/feeds/posts/default?.....
e adicione o endereço do blog antes do "/feed", desta forma:
script src=\"http://www.dicasparablogs.com.br/feeds/posts/default? .......
Ola Amigo urgente me ajude a s resolver um problema nesse script! meu problema e que, nas novas postagesn nao esta mais aparecendo as imagens das postagens - meu blog olha ai http://blogarafaelcds.blogspot.com.br/
ResponderExcluirnotei que as imagens do blogger agora aparecem com o endereço https e por isso não aparece a miniatura da imagem na pagina inicial.
Excluirapenas apague esse s no https e deve funcionar.
e como eu faço isso?
Excluircomo eu faço isso?
ResponderExcluirquando estiver criando a postagem.
Excluirem vez de usar a guia escrever use html assim poderá visualizar os códigos.
mas acho que em breve o blogger corrigirá esse problema
vlw amigo - problema resolvido - e eu jurava que era só o meu - quando acessei paginas de amigos percebi que algo de errado estava acontecendo no blogger, mas sem saber o que era, VLW AI PELA DICA UM ABRAÇO
ExcluirMuito bom, parabéns pelo gadget!
ResponderExcluirFabiano, tem como por os links abaixo da imagem, ou seja colocar o titulo das postagens abaixo da imagem?
ResponderExcluirtente apagar a linha
Excluir.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 12px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
mas eu não testei.
esse tipo de código é possível alterar mas tem que refazer o código completo e infelizmente não tenho isso pronto.
ok nunca consegui kkk faz ele ai coloca os titulos em baixo
Excluirno trecho do código:
Excluir< a href="' + postUrl + '" title="' + postTitle + '" >' + imgTag + pTitle + '< /a >
tente trocar de lugar os itens: imgTag + pTitle
colocando deste jeito:
pTitle + imgTag
Tem como tirar essa proporção de quadrado e colocar outra?
ResponderExcluirsim, é possível retirar a proporção.
Excluirporém as imagens podem ficar distorcidas dependendo da largura da imagem de cada post.
caso queria fazer, procure essa linha:
orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c'
e apague o -c no final, deixando assim:
orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + ''
Olá, Fabiano!
ResponderExcluirMuito, muito obrigada pelo código e por todas as formas de personalizá-lo. Gostaria de perguntar mais uma: tem como tirar o título da postagem? Minhas imagens iniciais já contém o título.
Tentei trocar algumas coisas no código mas não deu certo.
o código do titulo da postagem é < data:post.title/ >
ResponderExcluirvocê deve procurar e apagar no seu html, mas tem varios, portanto faça testes até achar o certo... e confira também a versão para celular do seu blog quando estiver fazendo os testes.
Obrigada, mas acho que escrevi mal. Quis dizer o título da postagem que aparece nesse gadget.
Excluirtente fazer um teste
ResponderExcluironde está < span class="ptitle" >' + postTitle +
apague o + postTitle +
Sensacional, deu certo!
ResponderExcluirMas precisou deixar um dos sinais de +.
Muito obrigada!
Agora voltei a movimentar meu blog www.atituderocknroll.com.br e este codigo me ajudou muito para deixar mais informações para meus vizitantes, obrigado pelo belo artigo.
ResponderExcluirMuito obrigado!
ResponderExcluirSABE COMO INVERTO A ORDEM DE EXIBIÇÃO? DO ULTIMO POST APARECER PRIMEIRO?
ResponderExcluirnão tenho código para fazer a postagem mais antiga aparecer primeiro
ResponderExcluir