Personalizar Citações em Destaque (Blockquote) no blogger

Blogger, CSS, Postagens
2

Hoje vou mostrar como personalizar as citações em destaque das postagens de um blog no blogger, o chamado: Blockquote. O que vamos fazer é apenas adicionar algumas linhas CSS e estilizar o blockquote.

Bom, de início, no painel do blogger clique no link design e em seguida editar HTML, logo após procure (CTRL+F) por qualquer trecho no CSS com o nome blockquote (não expanda os modelos widgets).

✅ Canal no Youtube | Inscreva-se AGORA ✅

Após deletar todos vamos adicionar novos trechos CSS, procure pela linha abaixo:

]]></b:skin>

ANTES dela adicione o seguinte código:

.post blockquote {
margin: 1em 13px;
background:#f0f0f0;     /*cor do fundo do blockquote*/
border: 1px solid #c2c2c2;    /*cor da borda*/
border-left: 7px solid #c2c2c2;    /*cor da borda esquerda*/
padding:10px;    /* espaçamento do texto*/
font-size: 12px;    /*tamanho da fonte*/
font-family: tahoma;    /*tipo da fonte*/
color:#626262;    /*cor da fonte*/
}

Altere o código acima de acordo com suas preferências visualize e salve. Veja o resultado

OBS: O estilo será aplicado apenas no trecho em que foi selecionado a citação, para fazê-lo basta selecionar o trecho e clicar no ícone citação no blogger:

2 Comentários

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.