CSS, como utilizá-lo…
Se você está começando ou aprendendo a utilizar códigos CSS, neste artigo iremos dar algumas dicas para você utilizar esta linguagem da maneira mais fácil no seu Blogger.
CSS (Casdading Style Sheets) ou Folha de Estilo em Cascata, para quem não sabe, é uma linguagem similar e complementar ao HTML, que controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos, ou seja, todo o layout de um site. (leia: O que é CSS?)
Para exemplificar nosso artigo, iremos apresentar algumas de caixas coloridas para você destacar partes do texto de um post. São exemplos bem simples apenas para elucidar nosso tutorial. Códigos CSS são muito poderosos e estão relacionados com todo visual de um site, como cores, fontes, margens, imagens, etc… Portanto, é bem legal você se aprofundar mais neste assunto, assim como em HTML, que é a base da visualização nos navegadores da internet…
Adicionar CSS no painel do Blogger
Entre na página administrativa do seu Blogger, acessando www.blogger.com (Entre com o seu email e senha do Google. Depois entre no blog que deseja alterar).
Atenção: Antes de fazer qualquer modificação no modelo e nas páginas HTML, faça um backup completo primeiro, leia: Cuidados quando for editar seu modelo HTML no novo painel ...
No menu lateral escolha [Modelo] e clique no botão [Personalizar].
No menu lateral da página do Designer de modelo do Blogger clique em [Avançado]. Depois no menu ao lado, clique em [Adicionar CSS].
Observe que iremos trabalhar com seletores denominados de classes (class). Um seletor tipo class deve ser sempre precedido de um ponto (exemplo .caixa_azul).
Agora copie o código abaixo:
/*---- 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;
}
Cole no campo [Adicionar CSS personalizado]. Depois clique no botão [Aplicar ao blog] para salvar…
Depois de salvo, clique no link [Voltar para o Blogger].
Testando o código CSS
Para testar o código CSS adicionado, vá para [Layout] no menu lateral do painel administrativo do Blogger e clique no link [Adicionar um Gadget].
Escolha [HTML/JavaScript].
Copie o código abaixo a seguir…
<div class="caixa_azul"> Testando a CAIXA AZUL vertical </div>
<p></p>
<div class="caixa_vermelha"> Testando a CAIXA VERMELHA horizontal </div>
<p></p>
<div class="caixa_laranja"> Testando a CAIXA VERMELHA horizontal </div>
Cole no campo [Conteúdo] e clique no botão [Salvar].
Visualize o blog e observe se o Gadget que você adicionou abre coma as caixas que acrescentamos em CSS…
Se tudo estiver correto, abra a novamente a janela do Gadget e clique no botão [Excluir], pois o Widget apenas serviu para testarmos o código CSS. Entretanto, você poderá utilizar suas caixas coloridas nos gadgets quando achar necessário….
Utilizando o CSS nas postagens
Para acrescentar os códigos CSS do nosso exemplo nas postagens, abra o editor HTML do Blogger ou do Windows Live Writer e digite o código abaixo:
<div class=”NOME DA CLASSE QUE VOCÊ ADICIONOU”> TEXTO </div>
Veja nossos exemplos a seguir:
<div class="caixa_azul">
<p>Testando a caixa azul vertical</p>
<p>Testando a caixa azul vertical</p>
<p>Testando a caixa azul vertical</p>
</div>
Veja como fica no post:
Testando a caixa azul vertical
Testando a caixa azul vertical
Testando a caixa azul vertical
Outro exemplo utilizando nosso CSS:
<div class="caixa_vermelha">
ATENÇÃO: Isto é uma caixa VERMELHA!
</div>
Veja como fica no post:
Finalizando nossos exemplo, vamos utilizar a caixa laranja
<div class="caixa_laranja">
<b>A nossa caixa laranja serve para destacar um texto!</b>
</div>
Veja como fica no post:
Com estas dicas dá para você ter uma idéia bem legal de como utilizar CSS no seu Blogger. Para você se aprofundar mais em programação, recomendamos que faça os cursos de HTML (Curso de HTML5) e CSS (Curso de Dreamweaver CS5).
No artigo Como criar um menu drop-down (multinível) no Blogger utilizamos código CSS para a criação do menu, servindo como um exemplo mais elaborado de como se utilizar programação com o Blogger…
Para criar códigos e testá-los, você também poderá utilizar um simulador online (leia: Simulador CSS e HTML – Ótimo para iniciantes… --- muito bom!)
Agora é com você. Bons estudos e bons trabalhos…
8 comentários:
"Para acrescentar os códigos CSS do nosso exemplo nas postagens, abra o editor HTML do Blogger "
Não entendi essa parte, onde eu abri o editor HTML ?
Olá Avril L Fã site,
Quando você escreve um post, no menu superior tem um botão HTML. Clique nele para abrir o editor...
Leia o artigo: Como inserir vídeos do Youtube no blog que tem um exemplo...
Visual Dicas
Muito bom!
ajudou muito valeu mesmo
curso de css-Curso de CSS en México en D.F. Integra las tecnologías más utilizadas CSS - CSS3 - Boostrap 3 realizando diseño profesionales. El mejor curso de CSS
NOSSA MEU DEUS 1°O CARA ESCREVE MUITO ERRADO 2°FALA UMAS COISA SEM SENTIDO AFFZ VAI APRENDER A SER UM BLOGUEIRO DECENTE SE QUISER EU TE ENSSINO !
TePartilhe Brasil,
Valeu parceiro. Preciso da sua ajuda sim. Cara, só corrige o seu comentário que tá muito feio. Não é "ensino" com 2 esses. kkkkkk
Abraços!
valeu pela ajuda
Postar um comentário