20 agosto 2014

Personalizando a sua blockquote

Foto por Scult
Oi, bonitinhos! Sei que vocês piram em tutoriais para personalizar o blog de vocês e por isso, estou eu aqui, oferecendo uma dica bem útil... A blockquote é muito usada, mas já pensou em personalizar ela? É bem simples e fácil. Mas antes, blockquote é isso aqui:
"Ouça um bom conselho que lhe dou de graça...  Inútil dormir que a dor não passa. (Chico Buarque)"
A maioria dos blogs já tem, só não são personalizados. O que é meio chato já que, às vezes, nós queremos destacar uma frase e não sabemos como... Vamos aprender, então?

Certifique-se de primeiro procurar se no seu blog tem blockquote ou não, por isso, vá no HTML (Blog > Modelo > Editar HTML) e dê Ctrl + F, depois que abrir a busca, digite "blockquote" sem as aspas. Se tiver algum código semelhante ao que eu passei abaixo, apague. 

Agora procure por ]]></b:skin> e cole o seguinte código antes:
blockquote {
background-color: #db95a2;  /* Cor do fundo */
border: 1px solid #d58b98;  /* Borda */
text-shadow: 1px 1px 0px #bc5767;  /* Sombreado do texto */
font: italic 11px Georgia;  /* Fonte */
-webkit-transition-duration: .80s;
color: #fff;  /* Cor da letra */
padding: 5px; }
Agora vamos personalizar para que combine com o seu layout:

•• Os números são códigos de cores, para alterar, vá nesta tabela online: clique aqui, e depois é só achar a cor que você quer e substituir os números. 
•• Eu gostaria que não alterassem o que está em azul, são as medidas que dão margem e tudo mais.
•• O número "1" que está em roxo é o tamanho da borda, pode alterar conforme preferir, lembrando que quanto mais aumentar, mais grossa ficará.
•• Você pode mudar o tamanho da fonte e o nome a vontade, também pode retirar o itálico e substituir por normal.
•• Qualquer coisa que quiser apagar, como por exemplo o sombreado no texto, é só apagar a linha completa. Do início (text-shadow...) até o final (;).

E para colocar uma citação no post, basta selecionar o texto que você quer e depois clicar no botão da imagem:

PS. A citação não aparece na postagem quando você está digitando/montando um post, ela só irá aparecer personalizada no seu blog, por isso, publique/visualize e confira se ficou legal!

Comente com o Facebook:

25 comentários ♥

  1. Olá Carol, tudo bom?
    Nossa, a dica de hoje foi ótima, pena que o meu blog foi feito em uma plataforma diferente e super limitada.. Como entendo muito pouco dessas coisas, optei por fazer em uma plataforma mais básica e agora sofro com as várias limitações dela :S

    Beijo grande.

    Thati;
    http://nemteconto.org

    ResponderExcluir
  2. Logo depois que eu comecei o blog já fui dar um jeito de personalizar o blockquote. Fica beeem melhor com cor de fundo.
    Continue com as dicas!!

    Beijos,
    Thiago - Blog GentleGeek

    ResponderExcluir
  3. Oi Carol, tudo bem?
    Ótima dica a sua, é super legal ter um blockquote personalizado, dá um efeito bem legal nas postagens!
    E o tutorial é super simples de colocar no Layout.

    Beijão ;*
    http://www.livrosesonhos.com/

    ResponderExcluir
  4. eu achei esse blockqoute fofinho . valeu Carol .
    http://atraficantedelivros.blogspot.com.br/

    ResponderExcluir
  5. Deus, lembro quando estava aprendendo noções básicas em HTML na escola de informática e pirava por que achava tudo mega complicado! Mas você explicando me pareceu tão simples =) Quando precisar de algumas aulinhas, posso te chamar? hahaha

    Beijocas!

    ResponderExcluir
  6. Oi Carol, tutorial perfeito para quem quer deixar o blog com uma cara própria.
    Por mais que eu não gosta de usar muito o Quote, já tenho o meu personalizado.
    Acho essencial para ter um layout lindo.

    Abraços
    www.booksever.blogspot.com

    ResponderExcluir
  7. Oi Carol, essa tag está ajudando muito sim, e como eu estou de Layout novo estou fazendo algumas reformas de algumas coisas que não me agradaram nesse novo modelo que coloquei em meu blog, e inclusive o blockquote foi uma das coisas que não me agradou.
    E também gostaria de fazer um pedido a você, se poder fazer uma post de como aumentar a largura das paginas de postagens eu ficaria muito grata, pois eu estou insatisfeita com a largura das paginas de postagem do meu blog.

    http://voceeoquele.blogspot.com.br/2014/08/promocao-o-destruidor-de-coracoes.html

    ResponderExcluir
  8. Olá,
    Adorei a dica, estava mesmo precisando de algo do tipo. Vou tentar instalar no blog.
    Beijos.
    memorias-de-leitura.blogspot.com

    ResponderExcluir
  9. Essas dicas de personalização são muito boas para quem está começando. Muito útil seu post, ajuda bastante... foi com dicas assim que eu montei parte do meu blog hahah

    Tudo Que Motiva

    ResponderExcluir
  10. Oie,
    eu não tinha pensado em mudar o meu, mas depois que vi o seu texto fui lá e ajustei :D

    bjos

    http://blog.vanessasueroz.com.br

    ResponderExcluir
  11. Ai Carol do céu, sempre me ajudando! hahah Eu estava pensando em procurar um tutorial desses, pois acho muito legal ter um espaço só para citações quando a gente cria uma postagem e você aparece com um bem agora <3 Estou gostando muito das dicas, eu não sou muito boa com edições e nem com HTML, então fico contente por você postar tutoriais que eu tenho certeza de que vão me ajudar muito! Beijos e tenha uma ótima quarta! :D
    maluquice de garota
    página no face
    página no Twitter

    ResponderExcluir
  12. Oba! Amei a dica de hoje e utilizei! haha
    Eu colocava cor de fundo manualmente no meus quotes, como se fizesse fundo no texto (não ficava muito bom não haha), mas agora eu tenho o meu personalizado graças a você ^^

    Uso bastante nas resenhas e agora ficou bem melhor.



    ;*



    http://espeloteadaepatricinha.blogspot.com.br/

    ResponderExcluir
  13. Muito útil Carol! Eu tinha te pedido essa ajudinha um dia desses e olha que maravilha amei.

    http://victor-reads.blogspot.com.br/

    ResponderExcluir
  14. Olá Carol, tudo bem? Saudades do seu blog, rsrs.
    Adorei a dica do blockquote, teria sido útil para mim à uns messes atrás antes de ter o meu layout, agora isso não é mais um problema!
    Sem dúvida ótima dica para quem quer fazer o blog ficar mais fofo e diferenciado.
    Adorei!!!

    Abraços
    http://www.estantedasfadas.com.br/

    ResponderExcluir
  15. Achei bem interessante o post. O meu já tinha a tag personalizada e não sabia, mas estava louco atrás de uma para meu blog, mas acabei aceitando a que já tinha no meu blog mesmo. Estou gostando bastante das dicas de HTML e CSS, estou aprendendo várias coisas.
    Sugestão: você poderia fazer um post também sobre o cabeçalho do blog (banner), tive bastante dificuldade no começo do meu blog em relação ao banner e acho que várias pessoas também têm.

    Abraços!
    Teens in Wonderland

    ResponderExcluir
  16. Oi Carolina.
    O meu blockquote já está personalizado, mas esse tutorial com certeza é muito útil e vai ajudar muita gente que tem vontade de dar uma inovada e destaque nas postagens.

    Beijos.
    Leituras da Paty

    ResponderExcluir
  17. Oi, Carol! Muito obrigada por compartilhar os seus conhecimentos!
    Sempre quis personalizar o bloquote do meu blog, mas pensava que isso fosse a coisa mais complicada do universo. Mas, você explicou de um jeito bem fácil.

    http://2surrealistas.blogspot.com.br/

    ResponderExcluir
  18. Oi,
    Adorei a ideia de ajudar os blogs! Concordo que o destaque das citações é essencial para o melhor entendimento da resenha.
    Bjs!
    Viciados Pela Leitura

    ResponderExcluir
  19. Muito bom o tutorial! Blockquotes são indispensáveis, ainda mais em um blog literário :33

    ResponderExcluir
  20. Oi Carol, tudo bem?
    Amei seu tutorial, até porque sempre quis achar um código para personalizar o blockquote, haha! Adorei mesmo, assim que tiver um tempinho vou fazer no meu blog. Muito obrigada pela ajuda!

    Um abraço,
    http://obsessivejerk.blogspot.com.br

    ResponderExcluir
  21. Oie! Adorei a dica! Vou olhar as outras também!
    Bjs, tem promoção no blog http://resenhasteen.blogspot.com.br/2014/08/promocao-de-aniversario-do-amor.html
    se puder comentar nesse post ajudará muito:
    http://resenhasteen.blogspot.com.br/2014/08/semana-eu-amo-nacionais-dia-5-herdeira.html
    Nay =D

    ResponderExcluir
  22. Curti a dica. Nosso blog está precisando de uma personalizada no blockquote, que não está tão legal, então as dicas aqui serão bem úteis.

    Um abraço!
    http://blogvagandoedivagando.blogspot.com

    ResponderExcluir
  23. Passei e encontrei o seu blog, estive a ver e ler algumas coisas, não li muito, porque espero voltar mais algumas vezes,
    mas deu para ver a sua dedicação e sempre a prendemos ao ler blogs como o seu.
    Se me der a honra de visitar e ler algumas coisas no Peregrino e servo ficarei radiante,
    deixe um comentário, e se desejar fazer parte de meus amigos virtuais, esteja à vontade, irei retribuir.
    Mas por favor não se sinta coagida, siga apenas se desejar. Abraço.
    António.

    ResponderExcluir
  24. Oi flor <3
    Estou amando as dicas que você anda colocando no Estante... (Eu sei que é maldade minha assumir, mas eu estou olhando quase todo dia seu blog, só não comento por preguiça mesmo... mas juro que vou mudar essa atitude) . E já anotei várias dicas das que você deu. e que me dá fora daqui também. Você tem muito talento, e admiro demais você.

    beijos fadinha <3

    ResponderExcluir
  25. Moça, muito obrigada!
    Há tempos eu buscava isso, tentei uns quatro tutoriais antes do seu e nenhum funcionou. Mas com o seu ficou perfeito. Muito obrigada mesmo.



    Minha Fuga da Realidade 💜

    ResponderExcluir

Obrigada por comentar!