Personalizando o Post-Footer

Algumas personalizações deixam o blog mais bonito e profissional, e hoje vou ensinar a mexer no Post Footer, que é o finalzinho do post, onde ficam o autor, número de comentários, etc. O primeiro passo é remover algumas coisas que além de inúteis tornam o blog feio.

1° Abra o painel do seu blog> Layout> Main> Editar. Vamos mexer em alguns itens na janelinha que abrir.

Opções da página principal

Número de postagens na página principal: 7  

Deixe como está ou mude para até 5 posts, para não ficar muito pesado pra carregar.

Texto do link da página de postagem: Mais informações »  

Eu prefiro alterar para Leia Mais ou personalizar com imagem.

Todos os itens destacados acima estavam marcados, desmarque-os e salve. Agora dê Ctrl+F e pesquise por:

.post-footer {

Você irá encontrar o seguinte código:

.post-footer {
  margin: .5em 0;
  line-height: 1.6;
}

Agora é só escolher o modelo que mais gosta e substituir os códigos. 

Modelo 1

.post-footer {
background: #FFFFFF;
color: #333333;
border-top: 1px dotted #000; /* Estilo da borda */
border-left:3px solid #000;
border-bottom: 1px dotted #000; /* Estilo da borda */
border-right:3px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin:0.73em 0;
padding:3px 3px;
}

Modelo 2

.post-footer-line-1{
border-top: 1px solid #A3A2A2 ;
border-bottom: 1px solid # A3A2A2 ; /* Estilo da borda */
text-align: center;
}
.post-footer-line-2{
border-top: 1px solid #A3A2A2 ;
border-bottom: 1px solid # A3A2A2 ; /* Estilo da borda */
text-align: center;
 }

Modelo 3

.post-footer {
background: #FFFFFF;
color: #333333;
border-left:3px solid #8FC5CB;
border-top:1px solid #8FC5CB;
border-bottom:1px solid #8FC5CB;
border-right:3px solid #8FC5CB;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin:0.73em 0;
padding:3px 3px;
}
.post-footer:hover {
border-left:3px solid #000;
border-right:3px solid #000;
border-top:1px dotted #000;
border-bottom:1px dotted #000;
}

Modelo 4

.post-footer {
background: #FFFFFF;
Border: 3px outset #8FC5CB;
}

Então é isso, espero que tenha sido útil pra vocês. Provavelmente teremos uma segunda parte com outras personalizações, então fiquem ligados. Beijos.