Tutorial - Post Footer por fora da área de postagem

 

Yoo!

Trouxe mais um tutorial para vocês. Dessa vez vou ensinar a fazer o post footer igual o daqui. Vê que ele atravessa a área de postagem? É bem simples de fazer.

Vamos deixar essas conversa de plágio pra lá, isso acaba com toda a áurea de felicidade em volta do blog. Esqueçam esse assunto e deixem a menina falar o que quiser.

Let's see.

1. Vá até Design > Editar HTML e procure por .post-footer {.

2. Abaixo de { e antes de } cole:

background-color: #f8f7f7; 

padding: 13px; 

margin-bottom: 18px; 

margin-left: -35px; 

margin-right: -35px; 

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

box-shadow: 2px 0px 5px #ece3b1;

Esse código é bem fácil de entender. #f8f7fe7 define a cor do fundo, padding define o espaço entre as palavras e o fim da caixinha,  margin são os que colocarão ela pra fora, border define a personalização da borda e box-shadow a sombra.

3. Agora só falta personalizar as letras. Procure por ]]></b:skin> e antes da tag, cole:

.post-footer-line-1{

font-size:12px;

color: #070707;

}

.post-footer-line-2{

font-size:12px;

color: #070707;

}

É aí que você define o tamanho e cor das letras.

Prontinho! Conseguiram?