Em linguagem web, blockquote ( ou simplesmente quote) é um recurso em HTML, utilizado para destacar parte de um texto ou para citar, dar referência a algo ou alguém. Em português, usa-se a denominação citação ou bloco de texto.
O blockquote não é usado somente em páginas da internet, sendo muito comum em livros, revistas, jornais e em toda forma de tipografia.
Segundo definição da Wikipedia:
Um bloco de citação (também conhecido como uma citação longa ou extrato) é uma citação de um documento escrito, que é definido fora do texto principal como um ponto distinto (ou bloco) (…) Bloco de citações são geralmente distinguidos visualmente utilizando o recuo , um diferente tipo de letra ou tamanho menor.
Como vocês podem notar, eu acabei de usar o blockquote para citar o texto acima.
Para usar blockquote no editor de textos do Blogger, passe o mouse sobre a área que será destacada e clique no ícone Citação (figura 1). Para usar no Windows Live Writer, procure por citação em bloco (figura 2)
Para mudar o modelo de blockquote dos templates do Blogger ( e eu acho que isso serve também para Wordpress), precisamos usar alguns códigos em CSS.
Antes de mais nada, entre no editar HTML do Blogger e procure por algo assim:
blockquote {
width:90%;
font:$quoteFont;
line-height:1.6em;
color:#333;
}
Todo o trecho deverá ser substituído por outro modelo de sua preferência.
Modelos de blockquote
Fonte: Css Tricks - Better Blockquotes
blockquote {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}
blockquote {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(URL DA IMAGEM);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote {
display: block;
background-image: url(URL DA IMAGEM);
background-repeat: no-repeat;
background-position: bottom right;
}
blockquote {
font: 14px/20px italic Times, serif;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(URL DA IMAGEM);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}
Aqui estão as duas imagens utilizadas nos modelos acima. Salve-as em seu computador e faça o upload no Picasa Web ou no serviço de hospedagem que preferir. Depois é só copiar a url e colocar nos locais indicados (em vermelho)
