Como Personalizar o Post-Footer

Olá pessoal antes do post de hoje quero avisar que fiz uma página chamada “Goodies” e nela estarão todos os tutoriais do blog.

E também quero pedir desculpas por não ter postado e nem respondido antes, pois estava me preparando para a provas do Enem.

Hoje irei ensinar como personalizar o Post-Footer esse tutorial foi pedido pela ask, mas foi anônimo então não sei quem foi que fez esse pedido. 

O Post-Footer é onde ficam quem postou, marcadores, comentários. Ele normal é uma coisa sem graça nenhum. Então vamos aprender como personaliza-lo.

Primeiro vá em Layout>> Onde está Postagens no blog clique em Editar>> E desmarque a opção Mostrar botões de compartilhamento.

Isso irá tirar aqueles botões com as marcas das Redes Sociais. Exemplo:

Mas se quiser deixa-lo não tem problema, mas vai ficar estranho.

Agora vá em Modelo>> Editar HTML >> Aperte Ctrl+ F e procure por :

.post-footer {

E você vai achar alguma coisa assim:

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

Apague e no lugar cole o código do modelo de Post-Footer que você quer:

Modelo 1

 

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

Modelo 2:

.post-footer {
background: #FFFFFF;
color: #333333;
border-left:3px 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;
}

Modelo 3

.post-footer {
background: #FFFFFF;
color: #333333;
border-left:5px solid #8FC5CB;
margin:0.73em 0;
padding:3px 3px;
}
.post-footer:hover {
border-left:5px solid #333;
}

Agora vamos usar um meio diferente para colocar esse outros modelos:

Em Modelo>> Editar HTML>> Aperte Ctrl+ F e procure por:

]]></b:skin>

E acima dele cole o código do modelo de Post-Footer que você quer:

Modelo 4

.post-footer-line-1{
border-bottom: 1px dotted #A3A2A2; /* Estilo da borda */
}
.post-footer-line-2{
border-bottom: 1px dotted #A3A2A2; /* Estilo da borda */
}

Modelo 5

 

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

Modelo 6

 

.post-footer {
border: 1px dotted #A3A2A2;
background: #E6E1E3; /* Não se esqueça de colocar a cor do background que combine com o a cor do seu link e seu layout */
padding: 5px;
}

Espero que tenham gostado!!!

Créditos: Urban Nerds S.A

Sweet of Cherry