sábado, 15 de novembro de 2008

💬 HTML | Faça citações usando q e blockquote

Atualizado dia 24 de maio de 2018.
Estante de Livros
Bonito isso, né? Li num livro!

💬 Citação inline: q

O elemento <q> insere uma citação inline (na mesma linha) dentro do parágrafo. Exemplo:

Ele demorou a responder, mas no fim assumiu: eu ganhei na Mega-Sena da Virada.

Essas aspas não foram inseridas manualmente, mas sim com a tag <q>:

Ele demorou a responder, mas no fim assumiu: <q cite="http://www.meutedio.com.br">eu ganhei na Mega-Sena da Virada</q>.

Observe que, dentro do elemento, você também pode adicionar cite=URL, dando crédito para a fonte da citação.

💬 Citação em bloco: blockquote

O elemento <blockquote> é figura fácil nos meus blogs. Como o próprio nome já diz, é uma "citação em bloco". Foi criada principalmente para identificar algo que não é de sua autoria, uma frase famosa, uma entrevista, trecho de outro blog/site… Aqui vai um exemplo bacana de <blockquote>:

Coisa boa ou má não existe: o pensamento humano é o que faz as coisas terem tal ou qual aparência. Shakespeare

Você deve inserir <blockquote> antes e </blockquote> depois do texto que deseja ver destacado em forma de citação. Muito simples. Veja o código do trecho supracitado:

<blockquote><q>Coisa boa ou má não existe: o pensamento humano é o que faz as coisas terem tal ou qual aparência.</q> Shakespeare</blockquote>

💬 Blockquote com CSS

Para deixar suas citações ainda mais destacadas, com cores, bordas e background, basta utilizar CSS.

No Blogger, vá até Layout >> Editar HTML e procure, entre as tags <b:skin> e </b:skin>, o elemento blockquote. Em outro site o elemento tem que estar entre as tags <style> e </style>. Se não encontrar esse elemento no seu código Blogger, acrescente o seguinte código logo acima do trecho do seu código onde está ]]></b:skin>:

blockquote {border-left:#009900 5px double;
background:#f0fff0;
color:#006600;
padding-left:15px;
padding-top:10px;
padding-bottom:10px;}

O código vai ficar assim:

blockquote {border-left:#009900 5px double;
background:#f0fff0;
color:#006600;
padding-left:15px;
padding-top:10px;
padding-bottom:10px;}
]]></b:skin>

Seu elemento <blockquote> fica assim:

Exemplo de como fica a bagaça. Utilize sua criatividade para personalizar de acordo com o template do seu blog.

Uma opção muito interessante é já adicionar as aspas na folha de estilos, assim você não precisa colocar manualmente, nem usar a tag <q>:

<style> blockquote:before {content: open-quote;} blockquote:after {content: close-quote;} </style>

Exemplo:

<blockquote>Isso não significa nada, a menos que você queira fazer isso significar alguma coisa.</blockquote>— Charles Bukowski

Resultado:

Isso não significa nada, a menos que você queira fazer isso significar alguma coisa.
— Charles Bukowski

Para escolher cores que combinem com o seu blog, visite o cubo ou a tabela de cores.

Se o seu código já tiver o elemento blockquote entre as tags <b:skin> e </b:skin>, verifique quais propriedades quer acrescentar ou retirar para que ela fique como deseja. Propriedade é tudo que fica entre as chaves {} que aparecem logo após o elemento.

💬 Blockquote com imagem no background

No exemplo abaixo, além da imagem de fundo, também coloquei o texto em itálico acrescentando font-style:italic. Se preferir o texto sem esse efeito, retire essa parte do código.

blockquote {border:silver solid;
border-width: 0px 2px 2px 0px;
background: transparent url(//www.blogblog.com/tictac/quotes.gif) no-repeat scroll left top;
padding-left: 33px;
padding-top: 17px;
padding-bottom:10px;
font-style:italic;}

Exemplo de blockquote:

Exemplo de como fica a bagaça. Utilize sua criatividade para personalizar de acordo com o template do seu blog.

A parte em destaque no código você troca pela imagem que você deseja.

Agora não tem desculpa… É citação? Blockquote e q nela!

Até mais!

Pix meutedio arroba mail ponto com

17 comentários:

  1. Você sabe como fazer pra colocar esse blockquote nos comentarios? Ou pelo menos para que eu responda os comentarios do meu blog nos proprios comentarios só que em outra cor, ou destacado? No blogger?

    ResponderExcluir
  2. Amanda, os comentários do Blogger não aceitam a tag blockquote dentro da mensagem.

    Para destacar os comentários do autor, recomendo o tutorial do Compulsivo: "Destacar comentários do autor no Blogger".

    ResponderExcluir
  3. Gostaria de colocar este post em meu blog, mas não na integra, é claro.
    Qual são os procedimentos para a sua liberação Helen?

    Aguardo contato.
    http://redeseblogger.com.br

    ResponderExcluir
  4. Wilamis Rogério, não autorizo reprodução total ou parcial, apenas citação, como nos exemplos que estão no post Como citar outro texto no seu blog.

    Porém, caso você tenha aprendido a usar blockquote e consiga fazer um tutorial com suas próprias palavras e seus próprios exemplos, é só citar o HTMHelen com link no final do post.

    Obrigada e volte sempre!

    ResponderExcluir
    Respostas
    1. Você devia liberar, tudo que é feito em linguagem interpretada (html, css, python) ,não é obrigatório, mas tem que ser livre. Pois se eu quiser fazer um site igualzinho o seu eu posso, é claro que não vou fazer uma coisa dessa, mas se quisesse faria.
      Meu blog por exemplo, é copyleft, você pode reproduzir, criar obras derivadas, vender os códigos que lá coloco (Sou programador java) sem me dar comissão ou me contactar.
      Boa sorte e a internet é livre! Um exemplo disso é o Wikipedia.

      Excluir
    2. Não precisa aprovar meu comentário, apenas reflita.

      Excluir
    3. Márcio, exatamente: a internet é livre. Alguns são livres para criar sites copyleft outros sites são livres para criar sites copyright. Simples assim.

      Excluir
  5. Ok então!
    Fiz o que você disse.
    Fiz um post sobre Caixa de Texto e Blockquote, com sua fonte citada e nada copiado! :)
    Respeito a licença do seu blog, e parabéns por ele.
    Se quiser conferir o link e comentar :) hihi
    Caixa de Texto e Blockquote

    Grande abraço!

    ResponderExcluir
  6. Helen, fiz tudo que foi dito on seu tutorial, no entanto, o texto fica centralizado, mas não aparece a cor de fundo nem as bordas, e já troquei o código das cores.
    Teria como me ajudar?

    Obrigado.

    ResponderExcluir
  7. Oi, Helen!

    Post super útil, bem explicadinho e super fácil de seguir. Perfeito para quem não conheçe muito de html ou ccs, como eu.

    Obrigada!

    beijoO

    ResponderExcluir
  8. como eu faço para deixar com bordas pontilhadas?

    ResponderExcluir
  9. Ola gostaria de saber como faço para personalizar os títulos das páginas do meu blog porque o meu os títulos estão pequenininhos e feios aguardo resposta e parabéns pelo blog

    ResponderExcluir
    Respostas
    1. Levi, lá no editor de Modelo do Blogger tem opção de aumentar o tamanho das fontes dos títulos dos posts e dos widgets. ;)

      Excluir
  10. Legal ta bem claro as forma de utilizá la

    ResponderExcluir

Todos os comentários são moderados pela autora do blog.