Modelos de Blockquotes (citação em bloco)

Modelos de Blockquotes (citação em bloco)

6 10 99
Modelos de Blockquotes (citação em bloco) 10 6 99

Em linguagem web, blockquote ( ou simplesmente quote) é um recurso em HTML, utilizado para destacar parte de um texto ou para citar, dar referência a algo ou alguém. Em português, usa-se a denominação citação ou bloco de texto.

O blockquote não é usado somente em páginas da internet, sendo muito comum em livros, revistas, jornais e em toda forma de tipografia.

Segundo definição da Wikipedia:

Um bloco de citação (também conhecido como uma citação longa ou extrato) é uma citação de um documento escrito, que é definido fora do texto principal como um ponto distinto (ou bloco) (…) Bloco de citações são geralmente distinguidos visualmente utilizando o recuo , um diferente tipo de letra ou tamanho menor.

Como vocês podem notar, eu acabei de usar o blockquote para citar o texto acima.

Para usar blockquote no editor de textos do Blogger, passe o mouse sobre a área que será destacada e clique no ícone Citação (figura 1). Para usar no Windows Live Writer, procure por citação em bloco (figura 2)

Para mudar o modelo de blockquote dos templates do Blogger ( e eu acho que isso serve também para Wordpress), precisamos usar alguns códigos em CSS.

Antes de mais nada, entre no editar HTML do Blogger e procure por algo assim:

blockquote {
width:90%;
font:$quoteFont;
line-height:1.6em;
color:#333;

}

Todo o trecho deverá ser substituído por outro modelo de sua preferência.

Modelos de blockquote

Fonte: Css Tricks - Better Blockquotes

blockquote

blockquote {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}

blockquote

blockquote {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(URL DA IMAGEM);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote {
display: block;
background-image: url(URL DA IMAGEM);
background-repeat: no-repeat;
background-position: bottom right;
}

blockquote

blockquote {
font: 14px/20px italic Times, serif;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(URL DA IMAGEM);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}

Aqui estão as duas imagens utilizadas nos modelos acima. Salve-as em seu computador e faça o upload no Picasa Web ou no serviço de hospedagem que preferir. Depois é só copiar a url e colocar nos locais indicados (em vermelho)

openquote4 closequote1

Fonte: Css NewBie- Six Ways to Style Blockquotes

blockquote

blockquote {
background: #f5f5f5;
border-left: 0.8em solid #ccc;
border-right: 0.8em solid #ccc;
font: italic 120% Georgia, "Times New Roman", Times, serif;
padding: 0.75em;
}

blockquote

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }

blockquote

blockquote {
margin: 1em 2em;
border-left: 1px dashed #999;
padding-left: 1em; }
blockquote p:first-letter {
float: left;
margin: .2em .3em .1em 0;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
font-size: 220%;
font-weight: bold; }
blockquote p:first-line {
font-variant: small-caps; }

Fonte: Usuário Compulsivo

.post blockquote {
margin: 1em 20px;
border: 1px solid #c0c0c0;
background: #f5f5f5;
padding: 7px;
}

E este é o atual modelo usado aqui no Dicas Blogger:

blockquote {
width:90%;
font:arial;
line-height:1.4em;
color:#333;
border-left:2px solid silver;
border-right:2px solid silver;
background:#EEE;
margin:10px;
padding:0 10px;
}

Fazendo uma busca no Google, vocês vão encontrar ainda mais modelos.

16 Comments
Comments
  1. Gostei de um em particular e já coloquei em meu blog,mais nos templates padrão do blogger incusive no meu é .post blockquote{

    Abraços!

    ResponderExcluir
  2. São muito legais os medelos, parabéns e obrigado! Gostei de todos, são legais. Já coloquei em meu blog.
    Abraços! :)

    ResponderExcluir
  3. Boa idéia, outra coisa que você poderia falar é como fazer uma Footer Bar (Barra de Créditos) que você usa nos seus temas.
    #partiu

    ResponderExcluir
  4. Amei essas citações, mas eu prefiro a do DB 3.0
    Valeu :)

    Abraço!

    ResponderExcluir
  5. Ia comentar tanta coisa aqui que acabei fazendo um post:
    Citação no blog: Como mudar o modelo de blockquote no Blogger?
    [...]As citações, de uma maneira geral, não podem corresponder a mais da metade do conteúdo de um post.[...] Juliana e Nospheratt juntinhas? Claro que temos, afinal, isso aqui é a internet:[...]
    E pela milésima vez: VLW o/

    ResponderExcluir
  6. Nossa, você leu meu pensamento.. =D

    Eu eu ia justamente procurar isso quando vi o feed do dicas blogger...

    Muito Obrigado!

    ResponderExcluir
  7. O que eu uso no meu blog é bem diferente desses, mas é bem bonitinho. O código é esse:

    .post blockquote {
    margin:20px 0 0 20px;
    background:url(http://lh4.ggpht.com/_Kwwy9VyLMKw/S0oadU3AuZI/AAAAAAAAClM/dKrfBZiFtq4/open-quote.gif) no-repeat;
    padding-left:18px;
    font:italic 1em Georgia, "Times New Roman", Times, serif;
    word-spacing:4px;
    }

    Até mais :)

    by Gui > blog EJM | @gjEJM

    ResponderExcluir
  8. Não deu certo no meu blog... Me deu uma raiva que quando coloquei no meu blog de testes funcionou ¬¬

    ResponderExcluir
  9. Sim, obrigado muito pela informação a tempos queria um blockquote descente pro meu blog,
    mas logo vi que não tinha dado certo por que não havia aquele trecho que se tem que procurar,então pensei na possibilidade de entrar no design do modelo e adicionar com um simples css e deu certo!
    pra vocês que não conseguiram tambem é só pegar um desses modelos acima e colocalos como css no design do modelo e quando quiserem faser uma citação poderam notar que deu certo!
    obrigada juliana!

    ResponderExcluir
  10. Tiago.

    Eu fiz isso, coloquei o código através do Designer do Modelo. Mas eu não sei o que aconteceu que ele não está funcionando, fica o blockquote original do Blogger...

    ResponderExcluir
  11. Boa tarde, Ju. Eu tentei instalar o código no meu blog, mas não consegui, pois não achei o trecho no html. Fiz uma pesquisa rápida, aqui mesmo no Dicas, e encontrei um outro artigo semelhante a este, em que você fazia a seguinte observação: "Caso não exista este trecho no seu template, basta criá-lo antes da tag ]]> "

    Beijos e boa quinta!

    ResponderExcluir
  12. Quando troquei meu template tive tanto trabalho que jurei que nunca mais o faria.
    Mas toda vez que você lança um novo, fico bem balançada.
    Eu acho que já disse isso. Mas acontece sempre.

    ResponderExcluir
  13. Juliana não estou achando a citação bloco 2

    ResponderExcluir
  14. juliana como faço pra coloca um blockquote no meu template , ele nao veio com blockcote no html. obgrigado

    ResponderExcluir
  15. não conseguir colocar no meu ¬¬'
    isso sempre acontece comigo.
    aushushusha
    não achei o código blockquote ¬¬'
    uso o modelo simple do novo blogger

    ResponderExcluir
  16. Julian estou tentando mudar o Blockquotes do meu blog, mas não estou conseguindo.. Acho que é porque uso um dos novos modelos da blogger!
    Não consigo encontrar o locara na HTML para editar!

    Se não for pedir demais gostaria que você me ajudasse???

    Meu link (blog): www.OjuaraxD.com
    E-mail: ojuaraxd@hotmail.com

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top