Logo



Posts Recentes



quarta-feira, 4 de novembro de 2015

TUTORIAL - como colocar posts recentes em miniatura no blog ♥



Oi gente, tudo bem com vocês? Eu espero que sim... Como vocês puderam perceber, tenho focado nos posts de tutorial para blog essa semana, eu acho um assunto bem legal, pois eu não sabia nada sobre isso há a algumas semanas atras, fui aprendendo, e SOZINHA. Pra que 'tá começando agora e não tem muita intimidade com html, vai ser uma mão na roda. Eu espero ajudar bastante, e que vocês gostem! É bem rapidinho e facil :)7

Bom, vamos lá.

Copie esse código:

<br /><br /><center><style type="text/css">

.bsrp-gallery { width: 1200px !important; background: #fff; margin: 0 55px 0; clear:both; margin-top: 20px; float: center !important; text-align: center !important; }
.bsrp-gallery:after { display: table; clear: both; background: #fff; }
.bsrp-gallery .bs-item a { border: 8px solid #fff; position: relative;background: #fff; float:left; margin: 0 0px 10px; margin-right: 20px; text-decoration:none; }
.bsrp-gallery .bs-item .ptitle {
background: rgba(53,50,49,0.7); display: block;  transition: ease .7s; clear: left;  font-size: 20px; font-family: 'Montserrat'; text-transform:none; line-height:1.3em;  font-weight:400; height: 25%; width:91%; position: absolute; bottom:0%; text-align: center; padding:80px 10px 80px 10px;
color:#fff; word-wrap: break-word; overflow:hidden; text-transform: uppercase;
padding-top: 85px; filter:alpha(opacity=0);
-moz-opacity:0; -khtml-opacity:0;
opacity:0;}
.bsrp-gallery .bs-item .ptitle:hover {filter:alpha(opacity=90); -moz-opacity:0.9;-khtml-opacity:0.9; transition: ease .7s; opacity:0.9;}
.bsrp-gallery a img {float: left;}
.bsrp-gallery a:hover img {}
</style>
<script>
//Postrecente
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Código por postrecentes">'];
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 = 220; 
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></center>

----------------------

Após copiar vá no painel de controle do seu blog, clique em layout e adicione um widget logo abaixo do cabeçalho e cole o código. Pronto, agora visualize e salve. Ficara assim:



Viu como é fácil e rápido? 


Gostou? Se inscreve no blog e deixe seu comentário.

Faça a blogueira que vos escreve feliz ♥

Um beijo ♥


17 comentários:

  1. Parabéns pelo tutorial! Muito bem explicado!

    Beijos!

    www.kelltpm.con

    ResponderExcluir
  2. Parabéns pelo tutorial! Muito bem explicado!

    Beijos!

    www.kelltpm.con

    ResponderExcluir
  3. Adorei pois é algo simples ne? *-*
    Muito bom vai ajudar muita gente!

    www.chaeamor.com

    ResponderExcluir
  4. Este comentário foi removido pelo autor.

    ResponderExcluir
  5. Este comentário foi removido pelo autor.

    ResponderExcluir
  6. Simples mas de muitoooo valor, pelo menos pra mim, estou começando agora e não tenho muita intimidade com algumas coisas ainda, e um exemplo é copiar e colar uma html.
    A dica valeu muitooooo a penaaaaa!!!

    www.eueosquatro.blogspot.com

    ResponderExcluir
    Respostas
    1. de nada, espero que ajude muito, eu tb to aprendendo aos poucos, e fico feliz em poder dividir :)

      Excluir
  7. Meninaaa, muito obrigada mesmo pelo tutorial! *-----*
    Tudo no seu blog é realmente lindo. O layout, posts, imagens...perfeito, parabéns!
    Já estou te seguindo!
    Dá uma passada lá no meu blog quando puder, você será sempre muito bem vinda!
    Beijão!
    http://makedamotociclista.blogspot.com.br
    Meu Twitter: @cat_343
    Meu Insta: tamiya343

    ResponderExcluir
    Respostas
    1. Linnnda, pense como fiquei feliz com seu comentario, muito obrigada ♥
      Vou correndo conhecer seu blog, um beijo :)

      Excluir
  8. Oii Ketty!! Vim parar no seu blog pelo comentário que você deixou lá no meu.. E meu Deus, quando abri eu me apaixonei!! Tudo lindo! Já estou segundo o seu blog, eu li alguns posts e amei e vou usar muito as suas dicas para o blog, já que eu sou meia ruim de mexer sozinha..
    Pode apostar que eu vou sempre dar uma passadinha aqui agora! Beijooos ><

    ResponderExcluir
    Respostas
    1. o minha querida, fico muuuuito feliz em saber disso, obrigada pela gentileza ♥

      Excluir
  9. Esses tutoriais, ajudam muito, deixar o blog bonito e multifuncional é sempre bom... beijos
    http://modismodeluxo.blogspot.com.br/

    ResponderExcluir
  10. E vc acredita que eu estava atras disso para por no meu blog? rs
    Obrigada.
    Eu adoro HTML, e aprender as coisas sozinha é muito bom. Podemos fazer do nosso jeito sem pagar há ninguem.

    Beijos
    http://www.grbla.com.br

    ResponderExcluir
  11. Geeente, amei!
    Ótimas dicas!
    http://omundodecarolinda.blogspot.com.br

    ResponderExcluir
  12. Ketty, menina, me dá um abraço! Eu tava ONTEM louca atrás de um tuto, e hoje eu encontro esse post lindo, todo explicadinho. Obrigada!!!!!!! Eu adorei, e, o melhor: entendi! Parabéns pelo post e pelo blog, que tá lindo e eu tô adorando! Um beijo <3

    www.guiaparagarotas.com.br

    ResponderExcluir