03/07/2013

Tutorial - Personalizar o Blockquote em hover com duas barras


Hi cerejas 

Eu estou viajando, e essa postagem é programada, para que o blog não fique desatualizado. Bom, eu passarei bastantes dias fora, mas quando voltar, eu irei responder todos os comentários, e o fato de eu não poder postar, é porque não vou ter tempo e também o PS. Ah, o layout tá ficando bom, e o tema vai ser da Demi :)

 O Blockquote do tutorial é muito lindo, eu ja havia usado bastante esse blockquote aqui no blog. Ele obviamente deixa duas barrinhas, e que vocês podem mudar a cor no hover. É super fofinho :3




Vá no HTML do seu blog, e procure por:


]]></b:skin>



Depois, cole isso acima da tag procurada:


.post blockquote {
background: #f1f1f1; /* fundo */
padding: 3px; /* acolchoamento */
border-left: 13px solid #Sua Cor; /* espessura, tipo e cor da borda esquerda */
border-right: 13px solid #Sua Cor; /* espessura, tipo e cor da borda direita */
transition-duration: 1s; /* transição */
-moz-transition-duration: 1s; /* transição */
-webkit-transition-duration: 1s; /* transição */
}
.post blockquote:hover { /* quando o mouse passa por cima */
border-left: 13px solid #Sua cor em Hover; /* espessura, tipo e cor da borda esquerda */
border-right: 13px solid #Sua cor em Hover; /* espessura, tipo e cor da borda direita */
}


No código está tudo explicadinho, é só personalizar do seu jeito! 
Créditos: Birthday Cake.


Bye ~


9 comentários:

  1. A, já vi o tuto C: Fica suuuuuuuper lindo ><'

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
  2. Legal, nunca tinha visto um blockquot neste estilo *-*

    Pode me ajudar votando na enquete no meu blog?
    http://laprettyheart.blogspot.com.br/2013/07/qual-video-aula-voces-querem.html

    ResponderExcluir
  3. Amei esse blog . . .
    Já faço parte dele . . .
    Segue o meu ?
    http://bloguinhodanubia.blogspot.com.br/
    beiijiinhos fofa *--*

    ResponderExcluir
  4. Bem legal esse tutorial :)

    http://lagrimas-de-diamante.blogspot.com.br/

    ResponderExcluir