20 de jul. de 2012

Blockquote personalizado #1

Hoje vou ensinar a personalizar o blockquote. Para quem não sabe, blockquote é uma caixinha usada para dar destaque aos textos, fiz um post sobre isso, caso queira ver é só clicar aqui.
O blockquote desse tutorial é assim:
Bonito não? Você pode personaliza-lo com suas cores e do seu jeito.


1-Vá em Design > Editar HTML e marque a caixinha "Expandir modelos de Widget"

2-Procure por ]]></b:skin> e ACIMA disso, cole:
blockquote {
border-left: 8px solid #f2016d;
border-bottom: 1px dashed #f2016d;
border-right: 1px dashed #f2016d;
border-top: 1px dashed #f2016d;
background-color: #F8CCEF;
padding: 10px;
font-size: 12px;
color: #8B2074;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
Entendendo o código:
border-left: 8px solid #f2016d;

Essa é a personalização da borda da esquerda (aquela maior ) 8px é o tamanho, solid é o tipo e #f2016d a cor.
border-bottom: 1px dashed #f2016d;
border-right: 1px dashed #f2016d;
border-top: 1px dashed #f2016d;

Essas são as demais bordas: Bottom ( abaixo ), Right ( direita ) e Top ( topo ). Dashed é o tipo, você pode mudar para solid, dotted e etc.. E #f2016d a cor.

background-color: #000000; 

Cor de fundo do seu Blockquote.

padding: 10px;

Espaço que seu texto tem antes de topar na borda (não mude) .

font-size: 12px;
color: #ffffff;
text-align: center;

Tamanho da fonte, cor e alinhamento, respectivamente.

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

Borda arredondada. Apague se quiser deixar quadrado ou aumente o número para arredondar mais .

Veja alguns Tipos de borda para personalizar. Se quiser acrescentar hover repita o código, e depois da palavra blockquote acrescente :hover. Qualquer dúvida é só falar comigo.


Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar

Um comentário:

  1. Oi :) Amei! *-* Já estou usando no meu blog. :3 Obrigada! Beijos!
    Blog: http://my-stories-wonderful-books.blogspot.com.br/
    Página: https://www.facebook.com/BlogWonderfulBooks

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!