Postagens recentes em miniatura abaixo do cabeçalho

setembro 08, 2015


Pessoal,vou ensinar a colocar o gadget de postagens recentes abaixo do cabeçalho. 
Primeira coisa: DEIXE SEU BLOG EM MODO PÚBLICO.
Abra o seu painel do Blogger >> Layout >> Adicionar novo Gadget >> HTML JavaScript >>
Dentro da caixa que abrir, cole o seguinte código e salve

Posicione o gadget logo abaixo do cabeçalho.

<center><style type="text/css">
/*INICIO CSS FOTOS*/

.bsrp-gallery {
margin-top:90px; /*== Distância do topo ==*/
width:1100px; /*== Largura do Slide==*/
float:left!important; /*== Posição do slide ==*/
margin-left: 10px; */== Afasta o slide da esquerda para o centro ==*
clear:both;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 20px 10px 0;
text-decoration:none;
}

.bsrp-gallery .bs-item .ptitle {
background:#FFF; /*==Cor de fundo do título ==*/
display: block;
clear: left;
font-family: Arial /*==Font do título==*/
font-weight:bold;
text-transform:uppercase; /*==Tds as letras em maiusculo==*/
font-size:13px; /*==Tamanho da letra==*/
line-height:1.3em;
height:50px;
position: absolute;
bottom:0%;
text-align: center;  /*==Centraliza o título==*/
color:#333; /*== Cor da letra==*/
width:94%;
padding:8px;
word-wrap: break-word;
overflow:hidden;
}

/*===cor de fundo com o mouse==*/
.bsrp-gallery .bs-item .ptitle:hover {
background:#333;
color:#fff;
text-align: center;
}
.bsrp-gallery a img {
background: #fff;
float: center;
}

.bsrp-gallery a:hover img { /*== Grau de transparência das fotos == */
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}

/*FIM CSS FOTOS*/
</style>


<script>
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" >'];
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 : '';
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 = 2;
var bsrpg_thumbSize = 250;
var bsrpg_showTitle = true;
document.write("<script src=\"http://www.LINK DO SEU BLOG.com.br//feeds/posts/default?start-index="+numposts+"&max-results= 4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>
</center>

Entendendo o código:
Em AZUL é onde você pode aumentar ou diminuir o tamanho das miniaturas;
Em ROSA é onde você pode aumentar ou diminuir o número de miniaturas que vai aparecer;
Em VERDE é onde você deve colocar o endereço do seu blog;

Você precisa saber que só vai funcionar se o seu blog estiver público, blogs privados ocultam o gadget. Em alguns blogs, as imagens só aparecem dentro das miniaturas se a primeira foto da sua postagem for adicionada pelo computador, se você só colar  o link da imagem no post ela pode não aparecer. 

É isso, fácil e muito útil. Qualquer dúvida, deixe nos comentários.

Obs: Post atualizado em 07/08/16

Compartilhe esse post:

  1. Eu devo er muito ruim, não tô conseguindo nem com o passo a passo, kkkkkk

    ResponderExcluir
    Respostas
    1. Cacau eu dei uma olhada no seu blog e ele ta funcionando direitinho. O único problema é que ele tá muito longe do topo, basta alterar isso editando a quarta linha do código onde tá escrito MARGIN-TOP:503px; altere esse valor para 100 ou 150px que já vai ser suficiente. Arraste o gadget um pouco mais para a esquerda também, basta editar em MARGIN-LEFT:10px; coloque em -50px que já vai melhorar bastante. Beijo!

      Excluir
  2. Oi, o meu não ta aparecendo, primeiro ele apareceu na lateral e agora nao aparece mais :( Pode me ajudar?

    ResponderExcluir
    Respostas
    1. Luana você viu se o seu blog tá publico ? E se ele tem mais que 5 postagens e se essas postagens tem fotos ? Pode ser também que você tenha apagado sem querer algum ponto e vírgula do código. Refaça os passos com atenção que você consegue. O código está funcionando certinho já testei ele hoje e não deu erro.

      Excluir
    2. Sim, está tudo certinho, verifiquei tudo e tenho mais de 5 postagens com foto :/ Ainda não consigo colocar, não aparece :/

      Excluir
  3. Oi comigo funcionou, mas não ta aparecendo as fotos, será que é porque eu copiei a imagem, ao inves de enviar do computador?

    ResponderExcluir
    Respostas
    1. Oi Thamíris, olha, no meu blog só funciona se a primeira foto for enviada do computador, mas as outras da postagem pode ser da web. Faz um teste pra ver com uma imagem do pc.

      Excluir
  4. Olá, bom dia. Passando só pra agradecer pelo belo template que vc disponibilizou e por toda a explicação, estava com MUITA dificuldade de colocar os posts recentes no topo, porém com os comentários e todas as explicações eu finalmente consegui, depois de quase 3 horas tentando rsrs... MUITO obrigada mesmo e parabéns pelo seu trabalho.

    PS: Meu blog está em manutenção, o deixei privado, mas assim q terminar vc pode vir me visitar rsrs... http://www.depoisdosim-blog.blogspot.com.br/

    bjus... <3

    ResponderExcluir
  5. Oi eu instalei o layout mas nao aparece as postagens e nem a numeração da pagina, o que eu faço? :C
    www.raylinnerhanna.blogspot.com.br

    ResponderExcluir
    Respostas
    1. O seu blog está em modo publico??? Essa é a primeira recomendação do post. Siga todos os passos acima e verifique se o seu blog está publico. Outra coisa, seu blog tem que ter postagens com fotos e a numeração também só vai aparecer se o blog tiver mais que uma página de postagem, pelo menos 10 posts.

      Excluir
  6. Oi, de novo. :D
    Então, eu consegui e está funcionando perfeitamente.
    É só uma pergunta mesmo.
    Eu posso escolher a foto que vai aparecer?
    Se, sim... como eu faço?
    Desde já obrigada pela atenção.
    Abraços

    ResponderExcluir
    Respostas
    1. Oii! Olha, ele escolhe automaticamente a primeira foto do post. Mas ele dá preferência para fotos enviadas do computador. Por exemplo, se a primeira for da web e a segunda do pc, ele vai escolher a segunda. Isso é o máximo que vc consegue controlar. Estou acompanhando seu blog! Beijo

      Excluir
  7. Oi. Lindo
    Tentei copiar o código mas não consigo!!

    ResponderExcluir
  8. Oi, eu segui todos os passos e não esta aparecendo nada no meu blog. Li os comentários e pra poder aparecer tem que ter no minimo 5 postes?

    https://floreslivros.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Sim, precisa. Mas de uma olhada se ele esta em modo público, esse geralmente é o maior motivo de erro. E também confirme se no código que você copiou está o endereço do seu blog. Bjs

      Excluir
  9. Oii, tudo bom?
    Eu to seguindo todos os passos mas não to conseguindo :(
    http://www.exclusivament.com.br/

    ResponderExcluir