Postagens recentes em Caixas #02



21 de dezembro de 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
    Respostas
    1. Eu também gosto bastante! Obrigada pela visita!

      Excluir
  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. Bem fácil e útil, adorei <3
    boa semana :)

    Red Behavior

    ResponderExcluir
    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. Gostei do tutorial, irei tentar coloca-lo em meu blog :)
    beijos.
    Julieta sem Romeu

    Se inscreva no meu canal no Youtube!

    ResponderExcluir
    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