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