24 de outubro de 2012

2

Caixa de Texto com efeito CSS para o Blog



Olá galerinha, hoje vamos aprender a colocar 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...


Então galerinha, vamos adicionar esse CSS? Então 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
Agora pessoal, você vai copiar esse CSS e colar lá na quele campo em branco.


/*---- 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;
}


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:

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.




2 comentários:

  1. Ótima dica, é uma coisa bem simplesinha, mas para um iniciante como eu é bem esclarecedor. Eu não vou colocar essa caixa ai no meu site, p q p mim não teria utilidade, mas deu pra deduzir algumas outras coisas. Como a finalidade daquele negócio de add CSS, e que é preciso colocar o html no editor de texto p usar o CSS adicionado. Uma dica bem prática mesmo. Parabéns!

    ResponderExcluir
  2. E se no campo css já tiver algum conteúdo????? meu blog é esse: www.blogdorafa.com Desde já agradeço!

    ResponderExcluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook