23 junho 2012

Data acima do titulo do post com efeito hover


Hello! Hoje mesmo estava fuçado nos códigos do HTML para ver se alguma coisa legal saia de lá -kkkk' - e não é que eu consegui fazer um estilo de data bem legal?! É bem fácil de fazer, e o efeito fica bem legal, espero que gostem. A data ficará assim:


Para aprender a como coloca-la no blog é só clicar em ''Leia Mais'' :)

        Veja se sua data esta no formato correto:


     2° Vá no HTML do seu blog, de ''Ctrl + f'' e procure pelo seguinte código:

.main-inner h2.date-header {font: $(date.font);color: $(date.text.color);


E logo abaixo dele cole:


margin-right: -10px;
background: #FFB6C1;float: rigth;
font-size: 11px;
padding: 4px;}

.main-inner h2.date-header:hover {
background: #DB7093;
}





                       
 background: #FFB6C1;  é a cor do fundo da data,mude para a cor que quiser nessa tabela nessa tabela.  Se você não quiser o efeito hover é só apagar o código:

.main-inner h2.date-header:hover {
background: #DB7093;
}

               Bem fácil o tutorial, não é?! Então é isso aí, pretendo ver se consigo fazer mais tutoriais e trazer para vocês! 

                                      Bjs

22 comentários:

Ary disse...

muito legao o tutu bjs
http://diversidades-deumaadolescente.blogspot.com/

Gislaine Dias | Blog disse...

Adorei o tutorial, a data fica muito bonita.
http://i-teenbr.net.tc

lia disse...

Seu blog está concorrendo na batalha de blogs desta semana!
Chame seus leitores para votarem em você :)
Veja a batalha aqui: http://migre.me/9CMuq
kissus

Infinita disse...

Muito bom esse tutorial. Faz muita diferença no visual de um blog.

Beijos!!
Blog|Twitter

ємilly B. disse...

É legaal *0* Vou ver se combina com o meu lay *--*
xoxo
s2emilly.blogspot.com

! Lili ! disse...

Legal o efeito.
http://blogmuitofofodaaline.blogspot.com.br/

Anônimo disse...

Adorei esse efeito hover, deve que fica lindo né? O tutorial é ótimo!
Amor, seu blog está uma fofura!
Beijinhos, momamoraes.blogspot.com

Unknown disse...

Adorei o tutorial, muito útil.
http://sweetdreamssah.blogspot.com.br/

sss disse...

ótimo tutorial , fica lindo com esse efeito :)

http://evelynrestyles.blogspot.com.br/

Eduarda Tainá disse...

Eu gosto desse tutorial, dá um charminho , uso nos meus blogs!
Na Flor da Idade
Tudo Sobre Photoscape

Bia Rodrigues disse...

Ótimo tutorial *-*
Beijos :*
http://pepperlipstick.blogspot.com.br

Priscilalirow disse...

amei otimas dicas =]
beijinhos ♥

http://priscilalirow.blogspot.com.br/

Unknown disse...

Ameeeeeei, voou usar esse tuto no meu proximo Layout, mt bom msm :)
http://s2hay.blogspot.com

Unknown disse...

Muitoo lindoo o seu blog .


http://blog-adormecida-com-insonia.blogspot.com.br/

Angel Poubel disse...

Nossa adorei o tutorial amiga!
Bem explicadinho né!?
Big bj ;*
http://angelpoubel.blogspot.com.br

Unknown disse...

Adorei o tuto *--* bem fácil de fazer \o/ querida, adorei seu blog, é td mt divo aqui haha, aqui tem um ótimo conteúdo, vc escreve muito bem! está de parabéns viu? estou seguindo aqui, depois quando tiver um tempinho passa lá no meu blog e se gostar seguir? vai ser uma honra te receber lá! bjs, Ana Karoline via Morangos Despedaçados.

http://morangosdespedacados.blogspot.com.br

Dayane Nascimento disse...

Adorei o tutorial ♥
pena que eu não coloco datas no meu blog rs
bjinhos
Conversando com a lua

Anônimo disse...

Que demais Paty,eu adorei o tuto!
Tem um post sobre seu blog lá no meu blog,passa lá:
http://sweetdreamgirloficial.blogspot.com.br/2012/06/recomendo-3-blogs-para-se-apaixonar.html

Milena disse...

Fica linda a data, muito legal o efeito!

diamantesdeumagarota.blogspot.com

Yasmin Ribeiro disse...

Amei o post, é super util, mais eu gosto de data mais tipo bem basico!

Oiee paty, é a yasmin, já estou seguindo aqui, fiz meu blog novo segue lá?

e se puder coloca em no blogroll??

bjus!

o garota fashion star naum existe mais!

http://sweetsecretfantasy.blogspot.com.br

Ingrid Brito disse...

Amei o tutorial...
bom eu já sou seguidora do blog,e queria te pedir um big minímo favor (rs).
É que fis um novo quadro no meu blog "QUE CARREIRA SEGUIR?" e queria muito que você participasse.
Pode ser pelos comentários do blog mesmo ou pelo facebook.
Nome:
Idade:
Série(ano):
Que faculdade(profissão) pretende cursar(realizar) OU que já tenha cursado:
e enfim,o porque pretende fazer esse curso:

seria um enorme prazer ter a história da bloggeira do blog: MAGIC lá no meu blog>.<
Mesmo assim se não tiver tempo um bjão°•°
wwwcoisasdegiirls.blogspot.com
face: Ingrid Brito

disse...

Amei suas dicas, muito criativo seu blog e fofo tmbm, bjs Gabii.

www.girlsteensgn.blogspot.com.br

entre, conheça e siga.