.jpeg)
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>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>:
<div class="quotes color2"> TEXTO </div>
<div class="quotes color3"> TEXTO </div>
<div class="quotes color4"> TEXTO </div>
<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
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! (:
ResponderExcluirUm beijo! <33
Obrigada e que bom que gostou ^^
ExcluirFarei sim :) Em breve ok?
Beijinhus....
*O* OWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWNT, nem acredito que você fez, muito obrigada, eu gostei muito!!! Muito obrigada :3
ResponderExcluirNossa, super kawaii, adorei, no meu próximo lay vou usar e darei os créditos :D
ResponderExcluirBeijooos...
with-you-s2.blogspot.com
Ameeei!
ResponderExcluirGostei Muito,Do Tutorial!!
Fico muito contente em saber que gostaram!!
ResponderExcluirSuper beijus ;3
amei preciso de um bem diferente. são lindos sucesso.
ResponderExcluirBoa 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
No meu blog ñ tem o
ResponderExcluir]]>:
Me ajuda?
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.
Excluirvc usa Blogger, tumblr...?
Em todo caso, eh so add o codigo 1 no seu css.
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
ResponderExcluirse quiser dar uma olhada adoraria sua visita.
www.dicasnoblog.com.br
beijo e parabéns pelo blog
Depois faço um tuto de como usar uma semelhante a essa que uso para postar os códigos aqui ok?
ExcluirBjus e muito obrigada!!!
Seja sempre bem vinda!!
Que lindos!!
ResponderExcluir