[Tuto]: Post Footer por fora da área de postagem

Layout Free logo, logo quem sabe?! rsrsrs'

Olá!

Que saudade :c Obrigada sinceramente pelos últimos comentários nas ultimas postagens. Realmente eu pensei que o nosso blog não seria recebido bem como foi da outra vez. Fiquei até com receio de ter que fechar o blog novamente por falta de leitores ;/ Mas vocês, meus leitores amados, de novo conseguiram fazer minha alto estima subir e de novo, me inspirar para que eu continue com o blog atualizado e ativo. O que faltava aqui mesmo era mais conteúdo, a partir de hoje, o Sweet Magic será mais que um simples blog de tutoriais, utilitários e entre outros... pretendo torná-lo em um portal, um portal de auto-ajuda a blogueiros (com tutoriais mais amplos, utilitários, goodies entre outras categorias que ajudarão os blogueiros com seus blogs). Mas só pretendo, preciso muito da ajuda de vocês pra isso!

Mudando de assunto, acho até que vocês estão cansados de saber que personalizar o post footer, eu adoro fazer. Se não me engano, o último tutorial postado aqui foi como personalizá-lo, não são iguais. Eu sempre procuro mais tutoriais sobre isso, tento inovar, fazer meu próprio código. Admito que, repassar pra vocês tudo que eu sei sobre css é um prazer, mas não farei isso agora, por enquanto não. Guardarei um pouco das aprendizagens que tive nesse 1 ano e 4 meses de blogueira, para repassar pra vocês mais tarde. Por enquanto, utilizo alguns tutoriais que não são de minha autoria mas creditados pra vocês *-* Então hoje, ensinarei-lhes a novamente personalizar o post fooder, hoje colocaremos o mesmo para fora da postagem.

Sigam-me!

1. Vá até Design > Editar HTML > Procure por .post-fooder {
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, #f9f7f7 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ó 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;
}

E ai que você define o tamanho das letras e as cores.

E ai, conseguiram?

Créditos: Kawaii World