💬 HTML | Faça citações usando q e blockquote

Atualizado dia 24 de maio de 2018.

Bonito isso, né? Li num livro!

💬 Citação inline: q

O elemento <q> insere uma citação inline (na mesma linha) dentro do parágrafo. Exemplo:

Ele demorou a responder, mas no fim assumiu: eu ganhei na Mega-Sena da Virada.

Essas aspas não foram inseridas manualmente, mas sim com a tag <q>:

Ele demorou a responder, mas no fim assumiu: <q cite="http://www.meutedio.com.br">eu ganhei na Mega-Sena da Virada</q>.

Observe que, dentro do elemento, você também pode adicionar cite=URL, dando crédito para a fonte da citação.

💬 Citação em bloco: blockquote

O elemento <blockquote> é figura fácil nos meus blogs. Como o próprio nome já diz, é uma "citação em bloco". Foi criada principalmente para identificar algo que não é de sua autoria, uma frase famosa, uma entrevista, trecho de outro blog/site… Aqui vai um exemplo bacana de <blockquote>:

Coisa boa ou má não existe: o pensamento humano é o que faz as coisas terem tal ou qual aparência. Shakespeare

Você deve inserir <blockquote> antes e </blockquote> depois do texto que deseja ver destacado em forma de citação. Muito simples. Veja o código do trecho supracitado:

<blockquote><q>Coisa boa ou má não existe: o pensamento humano é o que faz as coisas terem tal ou qual aparência.</q> Shakespeare</blockquote>

💬 Blockquote com CSS

Para deixar suas citações ainda mais destacadas, com cores, bordas e background, basta utilizar CSS.

No Blogger, vá até Layout >> Editar HTML e procure, entre as tags <b:skin> e </b:skin>, o elemento blockquote. Em outro site o elemento tem que estar entre as tags <style> e </style>. Se não encontrar esse elemento no seu código Blogger, acrescente o seguinte código logo acima do trecho do seu código onde está ]]></b:skin>:

blockquote {border-left:#009900 5px double;
background:#f0fff0;
color:#006600;
padding-left:15px;
padding-top:10px;
padding-bottom:10px;}

O código vai ficar assim:

blockquote {border-left:#009900 5px double;
background:#f0fff0;
color:#006600;
padding-left:15px;
padding-top:10px;
padding-bottom:10px;}
]]></b:skin>

Seu elemento <blockquote> fica assim:

Exemplo de como fica a bagaça. Utilize sua criatividade para personalizar de acordo com o template do seu blog.

Uma opção muito interessante é já adicionar as aspas na folha de estilos, assim você não precisa colocar manualmente, nem usar a tag <q>:

<style> blockquote:before {content: open-quote;} blockquote:after {content: close-quote;} </style>

Exemplo:

<blockquote>Isso não significa nada, a menos que você queira fazer isso significar alguma coisa.</blockquote>— Charles Bukowski

Resultado:

Isso não significa nada, a menos que você queira fazer isso significar alguma coisa.

— Charles Bukowski

Para escolher cores que combinem com o seu blog, visite o cubo ou a tabela de cores.

Se o seu código já tiver o elemento blockquote entre as tags <b:skin> e </b:skin>, verifique quais propriedades quer acrescentar ou retirar para que ela fique como deseja. Propriedade é tudo que fica entre as chaves {} que aparecem logo após o elemento.

💬 Blockquote com imagem no background

No exemplo abaixo, além da imagem de fundo, também coloquei o texto em itálico acrescentando font-style:italic. Se preferir o texto sem esse efeito, retire essa parte do código.

blockquote {border:silver solid;
border-width: 0px 2px 2px 0px;
background: transparent url(//www.blogblog.com/tictac/quotes.gif) no-repeat scroll left top;
padding-left: 33px;
padding-top: 17px;
padding-bottom:10px;
font-style:italic;}

Exemplo de blockquote:

Exemplo de como fica a bagaça. Utilize sua criatividade para personalizar de acordo com o template do seu blog.

A parte em destaque no código você troca pela imagem que você deseja.

Agora não tem desculpa… É citação? Blockquote e q nela!

• Tabela Candy Colors em RGB
• CSS: aprendendo a usar bordas
• Bordas arredondadas com CSS 3
• CSS: cor de fundo em degradê
• CSS: sombras em caixas e imagens

Até mais!