07/12/2014

Modelo para Blockquote ( Caixa de Códigos)

Hoje estou aqui para postar um blockquote personalizado com efeito hover, achei ele bem bonitinho. Vejam como ele é abaixo e  se quiserem aprender é só continuar lendo!



Primeiramente procure por ]]></b:skin> e depois de ter achado, cole acima dele o seguinte código:

blockquote {
border: 1px solid #fb9dc5; /* Expessura, tipo e cor da borda */
background: #ffc4dd; /* cor do fundo */
padding: 10px;
font-size: 14px; /* tamanho da fonte */
font-variant:small-caps;
color: #f86aa6; /* cor da fonte */
text-align: justify; /* alinhamento do texto */
-border-radius: 10px;
}
blockquote:hover {
background: #ffe4ef; /* cor do fundo quando passa o mouse */
}


-

No próprio código explica o que pode ser feito.
Visualize e se estiver tudo certo salve 
OBS: Talvez o hover não apareça na visualização, mas depois de salvo aparecerá. 
Prontinho! Podem repassar o tutorial, mas com os créditos ao Chiclete Funny. Bom, e já falando em créditos tinha esquecido de creditar o blog Goods Sweets.

Bejus >3<

3 comentários:

  1. No meu próximo layout com certeza vou colocar isso, obrigada pelas dicas.

    Seguindo, segue de volta? http://mheeahcutie.blogspot.com.br/

    Beijos ♥

    ResponderExcluir
  2. Boa dica, já coloquei,postei no meu blog e dei créditos ♥

    ResponderExcluir