Tweet Boas Novas do Blogger – Mais opções para postagens

Uma boa notícia! Hoje acessando o Blogger in Draft percebi dois novos ícones e fui conferir.  Agora podemos postar vídeos num clic.  Ainda mais, ao dar um duplo clic em cima do vídeo e posicionando o mouse sobre os quadradinhos é possivel ampliar o tamanho. Essa é a primeira novidade. Veja as imagens.

Leia mais...

Tweet 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), 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:

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

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

Leia mais...

Tweet Personalizar Área de Postagens do Blogger - I Parte

Tenho recebido comentários e emails de leitores interessados em personalizar sua área de postagens, como mudar a posição dos títulos dos posts, formato de data, footer, etc.  Então vamos lá:
Em primeiro, lugar para sua melhor compreensão, veja este artigo que mostra a estrutura básica de um template.

Leia mais...