13 outubro 2014

Tutorial: Galeria de posts recentes abaixo do cabeçalho

Olá gente, Hoje vamos ter um tutorial bem legal que todo mundo procura e algumas vezes não funciona. Por isso estou trazendo esse tutorial para vocês colocarem nos seus blogs sem erro! Vem!!

Bom primeiro de tudo, você vai entrar na conta do seu blog (Painel) > layout > Add um gadget > HTML Javascript e no campo, você vai colar esse código:

<div id='bp_recent'></div>
<style type='text/css'>
.bp_item_thumb img {
border: 4px solid #fff; 
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
}
.bp_item_thumb img:hover {
opacity: .6;
filter: alpha(opacity=60);
-moz-opacity: .6;
-khtml-opacity: .6;
}
</style>
<script type="text/javascript" src="http://yourjavascript.com/45032510518/deb.js"></script>
<script style='text/javascript'>
var numberOfPosts = 5;var showPostDate = false;
var showSummary = false;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 175;var imgFloat = 'left';
var myMargin = 4;
var mediaThumbsOnly = true;
var showReadMore = false;
var titleLength = 0;
</script>
<script src='URL-DO-SEU-BLOG/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Agora Atenção para a legenda:
border: 4px solid #fff;  = Borda da imagem (expressura/estilo/cor)
var numberOfPosts = 5; = Número de quadrados/imagens que vão aparecer (alterar só o número)
var imgDim = 175; = Tamanho das imagens (o mesmo valor vai ser a largura e a altura)
URL-DO-SEU-BLOG = Você vai trocar esse texto pela url do seu blog (ex: http://seublog.blogspot.com)


Bom gente por hoje é só! 
Beijos e até mais!!

10 comentários

  1. Adorei a dica as vezes fico batendo cabeça pra por as coisas no blog! Muito Obrigada!

    Beijos
    www.pimentasdeacucar.blogspot.com.br

    ResponderExcluir
    Respostas
    1. rsrs é assim é mesmo com um tempo você vai pegando o jeito nessas coisas,... Ou não né... srsrrs

      Excluir
  2. Gostei da dica. Bjus!

    galerafashion.com

    ResponderExcluir
  3. Adoreei a dica, vou tentar fazer ahah

    Beijoos, Ana Carolina
    Simplesglamour.blogspot.com
    Instagram e Twitter: @simplesglamour

    ResponderExcluir
  4. Boa dica, vou tentar fazer.

    Bjos,
    http://blogdmulheres.blogspot.com.br/

    ResponderExcluir
  5. Muito bom o tutorial!
    Bjs

    http://achadosdamila.blogspot.com.br/

    ResponderExcluir
  6. Adorei ficou do jeitinho que eu queria :) :)

    ResponderExcluir
  7. Testei e deu certinho. Obrigada, menina!

    ResponderExcluir
  8. Oi ! Adorei o tutorial, fiz e deu super certo, mas também não tem erro né ?! Super fácil ! Beijos flor :)

    Seguindo aqui, dar uma passadinha no meu blog também: https://adoreichel.blogspot.com.br/

    ResponderExcluir

Busque Uma Categoria