Tutorial: Postagens Recentes em destaque


Hey Gente ! Tudo bem ? Pra quem não sabe eu trabalho com design a quase dois anos e tem muitas coisas legais que aprendi nesse tempo de experiência, então decidi compartilhar com vocês vários tutoriais de design pra ajudar quem faz seu próprio layout e não entendi muito de design. O tutorial de hoje é de como colocar miniaturas de postagens recentes em destaquesO código original peguei no blog da Janaína Poderon, modifiquei algumas coisas e trouxe pra vocês, espero que gostem !

O Resultado é esse:

Gostou ? Quer aprender como faz ? Então vem comigo !

1- Vá em Layout >> Adicionar um Gadget >> HTML/JavaScript:

2- Cole o seguinte código dentro da caixa:
<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-left: 40px;
width:1200px; ==LARGURA DO SLIDE==
float:center; ==POSIÇÃO DO SLIDE==
clear:both;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 10px 10px 0;
text-decoration:none;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}
.bsrp-gallery .bs-item .ptitle {
background:#; /*==COR DA ÁREA DE TITULO==*/
display: block;
clear: left;
font-family: 'Open Sans Condensed', cursive; ==FONTE DO SLIDE==
font-weight:200;
text-transform:uppercase; /*== LETRAS MAIÚSCULAS==*/
font-size:16px; /*==TAMANHO DO TITULO==*/
line-height:1.3em;
height:50px;
position: absolute;
bottom:-25%;
text-align: center; /*==POSIÇÃO DO TITULO==*/
color:#000; /*== COR DO TITULO==*/
width:95%;
padding:6px;
word-wrap: break-word;
overflow:hidden;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}
.bsrp-gallery a img {
background: #;
float: left;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}
.bsrp-gallery a:hover img {
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;}
/*FIM CSS FOTOS*/
</style>
<script>
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="">'];
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 =1
var bsrpg_thumbSize = 250;
var bsrpg_showTitle = true;
document.write("<script src=\"http://www.omelhordemim.com/feeds/posts/default?start-index="+numposts+"&max-results=3&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>

Modificações:
 Em vermelho está o tamanho das miniaturas.
 Em verde está o link do seu blog.
 Em azul está o número de miniaturas a serem exibidas.

OBSERVAÇÃO: Para esse tutorial funcionar o seu blog precisa estar em Público e com o Feed ativo.

Dúvidas ? Sugestões ? Deixe seu comentário :)
Beijos e Fiquem com Deus !
Pin It

40 comentários:

  1. Adoro o layout do seu blog!!

    Mil beijos,
    http://smileandbeforeverbeautiful.blogspot.pt/

    ResponderExcluir
  2. Oi linda,
    Obrigada por compartilhar o que sabes, nos ajuda muito !
    Beijos U&B
    Adriana
    www.unhasebocas.blogspot.com.br
    Instagram @blogunhasebocas
    https://www.facebook.com/pages/Unhasbocas/477832645611169?fref=ts

    ResponderExcluir
  3. Adorei o post, mais Mica cê sabe não entendo muito de HTML.
    Mas gente que Lay lindoooo amei amei esse dourado com rosa ficou show.

    Beijos
    Saudades posta mais.

    http://blogmundodakah.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Ahhh que linda, Fico feliz que tenha gostado ^^
      Xero !

      Excluir
  4. Simples assim, amei o tutorial amiga, e bom que você simplifica tudo e deixa as coisas mais bonitas kk
    beijos
    Filha do Rei

    ResponderExcluir
  5. Ahhh Janaína foi quem fez meu layout!! Eu não sabia que vc tb é design!!
    Ótimas sugestões..é bom qnd vcs compartilham!!
    bjs
    http://prosadepenteadeira.blogspot.com.br/

    ResponderExcluir
  6. Ahhh que legal ! Vou tentar ! :)

    Obrigada por compartilhar sua linda !

    Beijo.

    | O Blog Que Não é Blog |

    | Canal no Youtube |

    ResponderExcluir
  7. Ahaaaasou no tutorial! Vou tentar colocar no meu blog, tentei colocar na semana passada por outro tutorial mas desorganizei tudo, rs! Beijos

    www.coisasdemair.com.br

    ResponderExcluir
    Respostas
    1. É chato quando acontece, mas vai dar certo sim ^^
      Beijos

      Excluir
  8. Eu sou péssima nessas coisas, juro haha. Mas acho super legal você ensinar, e adoro posts em destaque nos blogs!

    beijo
    www.blogbelatriz.com
    YouTube Belatriz
    Fanpage: Facebook Belatriz

    ResponderExcluir
  9. Adorei o tutorial, obrigada por compartilhar!
    Vou tentar colocar no meu blog ;)
    Beijo!

    http://brigadeirodeamora.blogspot.com.br/

    ResponderExcluir
  10. O meu a menina que fez meu lay colocou, porque se depender de mim eu bagunço TUDO no meu blog kkkkkkkkkkkkkkkkkkk. Acho ótimo dar essas dicas assim <3 Você é demais, Mi.

    www.vodkaescarpin.com.br

    ResponderExcluir
    Respostas
    1. kkkk que bom que ela faz por você
      Linda <3 Obrigada

      Excluir
  11. Que dica maravilhosa! Amoo quando bloggers compartilham esses tutoriais pois facilita a vida de muuuita gente, viu! ahah
    E seu blog está lindoooo, que layout maravilhoso <3
    Aliás, estou fazendo um post de compilado de melhores posts que vi nas últimas semanas e inclui o seu indicando templates grátis porque tu arrasou nas dicas mais uma vez! haha

    Beijão
    http://www.perigosasgarotas.com.br/

    ResponderExcluir
    Respostas
    1. Muito Obrigada flor ^^ Vou la ver, mesmo estando atrasada :\
      Beijos

      Excluir
  12. Que dica maravilhosa *_*

    PS: O layout do blog está lindo <3
    www.saidaminhalente.com

    ResponderExcluir
  13. AMEI E JÁ PEGUEI PRA MIM. ♥♥♥♥♥♥♥
    Obrigada amore.
    Já estou seguindo com certeza!
    Visita o meu cantinho?
    vivyanlourds.blogspot.com.br
    Um beijo. ♥

    ResponderExcluir
  14. Ótimo post! Amei <3
    Obrigada.

    Com carinho,
    Fernanda Macena.

    http://ideepregaiblog.blogspot.com.br/
    @fer.macena ♥

    ResponderExcluir
  15. Seu layout é lindo! Você sabe mesmo mexer com html? Sempre quis estar por dentro disso, mas simplesmente não consigo. Me aventuro as vezes, mas volto pra estaca zero hhahahah
    Adorei a dica! Já tenho esse html no meu blog, mas não fui eu quem colocou hahaha
    Adorei teu blog!
    Beijos
    Vitoria
    www.vitoriadozzo.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada flor, sim eu sei mexer em HTML, Adorooo !
      Beijos

      Excluir
  16. Ai obrigada pela dica! hahahaha eu estava atrás de uma tutorial desse, adorei <3

    Beijos,
    rodoviadezenove.com.br

    ResponderExcluir
  17. Opa, ótima dica!
    Beijinhos

    www.ericacruz.com.br

    ResponderExcluir
  18. Muito bacana esse tutorial e não é difícil de fazer, já favoritei o post para utilizar futuramente :D

    http://confissoesdeumaaprendiz.blogspot.com.br/

    ResponderExcluir
  19. Que dica ótima, salvou a minha vida hahaha!
    Obrigado, beijos ♥
    www.queridaidade.com.br

    ResponderExcluir
  20. Adorei seu post, já tem muito tempo que estou buscando melhorar meu blog e colocar os posts recentes era um sonho pra mim. Simplesmente adorei. Tem alguma forma de mudar a forma (de circulo para quadrado)?

    Parabéns e obrigada!
    http://claudineiarosa.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Tem sim flor é só você apagar o seguinte código todas as vezes que ele aparecer:

      border-radius:200px;
      -moz-border-radius:200px;
      -webkit-border-radius:200px;

      Espero que ajude, beijos

      Excluir