PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

16/07/2012

Como inserir códigos CSS no Blogger

css_thumb[3]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.

Help

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].

image

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].

image

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:

accepted_48

/*---- 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…

image

Depois de salvo, clique no link [Voltar para o Blogger].

image

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].

image

Escolha [HTML/JavaScript].

image

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].

image

Visualize o blog e observe se o Gadget que você adicionou abre coma as caixas que acrescentamos em CSS…

image

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….

image

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:

ATENÇÃO: Isto é uma caixa VERMELHA!

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:

A nossa caixa laranja serve para destacar um texto!

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…

byALF

8 comentários:

Avril Lavigne Fã Site disse...

"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 ?

byALF disse...

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

Criação de Sites disse...

Muito bom!

Unknown disse...

ajudou muito valeu mesmo

Unknown disse...

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

Unknown disse...

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 !

byALF disse...

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!

JSAPPMOBILE disse...

valeu pela ajuda

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Fique mais.... Leia os nossos artigos!!!

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Web Analytics