• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

20 de março de 2013

Post Footer Hover no blog

Poderiam ajudar minha amiga curtindo essa página aqui (www) ? agradeceria muito.
Tumblr_lmuyt8aw9f1qd4ap1o1_500_large
Hoje é o dia do blogueiro, parabéns para todos!
Olá moe Kawaiis ◕  ◕
estou muito ausente ultimamente, infelizmente continuarei assim por um bom tempo pois ainda tenho um quilo de exercícios de matemática para fazer até essa sexta, ainda terei de estudar para um teste ninguém merece, mais como a Hannah G3 disse, as postadoras novas estão de parabéns, dando conta do recado hehe.

Mais, hoje trouxe um tutorial super legal de como deixar o footer da sua postagem em hover com um efeito legal, quem não sabe, o footer da postagem é a parte onde fica os marcadores e o nome do autor, preview here.
Vamos aprender, super fácil !

Procurem por /* Posts 
Abaixo da linha pontilhada, cole:


.post-footer {
background-color: #f9f9f9;
color: #F3A3C2;
border-left: 8px solid #F8CBDD;
border-right: 8px solid #F8CBDD;
box-shadow: inset 0 0 20px #ccc, 0 0 0px#F5B4CE;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
margin:0.73em 0;
padding:3px 3px;
-webkit-transition-duration: .50s;
}
.post-footer:hover {
background-color: #f9f9f9;
color: #F3A3C2;
border-left: 8px solid #F3A3C2;
border-right: 8px solid #F3A3C2;
box-shadow: inset 0 0 30px #ccc, 0 0 0px#F5B4CE;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
margin:0.73em 0;
padding:3px 3px;
-webkit-transition-duration: .50s;
}

Personalize as partes em negrito, que no caso são as cores do footer, recomendo essa tabela.
Espero que tenham gostado do tutorial de hoje!

19 comentários:

  1. Muito fofo :3 =3 \o/ Feliz dia do Blogueiro ^^

    sense-wonder.blogspot.com.br

    ResponderExcluir
  2. Amei muito! Feliz dia do blogueiro! Venho e parabenizar neste dia tão especial para todos nós...

    Kisus...
    Things Crazy

    ResponderExcluir
  3. Super fofo footer em hover, se meu blog já não estivesse parecendo uma arvore de natal de tanta coisa piscando eu usaria!

    Lindo blog flor,
    beijos
    www.tastethesky.com

    ResponderExcluir
  4. O Efeito fica lindo :3
    Pena que não gosto dessa parte em hover pois sobe e desce a área de postagem e eu fico brincando com aquilo ><'

    The-Kawaii-Candy.blogspot.com.br

    ResponderExcluir
  5. ótimo tuto Megan! Muito útil e fica muito lindo, já coloquei lá no blog! ^^

    Make It Shine

    ResponderExcluir
  6. Adorei o tutorial *---*
    Seguindo já~
    Ah! E gostaria de avisar que já aceitei a afiliação lá no Wanted Dream ^=^

    Kisses :3

    ResponderExcluir
  7. Eu testei e fica realmente suuper fofo -* aah, avisa pra Hannah que já coloquei ela nos afiliados *--*

    ResponderExcluir
  8. Que legal! É super diferente... vou usar em breve *-*

    Desculpa por ter ficado tanto tempo sem comentar, é que eu estava fazendo o novo lay do blog...

    Beijos ;3 | Eu Amo HTML | {euamohtml.blogspot.com}

    ResponderExcluir
    Respostas
    1. Ah flor, que nada, eu que tenho que pedir desculpas, feliz dia dos blogueiros!

      Excluir
  9. Ah adoreiii o efeito fica muitoo legau!! Já já vou colocar no meu blog!! :D
    ah e FELIIIIIZ DIA DOS BLOGUEIROS(AS) pra Todas(os)!!! =^.^

    Bjox karinhoso Kaah'
    umapequenainspiradora.blogspot.com

    ResponderExcluir
  10. Super !
    Cara amei o tutorial, é bastante diferente !
    Também estou assim, muito atarefada... Mas, fazer o que ? ASHASUAS'

    ResponderExcluir
    Respostas
    1. Valeu linda, é né, horrível ficar tão atarefada assim...

      Excluir