Citações com destaque no Blogger

Via Wikipedia:
Segundo a norma NBR 10520:2002, elaborada pelo Comitê Técnico 014 (Informação e Documentação) da Associação Brasileira de Normas Técnicas, citação numa produção textual é a "Menção de uma informação extraída de outra fonte", tais como (livros, periódicos, vídeos, sites e etc).
No exemplo acima mostrei a citação de um texto da Wikipédia que fala justamente a respeito de citações.

Nos templates padrões do Blogger, as citações são apenas tabuladas um pouco mais a direita do corpo do texto, sem destaque algum. Você deve ter percebido que a citação usada no exemplo acima, além de tabulada à direita recebeu um destaque com uma cor de fundo diferenciada.

Para usar citações num artigo, você deve selecionar o texto a ser citado e depois clicar no ícone destacado na imagem abaixo:


Mas para que suas citações apareçam com maior destaque, como no exemplo acima, é só usar essa dica do Blogger Buster (em inglês) que o Compulsivo traduziu pra vocês:

Entre na edição HTML do seu template*, procure pelo trecho de código abaixo e inclua as linhas destacadas em negrito:
.post blockquote {
margin: 1em 20px;
border: 1px solid #c0c0c0;
background: #f5f5f5;
padding: 7px;
}
Nos valores em vermelho definem-se as cores da borda e do fundo do destaque respectivamente, adapte conforme o caso.

Update: Conforme bem observado pelo Lenon nos comentários, caso não exista o trecho de código acima no seu template, é só inseri-lo antes da tag: ]]></b:skin>.

*P.S.: Cultive o hábito de Baixar o modelo completo (também conhecido como becape) do seu template sempre que entrar no modo de edição HTML. Cautela e canja de galinha não faz mal a ninguém.

Comentários

  1. Olá, Compulsivo.

    Tal modificação me será util futuramente. :) uma coisa que percebi em seu blog, é que suas postagens em comentários são tidas em detalhes, você já explicou por aqui como fazer? Se não explicou, fica aqui a dica, e o apelo.

    Abraço.

    ResponderExcluir
  2. Isso é algo que me encomoda bastante nos templates quando não tem uma boa diferença do texto normal para a citação.

    Nem que seja uma imagem de abrindo aspas (") como background do blockquote.
    Nesse caso acrescentaria ao seu código a linha:
    background-image: url(endereço_da_img.jpg);

    Me corrige se eu estiver errada. ^^
    Abração. ^^

    ResponderExcluir
  3. Ah! esqueci que o fundo não pode repetir, então seria:

    background-image: url(endereço_da_img.jpg);
    background-repeat: no-repeat;

    ResponderExcluir
  4. AudioDeath,

    Ainda não publiquei como destacar os comentários do autor do blogue no Blogger, mas o artigo já está escrito, pronto pra publicação. Em breve estará no ar.

    Kika,
    É isso mesmo, no artigo tem a referência (em inglês) de onde adaptei a dica. Lá inclusive mostra como incluir uma imagem nas citações.

    Valeu pelo toque!

    []'s
    Compulsivo

    ResponderExcluir
  5. No meu template não tem esta linha...:-(

    ResponderExcluir
  6. Oi Juliana, tem certeza que não tem? Nem usando a busca do Firefox pela expressão "blockquote"? Antes de publicar testei em dois templates diferentes (Washed Denim e Minima) e ela estava lá.

    Chegasse a testar num template padrão do Blogger?

    Acho estranho, pois se na área de edição dos artigos existe a opção de citação (conforme a imagem no artigo), também deve ter alguma coisa a respeito no código fonte do template...

    Qualquer novidade me avisa...

    []'s
    Compulsivo

    ResponderExcluir
  7. No meu também não tinha, mas é só incluir todo o trecho do CSS antes da tag "] ] > < / b:skin >" (sem espaços) que funciona direitinho.

    Valeu!

    .:: by Lenon ::.

    ResponderExcluir
  8. Alias Compulsivo, sabe os novos termos e condições do AdSense agora dizem que temos que incluir uma Política de privacidade. Será que é necessário incluir em blogs também?
    Se souber de alguma coisa, me avise por favor. Na dúvida, já inclui lá no blog.

    Até mais!

    .:: by Lenon ::.

    ResponderExcluir
  9. Legal Lenon,

    Grato pelo complemento da dica, espero que a Juliana esteja lendo isso...

    Quanto ao AdSense, é verdade. Qualquer editor que veicule publicidade do programa precisará disponibilizar uma política de privacidade, mas ainda tem mais de um mês de prazo, que eu saiba (Corrija-me se eu estiver errado).

    Ainda estou bolando a minha, estou olhando alguns portais e blogues, pra ver como o pessoal está fazendo.

    Também entrei em contato com o HotWords pra saber como funcionam os cookies do programa deles e me informaram que não utilizam qualquer tipo de cookie.

    Além disso quero incluir informações sobre como navegar "anônimo" no UsuárioCompulsivo, desabilitando os cookies...

    []'s
    Compulsivo

    ResponderExcluir
  10. É, eu também estou dando uma pesquisada para ver como os editores estão fazendo, mas por enquanto deixei um texto provisório, que encontrei no Fórum do AdSense no Google Groups.

    .:: by Lenon ::.

    ResponderExcluir
  11. Ótimo, estava mesmo procurando por alguma dica que melhorasse as citações no Post.

    Já havia visto indicações para seu Blog, e devo confirma-las... Conteudo excelente! Parabéns!!

    ResponderExcluir
  12. Bem vindo Drake, grato pelo comentário e volte sempre...

    []'s
    Compulsivo

    ResponderExcluir
  13. Valeu meu guru! Vai lá conferir como ficou bonitinho! Bjsss

    ResponderExcluir
  14. Compulsivo, só lembrando que para se usa "blockquote" para um bloco de citação (mais de umra grase) "quote" para uma frase e para código se deve usar a tag "code". Então, seguinte a semântica do html, você pode utilizar uma formatação se for citar uma frase, por exemplo usar textos maiores, letra em negrito, uma formatação para citar um bloco de citação, exemplo, uma caixinha com letras pequenas com uma imagem de background com símbolo do tipo (") aspas, e ainda uma outra formatação para citação de códigos, como quando você coloca o que a pessoa deve colar no seu blog, como exemplo, poderia colocar um fundo preto e letra verde simulando um "DOS". É claro que isso visualmente tem pouco impacto para o usuário final, mas com certeza quanto mais bem utilizadas as tags html, melhor o posicionamento nos motores de busca, é a chamada web semântica, onde cada item tem o seu lugar.
    []'s

    ResponderExcluir
  15. @Juliano, legal essas opções, mas tem um problema. O Editor WYSIWYG do Blogger não terá botões para as TAGS "quote" e "code", teria que inseri-las manualmente no HTML, já com o blockquote é só usar o botão de citação do editor...

    []'s
    Compuslivo

    ResponderExcluir
  16. É meu amigo compulsivo, quanto a essa parte realmente o blogger dificulta, mas vou pedir para eles inserirem novos botões no WYSIWYG (não custa sonhar). Eu sou acostumado a editar os posts com o Scribfire, mas quando quero ilustrar algum código html, aí vou no editor html do blogger e altero. O editor do blogger novo ficou um pouco melhor para as imagens, mas ainda está colocando o link para a origem da imagem, coisa horrível, ainda mais por que o código de espaçamento é colocado encima do elemento html "a". Ou seja, se você tirar o link da imagem, perde a formatação. Ainda tem muito o que melhorar, mas até lá temos as dicas do compulsivo pra ajudar hehehe.
    []'s

    ResponderExcluir
  17. Realmente já andava a algum tempo a procura disto e finalmente encontrei! ;)

    Extremamente útil e dá um grande destaque que fica muito bom, principalmente quando se quer destacar codigo html no post.

    Cumps

    ResponderExcluir
  18. Obrigado, compulsivo. Esta dica funcionou perfeitamente e será muito útil. Um abraço "catarina" para você.

    ResponderExcluir
  19. Compulsivo, simplismente show essa dica..assim como todas as outras.

    Obrigado pela ENORME ajuda!!

    Abraços!

    ResponderExcluir
  20. No meu blog não existia esta parte então fui adicionar em cima do ]] ...

    e deu erro no meu blog inteiro!!

    boaaa!

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Nomes de todas as igrejas do Brasil

O que significa DVDRip, DVDScr, R5, etc?

Remover idiomas em arquivos Dual Audio