Postagens recentes no topo do blog

Oi pessoal, faz tempo que não faço um tutorialzinho aqui no Enjoy, e hoje vou ensinar um rápido, fácil e prático. Não é preciso ser nenhum expert para conseguir adaptar este tutorial ao seu blog, basta ler com atenção, então por favor leiam com atenção e evitem dúvidas que já estão devidamente respondidas no tutorial, ok?

Antes de começar faça o backup do seu layout atual em: Modelo >> Fazer backup/restaurar >> Fazer download do modelo completo.
Certo, agora vamos apender a deixar as postagens recentes antes das postagens do blog, vou ensinar em formato de círculo e com este efeito que publiquei lá no meu @insta.


Primeiro passo: abra os códigos do seu layout atual e cole no seu css:

#box_recentes{width: 100%; }
.recentes{overflow: hidden; position: relative; border: 3px solid #fff; padding: 0px; float:left; margin-left: 5px; margin-bottom: 40px; opacity: 0.6; width: 174px; height: 174px; border-radius: 90px}
.recentes .mask, .recentes .content {background-color: rgba(238, 175, 179, 0.7); width: 174px; height: 174px; position: absolute; overflow: hidden; opacity: 0; transition: all 0.5s linear; top: 0; left: 0}
.recentes:hover .mask {opacity: 1;}       
.recentes img {display: block; position: relative -webkit-transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000);  -moz-transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000); -ms-transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000); -o-transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000); transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000);}
.recentes:hover img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2);-ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2);  opacity: 8;}
.recentes p {opacity: 0; font-family: Arial, sans-serif;font-style: italic; line-height: 1.3em; font-size: 14px; position: reltive; color: #fff; padding: 30px 16px 0px; text-align: center;}
.recentes:hover p {opacity: 1;}
.recentes a.info {font-size: 11px; display: inline-block; text-decoration: none; padding: 5px 10px; background: #fff; color: #ff8f8f; text-transform: uppercase; box-shadow: 0 0 1px #fff; margin-left: 48px;}
.recentes a.info:hover {box-shadow: 0 0 5px #fff;}
Salve, agora vamos adicionar os códigos das postagens recentes em: Layout >> Adicionar um Gadget >> HTML/JavaScript e cole:

<div id='box_recentes'>
<div class="recentes">
<img src="http://i.imgur.com/PKrIsGY.jpg" />
<div class="mask">
<p>Apple pie sesame snaps cake chocolate bar</p>
<a href="link da postagem" class="info">Leia mais</a>
</div></div>
</div>

Antes de modificar o código, arraste a caixa que você acabou de criar posicionando ela antes das postagens do blog, dessa forma:


Essa div: <div id="box_rencetes"> não pode ser alterada de forma alguma, você vai editar o que está dentro dela, ou seja, isso aqui:

<div class="recentes">
<img src="http://i.imgur.com/PKrIsGY.jpg" />
<div class="mask">
<p>Apple pie sesame snaps cake chocolate bar</p>
<a href="link da postagem" class="info">Leia mais</a>
</div></div>

O que você pode editar: 
img src: link imagem;
<p></p> : título da sua postagem;
href: link da sua postagem.
Obs: todos os itens devem estar entre aspas ("").

Para colocar duas ou mais postagens recentes basta replicar o código, dessa forma:

<div id='box_recentes'>

<div class="recentes">
<img src="http://i.imgur.com/PKrIsGY.jpg" />
<div class="mask">
<p>Apple pie sesame snaps cake chocolate bar</p>
<a href="link da postagem" class="info">Leia mais</a>
</div></div>

<div class="recentes">
<img src="http://i.imgur.com/PKrIsGY.jpg" />
<div class="mask">
<p>Apple pie sesame snaps cake chocolate bar</p>
<a href="link da postagem" class="info">Leia mais</a>
</div></div>

</div>


Observem que eu não duplico a div <div id='box_recentes'>, os códigos ficam dentro dela, se isso não for feito corretamente o tutorial não irá funcionar, ok? 
Fez tudo certinho, mas ainda tem alguma coisa errada, tamanho do box, posição, alinhamento, tudo isso deve ser corrigido no css. Agora vamos conhecer o que você pode editar no css.

.recentes, essa div define o tamanho da caixa, você pode alterar os itens:
- width, height (tamanho x largura);
- border-radius, é aqui que arredondamos o box, caso queira ele quadrado coloque 0px ou apague o código;
- border: borda da caixa da postagem, você pode alterar a grossura dela (3px) e a sua cor (#fff);

.recentes .mask, .recentes .content, caixa onde fica o texto da postagem, você pode editar os itens:
- background-color, cor que aparece quando passamos o mouse, ela esta em rgba (238, 175, 179), pois podemos colocar opacidade (0.7) nela.
- opacity, não modifique.

.recentes p, configura a cor, tipo e tamanho da fonte do título, você pode modificar os itens:
- font-family, tipo de fonte;
- font-style, estilo da fonte (normal, itálico, bold  e etc);
- font-size, tamanho da fonte;
- color, cor da fonte;
- text-align, alinhamento do texto.

.recentes. a.info .recentes. a.info:hover, cor do botão "leia mais", você pode modificar o itens:
- background, cor do fundo;
- color, cor do texto;
- box-shadow, sombra do botão;
- margin, alinhamento.


FAQ: 
Onde fica meu css?
Modelo >> editar HTML, ele esta entre <b:skin></b:skin>.

Como encontrar a cor rgba no meu photoshop?
Elas estão aqui.


Dúvidas? deixe nos comentários.
Beijos.

Comente pelo Facebook

22 comentários:

  1. Como assim postagens recente no top do blog?

    ResponderExcluir
  2. Amo o seu blog *-* Me ajuda bastante, continue assim

    ResponderExcluir
  3. Ah Bruna, esses tutoriais <3 haha Tu é fera! Uso seu lay levemente modificado e sou apaixonada com ele assim! Pretendo mudar o fundo e fontes daqui uns dias... e talvez use o tutorial de hoje pra dar uma incrementada! hahah Beijão

    Coisa da Lud

    ResponderExcluir
  4. Nossa Bru, muito obrigado pelas dicas!!! Eu amoooooo editr html mas não quase nada :'(
    Você ajudou DEMAIS valeu!

    Só uma pergunta: você pode ensinar a fazer esse widget de "categorias" que nem tem no seu blog? Acho ele lindo demais e já em vários outros blogs e queria colocar no meu também, pode ajudar?
    Obrigada sucesso!!!
    Beijinhos
    justliketthat.blogspot.com.br

    ResponderExcluir
  5. Ah Bru, eu de novo hehe
    Tenho outras duvidas também, que eu acho (tenho certeza) que você sabe!!!
    Como eu coloco o widget do link do instagram que fique aparecendo as fotos? (que nem no seu) e o link para curtir a página no facebook?
    E eu baixei um layout seu e não consigo mudar a fonte do título do blog, me ajuda?

    Muito obrigada, dnv!
    Beijinhos

    justliketthat.blogspot.com.br

    ResponderExcluir
  6. Flor, tu podias fazer um guia ensinando sobre como fazer um layout responsivo, ou só como aplicar a responsividade. Eu terminei o lay novo do meu blog, mas não queria que ficasse essa visualização padrao do blogger :/

    beijinhos

    ResponderExcluir
  7. Que máximo este tutorial, deu super certo! Valeu!

    ResponderExcluir
  8. Amei, já estou usando no meu Blog!!
    Tudo sempre super explicadinho. Obrigado!
    Só tenho uma duvida, li bem o tutorial mais não encontrei, tem como eu separar mais um pouco as bolas? Achei que ficou muito diferente a divisão, da esquerda para direita.

    Amei, mesmo!! Obrigado mais uma vez!

    ResponderExcluir
    Respostas
    1. Ei Edlla, eu também estava com a mesma dúvida, e é só você alterar no primeiro código no "recentes" a seguinte atribuição "margin-left: (aqui você coloca os pixels que quer de distância) ", no meu funcionou, coloquei 35px e ficou ótimo, deu um espaçamento bacana.

      Excluir
    2. Mais uma com a mesma dúvida! ^_^ Obrigada, Mih! E obrigada Bruna pelo Tutorial! :*

      Excluir
  9. Olá! Adorei essa dica, a tempos eu estava querendo fazer isto, mas nunca achei um tutorial que desse certo! Só uma duvida que não achei no post, como eu alinho no centro? Elas estão mais para esquerda! Beijãão

    ResponderExcluir
  10. Bruna adorei o tutorial,estava á tempos querendo saber como colocar em meu blog *-*
    Obrigada por compartilhar conosco ♥
    Se quiser ver como ficou só clicar no link http://garotascomovoceoficial.blogspot.com.br/

    Beijinhos.

    ResponderExcluir
  11. Oi Bruna... adorei!!! Meu blog ficou mais lindo com esta dica...
    Estou usando um dos seus layaouts free no meu blog...
    Se quiser dar uma passadinha para conhecer, falo sobre artesanato, receitinhas e algumas coisitas mais hehehe
    Bjus
    www.karinasatiro.com.br

    ResponderExcluir
  12. Olá,fiz este tutorial das postagens recentes em forma de bolas,porém não consigo trocar a imagem,coloco o url ou o link e não consigo.. tens como me ajudar? adorei tuas dicas

    ResponderExcluir
  13. oi, tudo bem? espero que sim, obrigado pelo tutorial, eu coloquei no meu da uma olhadinha .
    http://grande-meninaa.blogspot.com.br/
    bjos!

    ResponderExcluir
  14. Tem como trocar as postagens recentes, pelas postagens mais ou menos acessadas??

    ResponderExcluir
  15. Só Deus sabe o quanto eu procurei esse tutorial, muito, mas muito obrigado mesmo. Favoritei já <33

    ResponderExcluir
  16. Oii, como faço para centralizar, ou aumentar o espaçamento entre cada post?

    ResponderExcluir
  17. a minha fica uma a baixo da outra e não ao lado :(

    ResponderExcluir
  18. Não consigo fazer ficar uma abaixo da outra

    ResponderExcluir