Personalizar Área De Postagens Do Blogger – Parte II

Na primeira parte dessa matéria, vimos como personalizar o #main-wrapper, área de postagens, data, título dos posts, margens,padding etc.. Agora vamos entender como personalizar o rodapé das postagens (footer), asimagens exibidas e blockquote (texto em destaque no post). 
Lembrando que os códigos de referencia são do modelo Mínima do Blogger.
Não se esqueça de fazer um backup do seu template antes de fazer qualquer alteração. Aconselho experimentar em um blog de testes.

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

.comment-link {
margin-$startSide:.6em;
}

.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}

.post blockquote p {
margin:.75em 0;   

   }

.post-footer{ 

Aquí é possível adicionar bordas e cores no background para destacar toda a área e adicionar padding para distanciar os elementos.Veja exemplo:

Abaixo o código do exemplo. Altere as cores e estilo de bordas como preferir. 

.post-footer {
margin: .75em 0;
padding: 10px; /*—Distancia entre elementos ---*/color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.8em;
border: 1px dotted #000000; /*---Espessura, estilo e cor da borda----*/
background-color: #cccccc; */---Cor do background----*/}

.comment-link {
Define a posição e margem com link para comentários.
.post-img {

Nesta sessão podemos personalizar as bordas e background das imagens exibidas. Com criatividade e conhecendo modelos de bordas, pode-se conseguir efeitos bem interessantes.


Código do modelo acima onde usei estilo “dashed” (pontilhado) para bordas. Também pode ser “solid” (linha reta) ou ridge (com efeito) . Há vários tipos de bordas, mas “abordaremos” esse assunto em outro post (hehe)

.post img {
background: #000000;
padding:4px;
border:2px dashed #cccccc;
}

.post-blockquote {

Essa é a área para personalizar o texto que queira destacar nos posts.
<<Olhe a primeira parte da postagem>>

Receba nossas atualizações: