Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Postagens Vanessa S.

Como Personalizar a função Blockquote no Blogger

Blockquote é o elemento que usamos para indicar uma citação de parte de um texto de outra fonte ou para dar destaque em alguma parte do texto dentro do post.
Ele é muito útil, pois serve para diferenciar as citações que você queira fazer em seu post.

Veja um Exemplo abaixo:

Este texto está destacado pelo função Blockquote.

Se você quiser ativar a função Blockquote para diferenciar partes de textos em suas postagens, deverá aplicar os estilos dentro do CSS do seu template.
Os templates padrões do Blooger já vem com esta função ativada, porém não possuem estilos configurados, isso você terá que fazer manualmente.

Clique no menu “modelo” e entre na edição HTML do seu template, não precisa clicar em “Expandir modelos de widgets” e procure por: (Você pode ultilizar CTRL+F para facilitar sua busca)


.post blockquote {

e acrescente as linhas de estilo logo abaixo desta linha:


background:#a5a3fd ;  /*Altere a cor do fundo como preferir*/
border:2px dashed #2b2a59; /*Altere a cor da borda como preferir*/
padding: 5px;
margin:10px 20px 10px 20px;

Deverá ficar assim:


.post blockquote {
background:#a5a3fd ;  /*Altere a cor do fundo como preferir*/
border:2px dashed #2b2a59; /*Altere a cor da borda como preferir*/
padding: 5px;
margin:10px 20px 10px 20px;
}

Se no seu Template não possuir a linha .post blockquote
Copie todo o código postado acima e cole-o logo ACIMA de ]]></b:skin>
ou cole-o na àrea de estilos para Postagem que geralmente está em /* Posts

Lembrem-se:
Em “Background” e em “border” você deve colocar as cores correspondentes de acordo com as cores do seu template para que combinem.
No código acima utilizei cores apenas como exemplo para que você visualize o local que deverá incluir as cores.

Depois de aplicados os estilos, toda vez que você quiser destacar parte do texto em sua postagem , você deve selecionar com o mouse, todo o texto que você quer que apareça dentro do blockquote e depois basta clicar no desenho de “aspas” no modo de edição de sua postagem.

Em “Editar Html” a função Blockquote é representada pelas tags:
<blockquote></blockquote>

Se você preferir utilizar o modo HTMl para colocar em destaque alguma parte do texto, basta usar as tags dessa maneira:
<blockquote> Seu texto em destaque aqui </blockquote>

Já publiquei alguns artigos que tratam sobre alguns efeitos que você pode aplicar ao Blockquote, talvez você se interesse em conheceê-los e ver quais efeitos poderá utilizar para personalizar o Blockquote de suas postagens:
Bordas arredondadas
Efeito sombreado

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

20 Comentários

  1. Grazi disse:

    Oi! Acontecia o mesmo comigo, e como o Dreamloader disse, em vez de colocar em cima do "]]>/* Posts, como ela disse no post.
    Comigo funcionou! XD

    vai ficar assim:

    /* Posts
    ———————————————– */
    .post blockquote {
    background:#a5a3fd ; /*Altere a cor do fundo como preferir*/
    border:2px dashed #2b2a59; /*Altere a cor da borda como preferir*/
    padding: 5px;
    margin:10px 20px 10px 20px;
    }

    Flw!?

  2. Isa Moraes disse:

    Oi, eu tentei fazer isso no TV (Tentativa Vã), usando o mesmo código que eu vi em outro blog, e não funcionou. Entrei aqui, o código era o mesmo, tentei de novo e não deu, fica sem blockquote nenhum, assim como foi o caso do Dreamloader. Eu seleciono o que eu quero que apareça no blockquote e clico nas aspas, mas só "pula" um espacinho pra frente, não tem caixinha nenhuma. Tem que ter um template específico? Beijos.

  3. Beatriz disse:

    Não deu certo,ahhh,vou chorar.

  4. Beatriz disse:

    Aii,to adorando o blog,mas essa caixa de codigo q vcs usam,é muito dificil pra cnseguir copiar.Passo um tempão s´tentando selecionar o texto:(

    Mas mesmo assim é muito bom o site:)

  5. ?u? disse:

    Clau, eu de novo. rs. Tenho uma dúvida: Eu queria saber se é possível usar uma cor específica no link da postagem e uma outra na função blockquote? Obrigada.

  6. Lukas disse:

    Clau,notei que você usa mais de 1 modelo blockquote,um com o fundo mais escuro,outro mais claro,è possível ter mais de 2 estilos?..

  7. .:: Clau ::. disse:

    Dreamloader
    Q bom q conseguiu.

    Comandoblogger
    Obrigada pelo comentario *_*

    Lucas
    Não sei, eu nunca tentei fazer isso..tenta pra ver se funciona.

  8. Lucas disse:

    È possìvel usar o blockquote no formulàrio de comentários?

  9. comandoblogger disse:

    Excelente artigo Clau, ira ajudar realmente muitos iniciantes.

  10. Dreamloader disse:

    Sim eu sabia disso mas naod ava na mesma.
    Troquei o sisito onde colei o que voçe pediu. Troquei de ]]bskin .. por o post .
    Funcionou ;).

    Beijo

  11. .:: Clau ::. disse:

    Dreamloader
    Toda vez que você quiser destacar parte do texto em sua postagem, você deve selecionar com o mouse, todo o texto que você quer que apareça dentro do blockquote e depois clicar no desenho de "aspas" no modo de edição de sua postagem.

  12. Dreamloader disse:

    Olá, sou novo por cá. Tudo bom ?
    Desculpe minha burrice mas fiz tudo o que voçe disse para fazer e nao consigo usar o "Blockquote".

    Eu tento "citar" algo e nao dá.
    Fica apenas centrado sem qualquer cor.

    Poderia me dar uma ajuda?

    Beijinho

  13. Lucas Hb disse:

    Gostei!

  14. ::Clau:: disse:

    @Taillard:
    Que bom que gostou..quando precisar de mais…é só avisar…=)
    Beijão.

  15. Taillard disse:

    Eu não te disse que seu blog era lindo e que dava agua na boca de pedir um template?
    Acertei!
    O template que encomendei contigo é um verdadeiro mamão com açucar.
    MARAVILHOSOOOOOO!!!
    Beijão querida!

  16. Corpo e Mente disse:

    Amiga linda!
    Obrigada!
    Arrumei o problema querida !
    Beijos!

  17. Corpo e Mente disse:

    Amiga Oi!
    Eu montei um blog de estetica e coloquei sua dica,e sinceramente pensando em encomendar um blog contigo!
    Ai eu muito lé,lé da cuca fui e coloquei um codigo para opacidade do blockquote e …
    Simplesmente sumiu mesmo eu retirando o codigo opacity o não tenho mais como postar em detalhes!
    Bem se eu tive sorte ainda hoje,virei aqui varias vezes para ver a resposta.
    Muito grata!
    (SEU blog é lindo,diferente e da vontade realmente de pedir um template)
    Beijos!

  18. Mary Diniz disse:

    Por isso que eu amo seu blog 🙂 fiz no meu e ficou lindo hauhauaha.. bjinhos flor

  19. ?Carla_Witch Princess? disse:

    Vc viu que fofo que ficou esse
    efeito nas minhas postagens?
    Nossa, eu aaameeeiiii!!!!
    kkkkk… Só vc mesmo, Clau!
    Te adoro!!!
    Bjinhossssss

  20. ?Carla_Witch Princess? disse:

    Uau!
    Amei isso, Clau!
    Já estou usando no meu Mundo
    de Magia… kkkkkk…
    Vlw, minha flor!
    Espero que esteja tudo bem com vc…
    Saudades!
    Bjinhossssssssss

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.