Browse By

Modificando Citações do Blogger

Anúncios

Dicas 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”.

Blogger

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:

Uma borda sólida preta ao redor de todo o bloco de citação que tem um
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:

Uma borda tracejada vermelha que tem 3 pixels de largura, com 10 pixels de espaço entre a borda e o texto que ele contém.

Usando fundos e imagens

blockquote {
margin:1em 20px; background: #cccccc;
}

Este código acima produzirá os seguintes efeitos:

Aqui está um exemplo de fundo para o bloco de citações, somente para definir a cor de fundo.

Você poderia naturalmente mudar o valor hexadecimal da cor para melhor se adequar ao tema do seu blog.

Vamos supor que você queira adicionar uma imagem de fundo, como neste exemplo…

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