Caixa de Texto com em CSS para o Blog

Escreva o seu texto aqui azul caixa fexada

Escreva o seu texto aqui vermelho caixa fexada

Escreva o seu texto aqui laranja caixa fexada

Escreva o seu texto aqui azul

Escreva o seu texto aqui vermelho

Escreva o seu texto aqui laranja

Caixa de texto personalizada com efeito CSS, e poderemos utiliza-la para destacar parte de textos nas postagens ou códigos, alem das postagens você pode usar esse CSS nos Gadgets do seu blog, veja como ela tem utilidade.../*---- Classe para definir uma caixa azul vertical ---*/ .caixa_azul { margin:5px 10px 5px 20px; border-left:3px solid #A5C9FF; border-right:3px solid #A5C9FF; padding:5px 5px 5px 5px; background: #EBF4FF; } /*---- Classe para definir uma caixa vermelha horizontal ---*/ .caixa_vermelha { margin:5px 5px 5px 5px; border-top:3px solid #DD3C10; border-bottom:3px solid #DD3C10; padding:5px 5px 5px 5px; background: #FFEBE8; } /*---- Classe para definir uma caixa laranja ---*/ .caixa_laranja { margin:5px 10px 5px 10px; border:3px solid #FF7800; padding:5px 5px 5px 5px; background: #FCDCB8; }


Primeiro vamos acessar o painel de edição do seu blog, vá em Modelo >> clique no botão de cor laranja "Personalizar"

Depois que Clicar em modelo aparecerá um novo painel, lá você vai clica na opção "Avançado" >> depois procure a opção Adicionar CSS

você vai copiar esse CSS e colar lá na quele campo em branco.

Depois que você colar o código clique no botão laranja "Aplicar ao Blog"  e depois clique no link >> Voltar para o Blog.

Prontinho pessoal o CSS já está aplicado no seu blog, agora preste atenção logo abaixo eu mostro o código de três cores de caixa que você pode usar:

com margem da caixa fechada

Azul:

<div class="caixa_azul_f"> Escreva o seu texto aqui </div>

Vermelho:

<div class="caixa_vermelha_f"> Escreva o seu texto aqui </div>

Laranja:

<div class="caixa_laranja_f"> Escreva o seu texto aqui</div>

com margem da caixa aberta

Azul:

<div class="caixa_azul"> Escreva o seu texto aqui </div>

Vermelho:

<div class="caixa_vermelha"> Escreva o seu texto aqui </div>

Laranja:

<div class="caixa_laranja"> Escreva o seu texto aqui</div>

Agora quando você for escrever uma postagem tem que utilizar alguns desses HTML mostrado aí a cima, observe que são três cores disponíveis então se for usar uma das cores você tem que utilizar o HTML referente a cor.

Para colocar algum Texto dentro da caixa é só substituir a parte que eu destaquei em negrito pelo seu texto.

REFERENCIA = http://variasdicasparablogs.blogspot.com.br