Postagens Aleatórias ou Postagens Recentes com Imagens

Gadget para mostrar Posts aleatórios na sidebar do Blogger com imagens usando o mesmo estilo dos assuntos relacionados que muitos blogs usam no final das postagens. Esse é um código HTML que permite você escolher se quer mostrar os novos posts do seu blog ou links de postagens diferentes cada vez que a pagina é carregada. Além disso, é possível escolher o tamanho da miniatura da imagem (thumbnail) e a formatação do titulo da postagem. Veja no final deste tutorial uma demonstração do gadget em funcionamento.

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)