Tutorial: Personalizar blockquote (Caixa colorida no post)

Oi gente, como vocês estão? Hoje vocês irão aprender a personalizar seu blockquote, que é uma caixinha colorida como essa abaixo, onde você pode adicionar um texto ou uma citação que você queira destacar no seu post.

Aqui você escreve tudo aquilo que quer deixar em destaque.

Para personalizá-la é muito fácil, basta você ir até o Editar HTML do seu layout e agora é só expandir <b:skin> ... </b:skin> conforme mostra na imagem abaixo:

Agora, depois de ter expandido, é só usar a tecla de atalho CTRL + F e pesquisar pelo seguinte trecho no seu layout blockquote { ou blockquote{ . Se não achar no seu layout é só você procurar por ]]></b:skin> e colar um dos modelos ACIMA desse trecho.

Se você achou o blockquote { você deverá encontrar um trecho parecido com esse a seguir, porém não estará igual:

blockquote {
background: #ccc;
margin:10px;
padding:10px;
}

Substitua todo esse código do blockquote { até o } por um dos modelinhos a seguir:

MODELO 1
Aqui ficará um texto para servir como modelo

blockquote {
background:#ffb3c0; */ cor de fundo /*
margin:15px; */ margem entre a borda da area de postagem e a caixinha de blockquote /*
padding:15px; */ margem interna /*
font-family:georgia; */ fonte */
font-style:italic; */ estilo da fonte */
font-size: 13px; */ tamanho da fonte */
color:#f21e41; */ cor da fonte /*
border-top:5px solid #c4112f; */ borda do top */
}

---

MODELO 2
Aqui ficará um texto para servir como modelo

blockquote {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0J1uw-YAkCNIRGNKz5VqK-36YTZZbuIwBR5CMHBp_9Z9QdPD_UO04lwxOa6lEdaTdrKy0wKfNMuzUP9p1HmBFYG8yAWbqk_J_6qkwuTdki9niy5Ayv5sG7NAMDYRTwfMlp49q5QpWcUM/s1600/brushed_alu.png'); */ cor de fundo /*
border: 1px solid #E0E0E0; */ borda */
color: #616161; */ cor da fonte /*
font-family: 'calibri', verdana;
font-style: normal; */ estilo da fonte */
font-size: 14px; */ tamanho da fonte */
margin: 15px; */ margem entre a borda da area de postagem e a caixinha de blockquote /*
padding: 15px; */ margem interna /*
text-align:justify;
-moz-border-radius: 10px; */ borda arredondada */
-webkit-border-radius: 10px; */ borda arredondada */
border-radius: 10px; */ borda arredondada */
}

---

MODELO 3
Aqui ficará um texto para servir como modelo

blockquote {
background: #F7F6F5; */ cor de fundo /*
border: 1px solid #E6E2DF; */ borda */
color: #96928D; */ cor da fonte /*
font-family: 'calibri', verdana;
font-style: normal; */ estilo da fonte */
font-size: 14px; */ tamanho da fonte */
margin: 15px; */ margem entre a borda da area de postagem e a caixinha de blockquote /*
padding: 15px; */ margem interna /*
text-align:justify;
-moz-border-radius: 10px; */ borda arredondada */
-webkit-border-radius: 10px; */ borda arredondada */
border-radius: 10px; */ borda arredondada */
}

---

MODELO 4
Aqui ficará um texto para servir como modelo

blockquote {
background: #00bdb0; */ cor de fundo /*
color: #fff; */ cor da fonte /*
font-family: 'segoe orint', verdana;
font-style: normal; */ estilo da fonte */
font-size: 14px; */ tamanho da fonte */
margin: 15px; */ margem entre a borda da area de postagem e a caixinha de blockquote /*
padding: 15px; */ margem interna /*
text-align:justify;
-moz-border-radius: 10px; */ borda arredondada */
-webkit-border-radius: 10px; */ borda arredondada */
border-radius: 10px; */ borda arredondada */
}

---

MODELO 5
Aqui ficará um texto para servir como modelo

blockquote {
background: #f21e41; */ cor de fundo /*
color: #fff; */ cor da fonte /*
font-family: 'segoe print', verdana;
font-style: normal; */ estilo da fonte */
font-size: 14px; */ tamanho da fonte */
margin: 15px; */ margem entre a borda da area de postagem e a caixinha de blockquote /*
padding: 15px; */ margem interna /*
text-align:justify;
-moz-border-radius: 10px; */ borda arredondada */
-webkit-border-radius: 10px; */ borda arredondada */
border-radius: 10px; */ borda arredondada */
}

Entenda os atributos

• Background: É onde ficará a cor do plano de fundo do elemento, geralmente usa a cor no valor em hexadecimal (use o Colorpicker para isso), também é possível usar imagens como plano de fundo fazendo o seguinte     background: url('link da imagem');
• Color: É a cor do texto que estará presente dentro desse elemento, você deverá escolher uma cor em hexadecimal, não esquecendo de colocar antes do valor o #, que ficará assim #CCCCCC;
• Font-Family: Você selecionará uma fonte em seu computador, porém, tome cuidado com qual fonte você vai escolher pois fontes personalizadas (aquelas que não vieram com seu sistema operacional) podem não aparecer no computador de outras pessoas que visitarem o seu blog caso elas ainda não tenha essa fonte instalada;
• Font-Size: É o tamanho da fonte em pixels, você sempre deverá colocar o valor e no final dele px. Ex: 18px;
• Margin: É o espaço entre a borda da área de postagem e outros textos que estarão fora desse elemento;
• Padding: É a margem interna onde dará um espaço entre a borda do elemento e o texto;
• Text-Align: É o alinhamento do texto, seja Esquerda, Direita, Justificado... Porém, quando for colocar um desses alinhamentos, deve-se ser posto em inglês: Left, Right, Justify;
• -moz-border-radius, -webkit-border-radius, border-radius: Leia mais em Bordas Arredondadas;

Dúvidas, sugestões? Pedido de help me? Mandem nos comentários que eu respondo!