• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

1 de janeiro de 2013

Blockquote em Hover (Exclusivo)

Tumblr_lvro1xcj5b1qems3lo1_500_large
Olá gente,
 hoje trouxe mais um tutorial para vocês, pois estou terminando o chocoMapa e quero mais tutoriais para colocar lá, pois temos muito poucos, hoje trouxe um tutorial super legal, de um blockquote em hover super lindo.
ps.: não reparem no blog de live preview, é que tenho preguiça de editá-lo e deixá-lo bonito.
Créditos aqui.

Cole isso acima de ]]></b:skin>:



blockquote {
border: 3px outset #B03060; /* Cor da Borda */
background: #FFF0F5; /* Cor do Fundo */
padding: 5px;
font-size: 12px; /* Tamanha da Fonte*/
color: #B03060; /* Cor da Fonte */
text-align: justify;
}
blockquote:hover {
border: 3px inset #9400D3; /* Cor da borda Hover */
background: #F8F8FF; /* Cor do fundo Hover */
}

Pronto agora é só editar as partes em negrito, que são as cores, e se você não quiser com esse efeito de 'entalhado' no lugar onde está  itálico você substitui por: 

                                                             #Estilos de bordas:


Borda Solid 
Código: Border: 1px solid #000000;

Borda Dotted 
Código: Border: 2px dotted #000000;

Borda Dashed 
Código: Border: 1px dashed #000000;

Borda Groove 
Código: Border: 3px groove #aa3cff;

Borda Inset 
Código: Border: 3px inset #aa3cff;

Borda Outset 
Código: Border: 3px outset #aa3cff;

Borda Double 
Código: Border: 3px double #000000;

E para usar o blockquote para que não sabe, é só clicar nessa figura para aumentar:

Super fácil né?! e fica lindo ^_^ quero saber o que acharam.


17 comentários:

  1. Que lindo o blockquote >3< ameii

    Bjs

    ResponderExcluir
  2. achei muito lindo este estilo de blockquote,mas é o seguinte,no meu template os tutos de ninguém ta funcionando,será que eu poderia pegar um theme seu e edita-lo,mas colocar no créditos que usei o seu template?

    ResponderExcluir
    Respostas
    1. claro querida, mais tipo, você usou aquele tutorial de gadgets diferentes no seu blog? pois tem um tutorial de gadgets diferentes que quando a gente usa ele, não podemos colocar nada abaixo do código pois se não, não funciona, aí semo[pre temos de colocar os códigos html em cima, talvez seja isso

      Excluir
    2. não,não usei,deu esse problema depois que eu tirei um fundo cinza que ficava em volta dos gadjets...e obrigada pela permissão ^^

      Excluir
    3. de nada querida, mais os nossos themes são para isso mesmo :)

      Excluir
  3. *o* Que lindo blockquote, muito perfeitoooo! Amei demais!! Amore, obrigada por atender meu pedido do título dos gadgets, vou usar no próximo layout com certeza! Um beijo!

    Explodindo Glitter
    Visita? *-*

    ResponderExcluir
  4. O blockquote é perfeito, é super lindo, e como você colocou o título dos gadgets nesse estilo? Ensina plis, adorei ele é super legal quero aprender por favor.

    ResponderExcluir
    Respostas
    1. á ensinei esses dias mesmo, aqui está o link: http://adolescentenerd.blogspot.com.br/2013/01/titulos-de-gadget-em-hover-e-numerados.html

      Excluir
  5. Megan, quais tumblrs de HTML preferidos? Faça uma lista com pelo menos 5 e posta pf?

    ResponderExcluir
    Respostas
    1. tá ^^
      eu tô mais de dias tentando fazer um post assim só que nem tenho tempo, vou ver se arranjo um tempinho ^^

      Excluir
  6. Lindo ele muito lindo parabéns pela criação ^^

    jovenclube(.blogspot.com.br)

    ResponderExcluir
  7. Quee Lindo! Ameei ♥
    connectadus (.blogspot.com)

    ResponderExcluir