Blockquotes Kawaii Coloridos

Olá! Hoje o post é para atender ao pedido feito lá na ask/fórum do Reino Kawaii (faça o seu também!! Clique aqui ou em 'Make a wish' ali no topo). Trata-se sobre como fazer caixinhas de texto coloridas para usar em postagens destacando alguns pontos que o leitor deva dar atenção; isso é super útil em tutoriais, para que não haja possibilidade de perder-se em meio aos códigos e esquecer alguns detalhes, ou para fazer suas citações destacadas cada uma de uma forma, servindo como blockquote. As que disponibilizo para vocês tiveram como base um código que uso de Chan Deep, e ficarão mais ou menos assim (com exceção do tipo de fonte):

"Eu gosto do impossível porque lá a concorrência é menor"... (Walt Disney)
"Eu gosto do impossível porque lá a concorrência é menor"... (Walt Disney)
"Eu gosto do impossível porque lá a concorrência é menor"... (Walt Disney)
"Eu gosto do impossível porque lá a concorrência é menor"... (Walt Disney)

Vamos lá!
1. Adicione isso acima de ]]></b:skin>:
/***** Quotes *****/
quotes{
margin: 15px 0;}
.color1 {
overflow: auto;
padding: 0.5em 1em 0.5em 3em;
font-family: 'Sofadi One', cursive;
font-size: 12px;
color: #fff;
text-align: justify;
background: #D0014F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg43Aje4hwT4SbOAphX5c3UWV9RcGLBuCd-n-1tZBeX27l6joYmHtor6Ej9vwZKX2Ohhupi0GPQ41mLDfz8cEKALQ9IG9-T0dXlkc5rPHkgwiqMSe-u2bdEjDt-W-5SPy3UqqeRSHmehiU/s1600/244.gif) no-repeat scroll 10px center;
border: 1px dotted #fff;
box-shadow: 2px 2px 2px #a1a1a1;
}
.color2 {
overflow: auto;
padding: 0.5em 1em 0.5em 3em;
font-family: 'Londrina Shadow', cursive;
font-size: 12px;
color: #BCE3D0;
text-align: center;
background: #F0FAE0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXJ7untL4z7xc0XgD_SgYoMqsSoZ742t4cqGSRgcyfLigcvSVysRNas-2z093kN4WPNQUtIoz4XUcWRnXWL4WwiXRPPtcF3yJPLchHchB1ZmKgT-QRtId3Spl-JmOMHrK5sISzIy8A7nU/s1600/237.gif) no-repeat scroll 10px center;
border: 1px dotted #fff;
box-shadow: 2px 2px 2px #a1a1a1;
}
.color3 {
overflow: auto;
padding: 0.5em 1em 0.5em 3em;
font-family: 'Sofadi One', cursive;
font-size: 12px;
color: #fff;
text-align: justify;
background: #EA8FB2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm8hl03jM_q7guHD52ZZdFYjHU_HTjtYT4SHX2Z5_6JH7CYHRS0K5W2DkyCrTIG-pydEw3nmUnY5FZdjf1sSon9ZvjP16deYKSHJXjlC2PR2Wcsmrru7b0Tkv65S7NFS_OVLj_BYpoSbo/s1600/240.gif) no-repeat scroll 10px center;
border: 1px dotted #fff;
box-shadow: 2px 2px 2px #a1a1a1;
}
.color4 {
overflow: auto;
padding: 0.5em 1em 0.5em 3em;
font-family: 'Londrina Shadow', cursive;
font-size: 12px;
color: #a1a1a1;
text-align: center;
background: #FBEEA6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqSYu1U7-QybxXAI9YISYhYRbtdovyuOM_JGZuYDNoWLxsBf3Ib5Edi7hR9prG3wxMw_sLPS8x3C7g8TdcF8TJTt3a6nTcm5LVXsTe36oVZxwD4DtMAdPOCDnU9N8IlaZTm-1k1WTlmOk/s1600/2821.gif) no-repeat scroll 10px center;
border: 1px dotted #fff;
box-shadow: 2px 2px 2px #a1a1a1;
} 

2. Agora é só adicionar onde quiser que apareça esses códigos:
<div class="quotes color1"> TEXTO </div>
<div class="quotes color2"> TEXTO </div>
<div class="quotes color3"> TEXTO </div>
<div class="quotes color4"> TEXTO </div>
Em font-family você define o tipo da fonte; coloquei 2 como sugestão, se quiser adicioná-las ao seu HTML cole isso aqui antes de </head>:
<link href='http://fonts.googleapis.com/css?family=Londrina+Shadow' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css'/>
Note que no primeiro código que vai acima de /b:skin você poderá personalizar como quiser, mudando cores, bordas, sombras, plano de fundo, imagens, adicionando novos efeitos...enfim, deixe do jeito que preferir.
Espero que gostem e beijus ;3






Postar um comentário

12 Comentários

  1. Anônimo19 abril

    Olá! Este Tutorial é muito bom, obrigado por compartilhar! Faria um tutorial de como fazer o menu que no cabeçalho do seu blog? A narração "Tutoriais, Arquivos" e outras coisas xD Muito Obrigado! (:

    Um beijo! <33

    ResponderExcluir
    Respostas
    1. Obrigada e que bom que gostou ^^
      Farei sim :) Em breve ok?
      Beijinhus....

      Excluir
  2. *O* OWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWNT, nem acredito que você fez, muito obrigada, eu gostei muito!!! Muito obrigada :3

    ResponderExcluir
  3. Nossa, super kawaii, adorei, no meu próximo lay vou usar e darei os créditos :D
    Beijooos...
    with-you-s2.blogspot.com

    ResponderExcluir
  4. Ameeei!
    Gostei Muito,Do Tutorial!!

    ResponderExcluir
  5. Fico muito contente em saber que gostaram!!
    Super beijus ;3

    ResponderExcluir
  6. amei preciso de um bem diferente. são lindos sucesso.

    Boa tarde.
    Curta e participe do meu blog.
    Twitter: https://twitter.com/
    http://instagram.com/nequerenreis
    http://arrasandonobatomvermelho.blogspot.com.br/
    https://www.facebook.com/pages/Batom-Vermelho/490453494347852?fref=ts

    ResponderExcluir
  7. No meu blog ñ tem o
    ]]>:
    Me ajuda?

    ResponderExcluir
    Respostas
    1. Se usar os modelos novos no blogger, vc encontrara o /b:skin no Html ou podera adicionar em designer de modelo avançado add css.
      vc usa Blogger, tumblr...?
      Em todo caso, eh so add o codigo 1 no seu css.

      Excluir
  8. Oi flor sou fã de seu blog adorei o tutorial poderia fazer um tutorial de caixa para exibir códigos HTML na postagem eu já fiz uma mais acho que não ficou charmosa
    se quiser dar uma olhada adoraria sua visita.

    www.dicasnoblog.com.br

    beijo e parabéns pelo blog

    ResponderExcluir
    Respostas
    1. Depois faço um tuto de como usar uma semelhante a essa que uso para postar os códigos aqui ok?
      Bjus e muito obrigada!!!
      Seja sempre bem vinda!!

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up