01/03/2013

Colocando blockquote hover

até agora não entendi o porquê de eu ter usado a foto de um sapato
 Yey, tutorial! E o de hoje é super fácil. Não sei se a maioria das leitoras notou, mas no layout atual quando você passa o mouse em cima da blockquote a cor da borda e da fonte dela mudam. Não notou? Note agora!
Passe o mouse aqui, gatinha :3
 E hoje vim ensinar vocês a como fazer isso! É bem fácil, vamos lá?
 Primeiro abra o seu blog, clique em Modelo> Editar HTML> Expandir Modelos de Widget. Depois disso, tecle ctrl+f e procure por:
]]>
 E cole o código da blockquote (abaixo) acima do encontrado:

blockquote {
border: 1px solid #FF0000; /* modo da borda */
background: #fff;
padding: 10px;
font-size: 13px; /* tamanho da fonte */
color: #0000FF; /* cor da fonte */
text-align: justify;
-moz-border-radius: 0px 0; /* bordas arredondadas */
-webkit-border-radius: 0px 0; /* bordas arredondadas */
border-radius: 0px 0; /* bordas arredondadas */
-webkit-transition: all 2s ease; -moz-transition: all 2s ease;-o-transition: all 2s ease;transition: all 2s ease;}
blockquote:hover {
border: 1px solid #0000FF; /* modo da borda quando passa o mouse */
color: #FF0000; /* cor da fonte quando passa o mouse */
-webkit-transition: all 2s ease; -moz-transition: all 2s ease;-o-transition: all 2s ease;transition: all 2s ease;}

 Aí é só editar o que manda. Ah, e os códigos sublinhados são os que deixam a transição lenta, se quiser deixar ela normal é só apagar eles. Salve o seu código e pronto, sua blockquote já está no modo "hover"!
 Enfim, espero que tenham gostado e que ajude á quem queria! Não se esqueçam de creditar caso usem, ok? Qualquer dúvida é só falar comigo, como sempre ^3^

49 comentários:

  1. Eu gosto mais dos blockquotes com hover, ficam com um "charme" novo ou sei lá *rss
    Gostei desse, se eu não tivesse preguiça pra alterar as cores e tal até usaria :P
    Beijoos!

    caramelos-encantados.blogspot.com

    ResponderExcluir
    Respostas
    1. Também acho, hahaha >< Aaah, ok :3

      Excluir
  2. Adorei o tutooooo, mesmo preferindo blockquotes simples e normais!! Mas desde que colocaste esse lay, fiquei babando pelo block.!!

    Ju, do Epílogos e Finais.

    ResponderExcluir
    Respostas
    1. Aaaah, mas que bom que gostou então ><

      Excluir
  3. P.C mais uma vez adorei seu tutorial adorei mesmo ta de parabens que seu blog continue brilhando a cada dia mais, como um lindo diamante.



    www.levigustavodicas.com | me ajude na meta dos 150

    ResponderExcluir
  4. Fica bem legal.
    Beijo, Lili
    Princesa Teen. / Layout novo.
    Se inscreve? / Meu vlog.

    ResponderExcluir
  5. ficou lindo o resultado, adorei!

    http://conectadas2.blogspot.com.br/

    ResponderExcluir
  6. Te indiquei para responder uma tag: Conhecendo a Blogueira. Espero que você responda, beijos.
    http://garotadonordeste.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada, mas eu não aceito mais tags nem selinhos ^^

      Excluir
  7. Otimo tuto esta função é super útil quando esta correndo na postagem ^^. Gostei do Efeito parabéns mocinha ^^

    (⁀‵⁀) ∞ ღ ∞
    .`⋎´ღ¸.•°*”˜˜”*°•ღ

    ▓ ღღ Dany's Place
    ▓ ღღ Tutorial
    ___________________
    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓( ᐵ ᗜ ᑈ)ᘉ

    ResponderExcluir
  8. Adoreiii o tutorial, fica bem mais bonito o blockquote
    AdoreiAdorei
    bjinhos
    http://chuvadesonhooficial.blogspot.com.br/

    ResponderExcluir
  9. Gostei, muito bom seus tutoriais.

    http://simples-e-agradavel-bloog.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada, bom que gostou *---*

      Excluir
  10. Adorei a dica em breve vou tentar fazer!
    Tem novo post, confere.
    Beijoos
    http://www.garotasligadascom.blogspot.com.br

    ResponderExcluir
  11. Não adianta cara, eu me dou mega mal SEMPRE em html :c
    Beijos ♥
    ilovecantores.blogspot.com

    ResponderExcluir
  12. Adorei essa dica *-*
    Estou seguindo o blog
    Beijos

    http://blog-puro-glamour.blogspot.com.br/

    ResponderExcluir
  13. fica diwo o3o só que retardados como eu ficam meia hora passando o mouse na bloquote fkaskfaskdfaksdfksakkdfkasfkasdkfskafkskdkfsakdfkadsfaksdfkaskfaskfa

    ResponderExcluir
  14. Amei o tuto. O blockquote fica lindo assim! Eu fiquei meia hora "me divertindo" com o seu blockquote haha.
    Beijos
    universoteengirl-porlarissa.blogspot.com

    ResponderExcluir
    Respostas
    1. Ooown, brigada Lari, fico feliz que tenha gostado ><
      Também faço isso! hahaha ><

      Excluir
  15. Gostei do tutorial , fica muito bonito *--*

    Beijos,
    modicesdemenina.blogspot.com

    ResponderExcluir
  16. rsrs legal,adorei o tuto.

    Beijos
    Amora R.

    ResponderExcluir
  17. Amei o tutoria, a Bloquote hover é linda *-* Amei a do meu blog (By Diva, Paula) u_u
    Beijos :3
    http://garotasatrevidas-s2.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. *tutorial*
      #Momento eu analfabeta u_u

      Excluir
    2. Ooown, bom que gostou ><

      Excluir
  18. Adorei esse tuto, tava precisando de um blockquote personalizado esses dias, mas agora já achei. Vou ver se ponho esse...
    Beijos
    neversaynever-believe.blogspot.com.br

    ResponderExcluir
  19. Que Bacana o tutorial Paulinha *---*
    Adorei, vou usar, claro, com os créditos.
    Beijocas
    Eternal-Bella.Blogspot.Com (Fechado)

    ResponderExcluir
    Respostas
    1. Obrigada, bom que gostou ^^
      Okok

      Excluir
  20. Adore o tuto, é um pequeno detalhe mas fica tão bonitinho >.<
    Beijinhos
    Facebook do blog
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
  21. Tutorial perfeito *-*
    Gostei muito!
    Beijos,
    sonhosde-primavera.blogspot.com.br

    ResponderExcluir