Menu
  • HOME
  • SOBRE
  • PORTFOLIO
  • MIDIA KIT
  • CATEGORIAS
    • TUTORIAIS HTML
    • LAYOUTS FREE
      • FREEBIES
      • DICAS
      • SITES
      • SÉRIES
      • PAPO NERD
    • FEMINICES
      • RESENHAS
      • CABELOS
      • MODA
      • LIVROS
      • RECEBIDOS
  • MIGOS
  • DESIGNS
  • CONTATO
  • CRÉDITOS
Beleza Nerd
Beleza Nerd - Gleicy Haner

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.
Compartilhe nas redes sociais! Facebook Twitter Google+



. # caixinhas # html # postagens recentes # Tutoriais








Compartilhe nas redes sociais!

31 comentários:

  1. Marcy Moraes15:20

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

    Flores ao Chão

    ResponderExcluir
    Respostas
    1. Gleicy Haner23:09

      Fico feliz que tenha gostado! Obrigada pela visita e sucesso!

      Excluir
    2. Responder
  2. Sarah Evelin16:58

    Ameiiiiii! Vou usar no meu blog!

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

    ResponderExcluir
    Respostas
    1. Gleicy Haner23:09

      Fico feliz que tenha gostado! Obrigada pela visita e sucesso!

      Excluir
    2. Responder
  3. Carol Sweet04:05

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

    ResponderExcluir
    Respostas
    1. Gleicy Haner23:10

      Fico feliz que tenha gostado! Obrigada pela visita e sucesso!

      Excluir
    2. Responder
  4. Camilla Santos20:13

    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. Gleicy Haner23:14

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

      Excluir
    2. Responder
  5. Juliana Ferreira12:29

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

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

    ResponderExcluir
    Respostas
    1. Gleicy Haner23:17

      Fico feliz que tenha gostado! Obrigada pela visita e sucesso!

      Excluir
    2. Responder
  6. Bianca16:30

    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. Gleicy Haner15:50

      Eu também gosto bastante! Obrigada pela visita!

      Excluir
    2. Responder
  7. Natty ♥20:01

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

    ResponderExcluir
    Respostas
    1. Gleicy Haner15:51

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

      Excluir
    2. Responder
  8. Amanda Menezes22:30

    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. Gleicy Haner15:53

      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
    2. Responder
  9. Maria Eduarda {@dudsparrow}23:42

    Bem fácil e útil, adorei <3
    boa semana :)

    Red Behavior

    ResponderExcluir
    Respostas
    1. Gleicy Haner15:53

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

      Excluir
    2. Responder
  10. Anna Lê10:32

    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. Gleicy Haner15:54

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

      Excluir
    2. Responder
  11. Julieta sem Romeu18:14

    Gostei do tutorial, irei tentar coloca-lo em meu blog :)
    beijos.
    Julieta sem Romeu

    Se inscreva no meu canal no Youtube!

    ResponderExcluir
    Respostas
    1. Gleicy Haner16:07

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

      Excluir
    2. Responder
  12. Laís Scagliusi21:30

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

    ResponderExcluir
    Respostas
    1. Gleicy Haner16:08

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

      Excluir
    2. Responder
  13. maria cremm14:05

    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. Ingrid Giany04:26

    Este comentário foi removido pelo autor.

    ResponderExcluir
  15. Ingrid Giany04:40

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

    ResponderExcluir
  16. Taynara Mello21:42

    Adorei, e já coloquei em meu blog.

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

    ResponderExcluir
  17. Abimael Aviz11:56

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

    ResponderExcluir
    Respostas
    1. Abimael Aviz11:57

      Esse que vc está usando no seu blog

      Excluir
    2. Gleicy Haner12:17

      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
    3. Responder
Adicionar comentário
Carregar mais...

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.

Gleicy Haner, tenho 19 anos, sou apaixonada por maquiagem,filmes,livros e gatos. Sou blogueira 4 anos (pelo menos com esse blog haha) estou desenvolvendo um amor incondicional por fotografia. Também a louca dos signos, Taurina com ascendente em Capricórnio (sou legal, eu juro) prezo pela beleza,liberdade e boa vontade de fazermos e sermos exatamente o que queremos. Sou wiccana a alguns anos, e também uma universitária indecisa,mas amo ciências e a área de exatas. Bem vindo ao meu espaço favorito.


Fã page

Teens Forever - Blog

Categorias



Tags

Tutoriais recebidos BEDA resenha livros 4you Dicas moda Maquiagem Musicas blogs sem categoria Layout Free indicação Bloguerices paponerd parceria publipost resenhas Wishlist cabelos html Desabafos PROJETOS batom matte blogueiras games layouts Series Sorteios presskit freebies wishlist da china Bandas listas Solta o verbo amizade feminices inspiracao photoshop playlist semanadebeleza Customização batom ediçoes fotografia opiniões parcerias plus size recebidos da china youtubers beleza beleza nerd compras comprinhas da china demillus dicas para blogueiros english is fun fotos instagram loja chinesa roupas plus size na china sapatos Halloween ano novo batom bbb blogagem coletiva capas editaveis dominio hidratante ilustrações layout lingerie maquiagem gastando pouco maquiagem na china pinceis produtos gratis romwe sapatos na china sorteio acessorios baratos agua de amora ajude animais aplicativos apps batom liquido capa para youtube gratis como bombar no instagram dia das bruxas dicas de fotografia download ebay edicao de imagens edicao de video fotografia para blogs glitter lingerie atacado maquiagens salva vidas paris progressivas receitas reprovados sedução da seda unhas

Parceiros

Quer se tornar parceiro? entre em contato aqui.

+ vistos da semana

  • Formatando e otimizando seus posts - Ajudando seu blog a subir no ranking de pesquisas
    Oláá! tudo bem com vocês? espero que sim! sei que  o blog está a um tempinho sem postagens novas, mas eu tive um problema com o servid...
  • Freebies: Capas/Banners editáveis para seu canal - Download gratuito
    Oláá, tudo bem com você? eu espero que sim! a bastante tempo eu não postava nenhum freebie , então hoje resolvi fazer um teste. Fiz al...
  • Shampoo e condicionador BBB de 5 Reais - Linha Óleo de Argan Tok Bothânico
    Shampoo e condicionador Tok Bothânico Óleo de Argan Oláá! tudo bem com vocês? espero que sim! Hoje eu vim trazer a resenha daqueles...
  • Resenha: O Beijo Traiçoeiro - Erin Beaty
    Oláá! tudo bem com vocês? eu espero que sim! Hoje eu trago mais uma resenha de livro, e de um gênero que todo mundo sabe que não ...
  • Comprinhas da China: Pinceis de maquiagem profissionais no Aliexpress - Jessup Beauty
    Oláá! tudo bem com vocês? eu espero que sim! hoje eu trago a segunda resenha do ano! Pinceis de maquiagem profissionais no Aliexpress ....
Beleza Nerd | www.gleicyhaner.com.br - Todos os direitos reservados © 2013 - 2016
Tecnologia do Blogger | Desenvolvimento: Diamonds Designs