Quando e como usar blockquote

Bonito isso, né? Li num livro!

Nível: iniciante

A tag <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><i>Coisa boa ou má não existe: o pensamento humano é o que faz as coisas terem tal ou qual aparência.</i> Shakespeare</blockquote>

Blockquote com CSS

Nível: intermediário

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> vai ficar assim:

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

Para escolher cores que combinem com o seu blog, visite nosso cubo ou nossa 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(http://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 nele!