22 fevereiro 2013

Como Colocas Blockquote em Hover

Olá minhas princesas, tudo bem?
Hoje, observo que muitas pessoas não sabem colocar blockquote, certo? 
É, mais alguns deve saber fazer, só que não em Hover né? 
Hoje venho ensinar a  vocês um tutorial de Como Colocar Blockquote em Hover. E ai, o que estão achando? Gostaram?  Espero que sim né? 
Uma blockquote ajuda muitas pessoas em vez de colocar algum aviso coloque na Blockquote e ai, vai ficar muito bonito e acima de tudo personalizado, cada um que passar o mouse por cima vai mudar a cor e tal... Bem, não intenderam não? Vou mostrar para vocês então. Ok?

Essa é a Blockquote em Hover. Passe o Mouse em Cima!

E ai, gostaram? Querem aprender? É muito fácil. É só seguir pequenas dicas, pois o tutorial é faterrimo (isso existe se não existe no MFF existe). Então, vamos aprender né?

Passo a Passo:

1º Entre em seu HTML do blogger e procure por:

]]></b:skin>

2--> Depois de encontrar esse código, em cima coloque esse outro código:


/*Blockquote em Hover By: Mundo Fantástico Feminino
----------------------------------------------- */
blockquote {
border-left: 15px solid #SUACOR;
background-color: #SUACOR;
padding: 10px;
font-size: 11px;
color: #5c5c5c;
text-align: center;
box-shadow: inset 0 0 12px #ecebeb, 0 0 5px #bebebe;
-webkit-transition-duration: .50s;
}
blockquote:hover {
border-left: 18px solid #SUACOR;
background-color: #SUACOR;
padding: 10px;
font-size: 11px;
color: #5c5c5c;
text-align: center;
box-shadow: inset 0 0 12px #ecebeb, 0 0 5px #bebebe;
-webkit-transition-duration: .50s;
}


Bem, meninas é isso. Espero que curtiram o post. Então, em lilás é as bordas dos lados, por exemplo a lilás é a quando não se passa o mouse, e a segunda  de vermelho é quando se passa o mouse. 



46 comentários:

  1. a blockquote houver é muito lindaaa o/
    acervo-de-livros.blogspot.com

    ResponderExcluir
  2. Bem legal o tutorial.


    www.teenlist.blogspot.com

    ResponderExcluir
  3. Ótimo tutu, fico muito bonito e organizado c;

    Beijos

    ResponderExcluir
  4. Que legal...bem explicadinho, gostei.
    Beijos minha linda.

    andreakubiki.blogspot.com

    ResponderExcluir
  5. Adorei, quando eu tiver um tempinho vou colocar no meu blog, até salvei a página nos favoritos :)

    acodl.tk

    ResponderExcluir
  6. Adooorei a dica, quando eu tiver uma oportunidade pretendo fazer!! :]]

    http://semprequis-ter-umblog.blogspot.com.br/

    ResponderExcluir
  7. Adorei o tutorial, bem útil e fácil, talvez eu use, seguindo aqui tá linda? Pode retribuir a visita ?

    Link - Style Of Me

    ResponderExcluir
  8. SUPER fácil!

    @esteffanifontes, do blog Aos Dezesseis Anos
    aosdezesseisanos.blogspot.com.br

    ResponderExcluir
  9. Nossa que simples!? Eu pensava que era mais complicadinho.Super útil.

    Beijos,
    http://whateufiz.blogspot.com/

    ResponderExcluir
  10. Muito fácil. bjus!!!

    galerafashion.blogspot.com.br

    ResponderExcluir
  11. Puxa vida! E fica legal a bessa neh!
    Adorei o post! E valeu a paciência pra ensinar =) =) =)
    Seja sempre bem vinda lá!
    beijo
    http://momentosdemodaebeleza.blogspot.com.br/

    ResponderExcluir
  12. Já conhecia o tutu, acho bem essencial e já usei em um dos meu layouts passados, é ótimo, recomendo. O resultado é lindo!!

    Beijão <3
    http://porckybunny.blogspot.com.br/

    ResponderExcluir
  13. Amei, fica muito lindo *uuu*
    chama-asamiga.blogspot.com

    ResponderExcluir
  14. Legal o tuto *-*
    http://perfeitateen.blogspot.com.br/

    ResponderExcluir
  15. Que legal , gostei de saber ...

    maquiagenseseusafins.blogspot.com.br

    ResponderExcluir
  16. Ain que tutorial legal...esse eu não conhecia, coonhecir seu blog e achei td tão fofo*----* te seguindo flor* se puder visita o manias se gostar segue?

    http://maniasgirls.blogspot.com.br/

    ResponderExcluir
  17. Bah! Que legal...
    Adorei a dica minha linda.. Vou usar lá no blog.
    Bjs..

    http://irmasdebeleza.blogspot.com.br

    ResponderExcluir
  18. Oi flor !
    Amei seu blog !
    Eu já sabia sobre o blockquote e uso .
    Mas o meu modelo é diferente e bem simples ^^
    Antes eu usava um com hover . Mas teve mudança de design e essas coisas no meu blog então é melhor inovar , rsrs~~
    Fique com Deus , beijinhos :*
    WWW.NEWROMANCE.TK

    ResponderExcluir
  19. Ótimo tuto :3
    space-sweet-girl.blogspot.com.br

    ResponderExcluir
  20. Nossa, amei o tutorial, tudo bem explicado né? Amei

    http://newsdayoff.blogspot.com.br/

    ResponderExcluir
  21. Muito legal! Haha, adoreeeei!!

    Novo layout no BDF! Corra para ver:
    Batom De Framboesa.

    ResponderExcluir
  22. Tenho vontade de colocar nos meus posts, outro dia tento pra ver se meu layout permite... Fica bem legal!

    Beijos
    Retribui? http://livrosebatons.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Ah! Então coloca flor!
      Ótimo Post!
      By: Nath
      Participe do Sorteio! Estamos te esperando por lá!

      http://mundofantasticofeminino.blogspot.com.br

      Excluir