Esse blog não é mais atualizado desde o dia 27/03/2016. Migramos para outra plataforma, visite o blog novo clicando no banner acima e acompanhe nossas postagens.



Tutorial HTML/CSS: Posts destaque

28 de outubro de 2014


Algo que muita gente anda me pedindo para fazer aqui no blog, são tutoriais de HTML/CSS. Como grande maioria já sabe, faço layouts por encomenda (encomende aqui) e bastante gente vem me perguntar como se faz determinada coisa para melhorar o visual de seu blog. Algum tempo atras tive essa ideia de trazer alguns tutoriais HTML, mas acabei desistindo e hoje voltei com a mesma ideia, pensando em um melhor conteúdo e esclarecer duvidas.

Nesse post vou ensinar como fazer esses "posts destaque" em quadradinhos, é o que grande maioria vem me perguntando e encontro essa duvida também em diversos grupos de blogueiras. São esses que estão no topo dos posts aqui do blog (exemplo), ensinarei a fazer um exatamente como esse do exemplo. Lembrando que para "atualiza-los" é preciso que você faça manualmente.
ATENÇÃO: Antes que qualquer alteração em seu layout, faça um backup!
Primeiramente vá no seu painel do blog, clique em Modelo > Editar HTML
Com o ctrl+f procure por ]]></b:skin> (acima desse código fica sua CSS) logo acima dele cole o código abaixo:
/* BOX DE IMAGENS - POSTS DESTAQUE
----------------------------------------------- */
.boxgrid h3{ 
  margin-top:3px;
  color:#FFF; /*Cor do titulo*/
  font-size:15px; /*Mude o 15 pelo tamanho da fonte que desejar*/
  font-family: tahoma; /*Nome da fonte*/
  font-weight: normal;
  text-align: left; /*Alinhamento do titulo (left=esquerda/center=centro/right:direita)*/
  padding-left:10px;
}
.boxgrid{
  width: 200px; /*Largura dos quadrados*/
  height: 200px; /*Altura deles*/
  margin:5px;
  float:left;
  background:#000;
  position: relative;
  margin-top: 0px; /*Altere o 0 por um numero maior para que eles desçam*/
}
.boxgrid img{
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 200px; /*Aqui coloque o mesmo valor da largura do seu quadrado*/
  height: 200px; /*A mesma altura*/
}
.boxcaption{
  float: left;
  margin-top:140px; /*Dependendo da altura do seu quadrado, aumente esse valor para que a barra do titulo desça*/
  position: absolute;
  height: 30%; /*Altura da barra*/
  width: 100%;
  background-color: rgba(26, 26, 26, 0.7);
}
 .captionfull .boxcaption {
  top: 0px;
  left: 0;
}
.caption .boxcaption2 {
  top: 0px;
  left: 0;
}
Altere somente as linhas com as instruções, caso tenha nenhum conhecimento de CSS, não altere mais nada.
Agora vamos colocar os posts destaque em seu layout. Vá no seu painel e clique em Layout, crie uma nova Gadget e adicione um HTML/JavaScript. Lá você irá colar o seguinte código:
<div class="boxgrid caption">
<img src="LINK DA PRIMEIRA IMAGEM (DEIXE-A DO MESMO TAMANHO QUE COLOCOU NA CSS)" />
<div class="cover boxcaption">
<a href="LINK DO POST"class="moreLink"><h3>TITULO DO POST</h3></a></div>
</div>
<div class="boxgrid caption">
<img src="LINK DA SEGUNDA IMAGEM" />
<div class="cover boxcaption">
<a href="LINK DO POST"class="moreLink"><h3>TITULO DO POST</h3></a></div>
</div>
<div class="boxgrid caption">
<img src="LINK DA TERCEIRA IMAGEM" />
<div class="cover boxcaption">
<a href="LINK DO POST"class="moreLink"><h3>TITULO DO POST</h3></a></div>
</div>
<div class="boxgrid caption">
<img src="LINK DA QUARTA IMAGEM" />
<div class="cover boxcaption">
<a href="LINK DO POST"class="moreLink"><h3>TITULO DO POST</h3></a></div>
</div>
Caso queira acrescentar mais posts destaque, é só acrescentar esse código abaixo:
<div class="boxgrid caption">
<img src="LINK DA QUINTA IMAGEM" />
<div class="cover boxcaption">
<a href="LINK DO POST"class="moreLink"><h3>TITULO DO POST</h3></a></div>
</div>
Você pode hospedar as suas imagens pelo Tumblr (caso tenha uma conta) ou pelo Casimagens 

Super bobo de fazer, né? Qualquer duvida é só deixar nos comentários que irei responder todos, ou pode me add nas redes sociais que respondo lá também. Espero que tenham gostado e deixem dicas para próximos tutoriais.

14 comentários

  1. Adorei a dica, há um tempão estou procurando um tutorial assim!! *-*

    www.biancaevelyn.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou Bia! Quando estava atras de aprender como fazer esses posts destaque, fucei o Google inteiro e tinha nenhum tutorial explicando =/ Ai resolvi fazer esse e espero que ajude.

      Excluir
  2. VALEU TEPH \O/ COMO SEMPRE AJUDANDO OS SEUS LEITORES, POR ISSO QUE AMO VC E AMO SEU BLOG

    ResponderExcluir
  3. Não funcionou, ficou atras dos posts :(

    ResponderExcluir
    Respostas
    1. Oii Bruno :D Bom, tenta "subir" os posts destaque alterando o numero do margin-top: 0px; na CSS. Vale usar números negativos para que ele suba.

      Excluir
  4. Como faço para diminuir a largura do widget todo ?

    ResponderExcluir
  5. Adorei. Fiquei em dúvida na cor..como sei exatamente o nome da cor que eu quero rs

    ResponderExcluir
    Respostas
    1. Nesse site você seleciona a cor que quer, e o codigo que gerar você coloca onde pede :D http://html-color-codes.info/Codigos-de-Cores-HTML/

      Excluir
  6. Stephanie... eu adorei. Mas queria fazer no final do post, como posts recentes, similares ou destaque... e não exatamente no topo do blog. dá pra fazer?

    ResponderExcluir
    Respostas
    1. Oii Gisela :D Infelizmente com esses codigos aí, não da, para os posts relacionados é outro código.

      Excluir
  7. stephanie, o meu ficou muito para o lado, e eu queria que ficasse centralizado com a postagem, tipo, na reta. Me ajuda?

    ResponderExcluir
  8. Qual é a fonte do título dos exemplos?

    ResponderExcluir