Diferenca entre margin e padding

Se você é como eu e vive xeretando o código do seu template, com certeza se depara com determinados valores que podem deixá-lo confuso. À princípio a diferença entre margin e padding me confundiu um pouco, por isso vou explicar para vocês o resultado de um e outro:

Margin determina a distância de um elemento para outro no template, por exemplo, a distância entre uma coluna e outra. Padding dá um espaço entre o conteúdo deste elemento para as bordas.

Visualmente para que se compreenda bem, veja na imagem1 a coluna do post, que está envolvida por uma borda vermelha. Esta coluna tem margin-left: 10px, ou seja, um espaçamento de 10 px entre o seu limite à esquerda e o limite da outer-wrapper (que é o 'corpo' do template). Já o texto em sí, que é o conteúdo do elemento main-wrapper (ou a coluna do post), está com margin e padding 0px e o resultado é que o texto fica colado nas bordas da coluna:



Aqui eu coloquei uma borda preta em torno do texto para que se visualize melhor:



Para arrumar esta distância entre o post e os limites da coluna, procure por:

.post {
margin: 0px;
border: 1px solid #000000;
}

Agora vou aplicar uma margin: 10px no post, ficando assim:



Agora vou acrescentar um padding: 15px;



Vejam como o texto se afatou das bordas pretas.

Neste caso, você pode, por exemplo, estabelecer uma cor para a coluna e outra para o post, o que torna de grande importância o uso de padding.

Read More

Colocando a data abaixo do titulo do post

Vá no html do seu template, marque Expandir Modelo de Widget e encontre este trecho (lembre de usar o Ctrl+F para localizar mais rápido):

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

O que você terá que fazer é deslocar este trecho para outro trecho mais acima. Selecione e recorte este trecho do código e depois encontre esta outra parte:

<div class="post-header-line-1">
<div class="post-body">

e cole logo abaixo o código que você recortou antes. Deve ficar assim:

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2> </b:if>
<p><data:post.body/></p>

Visualize e se tudo estiver ok, salve. Se não estiver correto, é só clicar em Limpar Edições e tentar novamente.

Read More

Image Reflection Generator

Para criar o efeito de reflexo em suas imagens, basta ir ao site ReflectioMaker,subir uma imagem do seu computador (ou mesmo colocar o endereço de uma imagem), escolher o tamanho do reflexo e a cor de fundo (background). O resultado do efeito pode ser conferido na imagem do topo aqui do Templates.

Read More

Retirando borda das imagens

Por padrão, os templates do Blogger vem com borda nas imagens (e como faço meus templates modificando o Mínima do Blogger, meus templates, na maioria também tem), o que não agrada à todos. Para retirar a borda das imagens, procure este trecho do código:

.post img {
padding:2px;
border:1px solid $bordercolor;
}

E apague o que está em negrito. Você também pode modificar esta borda, por exemplo, alterando a largura dela ou seu tipo.

Tipos de borda:

• dotted: borda pontilhada

• dashed: borda tracejada

• solid: borda contínua

• double: borda dupla

• groove: borda entalhada

• ridge: borda em ressalto

• inset: borda em baixo relevo

• outset: borda em alto relevo

Read More