Personalizar blockquote no blogger

06:10 in

Como personalizar as citações em destaque das postagens de um blog no blogger? O chamado: Blockquote? É algo muito simples. Vamos apenas adicionar algumas linhas CSS e dar estilo ao blockquote.
 

Para personalizar o blockquote no seu blog, siga os passos a seguir.

Passo 1: Entre no painel do blogger clique no link design e em seguida editar HTML
Passo 2: Procure (CTRL+F) por qualquer trecho no CSS com o nome blockquote
Passo 3: Delete o código encontrado e substitua pelo código abaixo:
 

blockquote {
background: #A9F5D0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzCquftuKKUKKGGVwzLmqWsa_gxr86MzemQ4EG9bhme9UQLbooQ48EB4Pb3MndJ6CUwrZZnnZxDcaMZwFrNZLle3EbxaGGYP2V1-TURmz4MkPGBG5TT03s0vdlh2gJpuvKWcvDy7sxNNA/s200/blockquote.png) top left no-repeat;
margin: 10px 15px 3px 3px;
padding: 5px 15px 10px 32px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
font-style: italic;
}

 
O resultado será este:
 

Se preferir você pode dar um aspecto mais moderno como este:

Para o segundo modelo use este código:

blockquote {
margin: 10px 15px 3px 3px;
padding: 5px 15px 10px 15px;
border-left: 5px solid #FF8000;
font-style: italic;
}

 
Alguns layouts não tem o código: blockquote {
Em outras o código começa um pouco diferente: .post blockquote {
Depois de inserir o código clique em Visualizar se estiver tudo certo clique em Salvar modelo. Pronto você já tem o blockquote personalizado no seu blog.
Até a próxima!