Postagens recentes em Caixas #02

21 dezembro 2015



Olá pessoal! tudo bem com vocês? espero que todos estejam bem e já de férias viu? haha atualmente eu estou com muitos recebidos acumulados para mostrar para vocês, tantos que estou pensando em fazer uma semana de beleza aqui no blog, semelhante a semana de tutoriais, só que com posts todos os dias, ou seja sete posts. Vou me organizar e vê o que eu faço para vocês.



Hoje mais um tutorial muito pedido, que são as caixinhas com posts recentes ou miniaturas das postagens, eu já fiz o tutorial de um estilo (atual aqui do blog) confira aqui. Porém como bastante gente pediu vou postar esse que é o mais usado, também automático simples de usar. É o modelo abaixo.





Esse modelo, também usei no último layout free aqui do blog, pode ver aqui



É bem simples, você não vai precisar mexer no seu HTML nem nada, são apenas dois passos

1 - Vá em layout >> abaixo do seu cabeçalho adicione um gadget/widget de html/javascrip

.

2 - Nele você cola o código abaixo, modificando onde indicado se quiser, claro. E salva.

<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:-70px;
width:1300px; ==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 15px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background:#000; /*==COR AREA DE TITULO==*/
display: block;
clear: left;
font-family: 'georgia', cursive; ==FONTE DO SLIDE==
font-weight:200;
text-transform:uppercase; /*==TDS LETRAS MAIÚSCULAS==*/
font-size:13px; /*==TAMANHO DO TITULO==*/
line-height:1.3em;
height:50px;
position: absolute;
bottom:0%;
text-align: center;  /*==POSIÇÃO DO TITULO==*/
color:#fff; /*== COR DO TITULO==*/
width:95%;
padding:6px;
word-wrap: break-word;
overflow:hidden;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}
/*FIM CSS FOTOS*/
</style>
<script>
//byjana
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from poderondesign">'];
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 = 255;
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>


A parte no topo do código margin-top:-70px; é número que as caixinhas podem subir ou descer para se ajustar ao seu layout, quanto maior o número mais ela e sobe, e menor ela desce. Você ajusta conforme precisar. 

É só isso! as caixinhas são automáticas e bem práticas.

Créditos ao blog da Janaina Ponderon por disponibilizar esse tutorial mara e super simples.

31 comentários:

  1. Esse tutorial já está nos meus favoritos, com certeza vou usar no próximo layout do blog.

    Flores ao Chão

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado! Obrigada pela visita e sucesso!

      Excluir
  2. Ameiiiiii! Vou usar no meu blog!

    www.ideiasnochuveiroblog.blogspot.com | Idéias no Chuveiro

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado! Obrigada pela visita e sucesso!

      Excluir
  3. Awn ♥ adorei este tutorial :3. Vai ser muito útil para mim *--*.
    Beijas,
    http://mundoperdidodacarol.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado! Obrigada pela visita e sucesso!

      Excluir
  4. Gente, que lindo! Obrigada por disponibilizar esse tutorial, porque eu sempre tenho problemas nessa parte, quando modifico um pequeno detalhe, faz toooooda a diferença. Parabéns pelo blog e post (que foi super útil)
    Beijos, fica com Deus.
    http://lendoeaprendendoblog.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico realmente feliz que tenha gostado! realmente os pequenos detalhes fazem toda a diferença! Obrigada pela visita, e sucesso!

      Excluir
  5. Que show, não sabia que isso era possível.

    Beijos
    http://pimentasdeacucar.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado! Obrigada pela visita e sucesso!

      Excluir
  6. Gosto bastante dessas caixas com os posts mais recentes, esse tutorial é muito útil. Obrigada por compartilhá-lo!
    Beijos e Feliz Natal!
    Bluebell Bee

    ResponderExcluir
  7. Adoreeei. *-*
    Já te sigo aqui amoooore!
    Beijãaaao!
    contornoperfeito.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado do tutorial. Obrigada pela visita!

      Excluir
  8. Poxa que lindasss!! muito legal da sua parte fazer isso e compartilhar, particularmente acho tãooo difícil de mexer em html !! admiro quem consegue mexer nessa confusão rsrs..!!! nem me atrevo a mudar nada no meu ...

    http://www.virtualparadisee.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ah, tem tutorial que realmente é complicado, esse é super fácil nem precisa abrir o código do blog. haha Fico feliz que tenha gostado do tutorial. Obrigada pela visita!

      Excluir
  9. Respostas
    1. Fico feliz que tenha gostado do tutorial. Obrigada pela visita!

      Excluir
  10. Ahh é muito bom ter esse tipo de coisa no Blog :)

    Valeu por compartilhar sua linda !

    Beijo e Feliz Natal !!

    | O Blog Que Não é Blog |

    | Canal no Youtube |

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado do tutorial. Obrigada pela visita!

      Excluir
  11. Respostas
    1. Fico feliz que tenha gostado do tutorial. Obrigada pela visita!

      Excluir
  12. Amo esse tutorial ♥ Fica tão lindo hahah, mas nem coloquei no meu layout novo :c
    Beijos,Laís Scagliusi

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado do tutorial. Obrigada pela visita!

      Excluir
  13. Oi é a Maria do Blog Brilho das Estrelas e vim te desejar um bom ano novo e pra sua família também e pra todos que você ama .
    E você enfrentou 12 meses sem parar e irá ter que fazer tudo de novo,vai começar tudo de novo,mas eu desejo pra você que seu tudo de novo seja mais que ótimo,seja mágico!Seja de conquistas!!!
    Beijos e abraços
    http://blogbrilhodasestrelas.blogspot.com

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

    ResponderExcluir
  15. Amei o tuto Gleycce! Parabéns! Está sendo muito útil (:
    http://16primaverasblog.blogspot.com.br/

    ResponderExcluir
  16. Adorei, e já coloquei em meu blog.

    visita lá, e veja como ficou
    www.indicarlivros.com

    ResponderExcluir
  17. Bom dia!
    como inserir o modelo do topo, que dá fade na imagem e fica só o título?

    ResponderExcluir
    Respostas
    1. Esse que vc está usando no seu blog

      Excluir
    2. Olá! Essa que eu uso aqui no blog eu também já fiz tutorial, pode ver aqui http://www.teensforeverblog.com/2015/09/postagens-populares-em-caixas.html

      Excluir

Fã page | Twitter | Instagram

Críticas construtivas são sempre bem vindas.
Deixe o link do seu blog no final do comentário e retribuiremos a visita
Aceitamos TAG's, se não a respondermos, provavelmente nós já devemos ter respondido anteriormente por outra indicação.
Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2018. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo