20 de dez de 2012

Personalizando a data do post


Hoje vou ensinar a personalizar a data do post de um jeito bem simples e que pode ser modificado de várias maneiras. Esse tutorial é muito simples e existem várias possibilidades de usá-los. A data vai ficar parecida com a do Template Violeta, caso queira saber como é, dê uma olhada nele.


1- Vá no painel do blogger e procure Configuração > Formatação.

2- Mude o formato da data para 02/08/2012 (dia/mês/ano)

3- Depois vá no HTML do seu blog, aperte CTRL+ F e procure por:

.main-inner h2.date-header {
4- ABAIXO disso, cole:

font: Tahoma;
color: #333;
margin-left: -80px;
background: #f49cca;
float: left;
font-size: 11px;
padding: 4px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.main-inner h2.date-header:hover {
background: #87cefa;
}

 Entendendo o código:

Font: Tahoma; Fonte da data.
Color: #333; Cor da data.
Margin-left: Posição da data, mude para Right se quiser à direita.
-80px Distancia entre o post. Quanto menor, mais próximo.
Background: #f49cca; Cor do fundo;
Float: letf; Posição da data, mude para Right se quiser à direita;
Font-size: 11px; Tamanho da fonte.
Padding: 4px; Margem.

-webkit-border-radius: 5px;  
-moz-border-radius: 5px;
border-radius: 5px; Bordas arredondadas, apague se quiser quadrada ou mude a propriedade se quiser maior
background: #87cefa; Cor de fundo quando passa o mouse.

5- Visualize, se estiver tudo certo, salve.


2 comentários:

  1. Marina, me ajuda em um tutorial? Como que faz pro nome ficar seguindo o mouse? Tipo nos seus afiliados? Bjs.

    ResponderExcluir
    Respostas
    1. Aqui: http://chacomanjos.blogspot.com.br/2013/01/personalizando-o-tooltip.html

      Excluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!