Blockquote Personalizado II

 

Yoo !

A Ju pediu um tutorial de como deixar o blockquote igual o do Kawaii . Antes de mais nada, eu não vou usar no código as mesmas cores do KW, mantenha o bom senso e use a sua personalização, ok ? (:

O que você deve levar em conta aqui é o molde, a personalização deve ser sua . 

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

2. Procure por ]]></b:skin>

3. Acima desse código cole esse:

blockquote {

border-left: 8px solid #f2016d;

border-bottom: 1px dashed #f2016d;

border-right: 1px dashed #f2016d;

border-top: 1px dashed #f2016d;

background-color: #000000;

padding: 10px;

font-size: 12px;

color: #ffffff;

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 tals. E #f2016d a cor (:

background-color: #000000; 

Fundo do seu Blockquote.

padding: 10px;

  

Espaço que seu texto tem antes de topar na borda, não aconselho mudanças .

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 .

Pronto (:

Dúvidas ? Nos Comentários