8 modelos prontos de blockquote para usar no blog

Você sabe o que é blockquote? Ou, em português, citação?
Em linguagem blogueira blockquote é essa "diferenciação" que fazemos em um trecho do post para destaca-lo.
Sua origem é a citação feita em livros e na mídia impressa para destacar a fala de alguém ou adicionar ao texto a fala de uma pessoa outra que não o autor do texto.
Nos blogs esse recurso serve para destacar trechos de livros, falas de filmes, citação de outros autores, um trecho mais relevante do post, etc...
Vou exemplificar:

Oi! Eu sou um blockquote (citação) personalizado para se diferenciar do restante do post.
Sou bonitinho, né? E sirvo para destacar trechos de livros, falas de filme, trechos de outro blog ou post, etc...

Entendeu? Isso é um blockquote personalizado.
Vou te ensinar alguns modelos para usar em seu blog.
Estes, abaixo:

 
 
 
 
 

O modelo 8 está ao vivo na página com os códigos.
Para ver os códigos e copiar o que deseja usar acesse a página com os códigos:


Copiar os códigos

Agora vamos aprender como usar os códigos que forneci.
Vamos?

Como usar blockquote personalizado no Blogger

Para que a personalização do blockquote funcione é preciso, sempre e sem exceção, ativar o recurso Citação no trecho que você deseja destacar com o blockquote.
Faça assim: com seu post pronto selecione o trecho onde deseja aplicar a citação e clique no 3º ícone no alto do editor de texto, aí onde você escreve seus posts.
É o ícone das aspas.
Ao fazer isso todo o trecho que você selecionou ganha o recurso Citação.

Como personalizar o blockquote do Blogger

Antes de começarmos você precisa definir se quer aplicar o blockquote personalizado a todos os posts onde for adicionar a citação ou se deseja inserir a personalização manualmente apenas nos posts que desejar.

Aplicar a personalização automaticamente em todos os posts que tiverem o recurso Citação ativado: 
Caso você queira adicionar o mesmo modelo de personalização do blockquote a todos os posts aos quais for adicionar a citação (inclusive posts já publicados que tenham a citação adicionada) vamos adicionar o código ao seu template, dentro do seu código-fonte.
Essa personalização tem a vantagem de ser aplicada automaticamente a todos os posts já publicados ou que ainda serão feitos, desde que, claro, o recurso Citação seja aplicado.
Outra vantagem é que a personalização inserida desse jeito, via código-fonte, é fácil de ser tirada ou trocada. Basta apagar o código e trocar a personalização e ela é aplicada a todos os posts.
A desvantagem é que será sempre o mesmo modelo, mas nem chega a ser desvantagem de fato caso você prefira ter a mesma identidade visual em todas as citações.

Para usar esse tipo de personalização do blockquote faça assim:
Vá até o painel administrativo de seu blog e clique na aba Modelo ou Tema.
A seguir clique em Editar HTML.
Dentro da caixa do código-fonte tecle Ctrl+F e na barra de busca que expandir digite </head> e tecle Enter para localizar.
Acima de </head> cole o código de personalização do modelo escolhido, edite cores e fontes como desejar e salve.
A personalização escolhida será aplicada a todos os blockquotes que existirem em seu blog, inclusive nos posts já publicados.
Se tem o recurso Citação adicionado a personalização será aplicada automaticamente.

Personalizar manualmente o blockquote, com modelo diferente em cada post que o recurso Citação for ativado:
Caso você prefira personalizar manualmente cada vez que adicionar o recurso Citação aos seus posts aí o método é diferente.
Faça assim:

Com seu post pronto, já com o trecho que receberá o recurso Citação definido, clique em HTML, aí no alto do editor de postagens.
Essa ação vai reverter seu post para o modo HTML.
Ao final de seu post cole o código do modelo de blockquote que deseja usar.
Edite cores, tamanho de fonte, etc... caso deseje.
Clique então em Escrever, para voltar o editor de texto ao modo normal e publique seu post normalmente.
A personalização do blockquote terá sido aplicada.
Simples, né?


Dicas extras:

• Cores sempre são trocadas ao trocar o código hexadecimal precedido de #, no código.
• Fontes, quando puderem ser trocadas, estarão nomeadas. Troque o nome da fonte e pronto.
• Caso seu template não tenha a fonte que gera o ícone adicionada precisará colocar. Acima de </head> cole o CÓDIGO DA FONTE ESPECIAL e salve.
• A imagem floral do Modelo 7 pode ser trocada. Localize o endereço dela (https://1.bp.blogspot.com/-efjyOgee7qw/XVxpzQFVFcI/AAAAAAABmsQ/BUx4e0DBz_gthvOrZWnqcqGXALUntGhkwCLcBGAs/s1600/post-divider.png) e troque pela url da imagem que quiser usar.
• Não dá pra usar 2 modelos em um mesmo post.

E terminei!
Acredita que, em quase 11 anos de blog eu nunca tinha falado de blockquote personalizado?
Tenho dezenas de outros códigos, assim que der eu publico mais alguns.
Opção sempre é bom, né?
Enjoy!