Modificando Citações do Blogger

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
Modificando Citações do Blogger Modificando Citações do Blogger Reviewed by Fabricio Araujo on 14:30:00 Rating: 5

Um comentário:

  1. Olá, Fabrício!

    Vim retribuir sua visita ao Gerenciando Blog.

    Seu trabalho é ótimo! Muito bem organizado e cheio de dicas interessantes. Parabéns por ele!

    Gostei desta dica. Depois, vou testar em meu blog.

    Um abraço!

    ResponderExcluir

Adicione seu comentário nesse post.
- Receba a resposta por e-mail, clique em inscrever-se por e-mail.
- Não use palavras de baixo escalão.
- Quer mostrar seu blog? Use a opção Open ID.
- Se selecionar a opção Nome/URL na URL digite http:// na frente do endereço do seu blog.
- Quer falar somente com o Autor? Então clique Aqui.

Muito obrigado por sua visita e volte sempre!

Tecnologia do Blogger.