22 junho 2012

Outro estilo para data da postagem


Surprise!! Hoje veio com um jeito fofissimo de personalizar a data do post!! Confere ai:

Gostou?
Então::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Primeiro vá em Configurações>> Idioma e Formatação >> Escolha formato de data esse: 22 de junho de 2012 (claro que vai estar a data do dia que fizer o tuto)

Agora vá em Modelo>> Prosseguir >> Ctrl+F >> e pesquise por:
.main-inner h2.date-header {  font: $(date.font); color: $(date.text.color);}

e substitua tudinhoo por:

.main-inner h2.date-header {
color: #ffffff; /* cor da fonte */
margin-left: -33px; /* margem esquerda */
margin-top: -20px; /* margem acima */
background: #F051A3; /* fundo */
float: left; /* onde fica (left ou right) esquerda ou direita */
width: 80px; /* altura */
height: 65px; /* largura */
-webkit-border-radius: 10px; /* bordas arredondadas */
-moz-border-radius: 10px;  /* bordas arredondadas */
border-radius: 10px;  /* bordas arredondadas */
 font-size: 18px; /*Tamanho da fonte*/
font-family: tahoma; /* fonte */
display: block; /* fixo */
text-align: center; /* alinhamento do texto */
}
.main-inner h2.date-header:hover {
-webkit-border-top-right-radius: 20px;  /* bordas arredondadas */
-webkit-border-bottom-right-radius: 20px;  /* bordas arredondadas */
-moz-border-radius-topright: 20px;  /* bordas arredondadas */
-moz-border-radius-bottomright: 20px;  /* bordas arredondadas */
border-top-right-radius: 20px;  /* bordas arredondadas */
border-bottom-right-radius: 20px;  /* bordas arredondadas */
-webkit-transition-duration: .40s; /* duração da transição */
background: #c6c6c6; /* fundo */
}

Nooossaa que código grande- sim, é enorme!- mas enfim, como sempre as instruções estão no código, um crédito final:
Esse efeito é do blog Let's Go! que entrou -infelizmente :(- em hiatus, mas vale a pena visitar! Clique aqui e veja o post
  
PS: Vocês devem estar pensando porque outro tutorial de data, bom é porque aquele é por imagem e tem quem prefere por imagem e este por code é mais personalizável e eu tento agradar a todos, então here it is, gentee, minha cabeça ta cheia de tutorias e dicas meu deus e ainda tenho vários utilitários então se preparem e avisem as friends para entrar no blog que vai bombar!!

Kiss&Kiss





6 comentários:

Lola disse...

Achei meio grande, mas é bem legal ^^
Me visita, amada!
Chêrim, Lola ;**

Bárbara disse...

Tava doida atrás desse tuto! *-*
Teen World

Carol Gomes disse...

Estou aqui para divulgar meu blog. Lá você encontrará recursos para incrementar seu blog, tutoriais e gráficos.
E não deixe de visitar meu portfólio também!
Passa lá e me diga o que achou!

Tutti i Fiori - http://www.tuttiifiori.zip.net

Amanda Rosa disse...

Amei o blog! estou seguindo, viu?
Você já está até na minha blogroll.
Bjs -> imnanda.blogspot.com

∞ Lara disse...

Oi, tudo bom? Nossa, seu blog é muito lindo (: Já to seguindo *U* Você poderia me dizer qual é o nome da fonte que você usou para fazer o seu menu? Já estou a um tempão atrás do nome, mas nunca acho.. Me ajudaria bastante! Obrigada, beijo (:
candywonderland.tk

Rafa# disse...

oi, você pode seguir meu blog? To seguindo o seu.
sweet-fangs.blogspot.com.br
Kissus
Rafa#