Modificando Citações do Blogger
As BlockQuotes ou citações são pontos do texto que são geralmente utilizados para destacar citações de outras fontes, que são geralmente adicionados a partir do corpo principal de um blog e também pode ter uma cor ligeiramente diferente.
Como usar as BlockQuotes?
Se você não estiver familiarizado com o bloco de aspas, você pode estar se perguntando como usá-los em suas postagens. Mas não se preocupe, eles são muito fáceis de usar!
Se você escrever seus posts com o “rich text editor”, você simplesmente precisa destacar a seção de texto que você gostaria de citar, e clique no botão “Citação”.
Alternativamente, você pode usar estas tags para destacar seu texto:
<blockquote>Texto para ser citado</blockquote>
Como alterar o estilo das citações?
No modelo do seu template, entre as tags <b:skin> e </b:skin>, é bem provável que você encontre uma tag como esta:
blockquote {
margin:1em 20px;}
Estas poucaslinhas definem como o bloco de citações aparecerá quando publicado em suas postagens. Por padrão, qualquer texto dentro de tags <blockquote> rapidamente adicionado do lado esquerdo.
Adicionando estilos ao seu bloco de citações
Bordas
A maneira mais simples de adicionar uma borda é adicionar estas linhas em vermelho para as definições de estilo “blockquote”, em sua seção:
blockquote {
margin:1em 20px;
border: 1px solid #000000;
padding: 5px;
}
Que irá produzir o seguinte efeito:
pixel de espessura. O “padding”, neste exemplo, garante que há cinco pixels de espaço em branco entre a borda e o texto que contém, o que ajuda a torná-la mais fácil de
ler.
Aqui está um exemplo de um estilo diferente de borda:
blockquote {
margin:1em 20px;
border: 3px dotted #ff0000;
padding: 10px;
}
E este será o efeito dela:
Usando fundos e imagens
blockquote {
margin:1em 20px; background: #cccccc;
}
Este código acima produzirá os seguintes efeitos:
Você poderia naturalmente mudar o valor hexadecimal da cor para melhor se adequar ao tema do seu blog.
Este usa uma imagem de fundo que está alinhado ao topo do bloco de citação, e também usa uma cor que combina com a imagem para que ela parece ser uma imagem completa.
blockquote {
margin:1em 20px;
background: #dfdfdf url(http://bloggerbuster.com/images/blockquote-top.gif) top left no-repeat;
padding: 30px 10px 10px 10px;
}
Alternativamente, se você gostaria de usar as “aspas” e misturar o fundo que eu uso aqui, você pode utilizar esta definição:
blockquote {
margin:1em 20px;
background: #e0e0e0 url(http://bloggerbuster.com/images/bg_blockquote.gif) top left no-repeat;
padding: 8px 8px 8px 65px;
}
Fonte: Blogger Buster – How to customize “block quotes” in your posts