Sobre o Blog

MamanunesO Dicas e Templates Mamanunes nasceu da minha necessidade de registrar as descobertas que faço enquanto aprendo a desenhar templates para a plataforma Blogger. Compartilho aqui alguns truques, templates e informações que considero úteis para blogueiros e curiosos. Entre e fique a vontade.

Info

22.9.09

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), as imagens 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:

image

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.

image
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. Leia o artigo:

Blockquote – Texto em destaque para aprender como dar estilo a esse espaço.

2 comentários

Diogo

Ola.
Eu gostaria de saber como eu coloco os posts como neste site (http://www.pontobit.com/).
No meu caso gostaria de colocar apenas uma noticia em grande em cima e depois 3 colunas de posts por baixo da inicial.
Será que me podia ajudar por favor?

Giovani Bartz

Acho que você pode me ajudar num ajuste que quero fazer em um dos meus blogs.
Eu quero tirar "toda" a parte do footer, só quero que apareça o título, imagem e descrição (texto) da postagem, será que tem como?
Eu usei o código de "leia mais", mas quero que fique um post colado no outro só com a separação de uma linha ( isso eu já sei fazer).
Agradeço sua ajuda e parabéns pelo blog.
Muito bom.

Postar um comentário

Caso queira informações mais detalhadas, ou encomendar um template personalizado, use o Formulário de Contato ou meu Email. Responderei o mais breve possível.
Obrigada.