Dishman

6

Entendendo o Blogger... Parte 1: CSS

No outro dia estava passeando pelo meu antigo blogue (sim, está extinto mas ainda o tenho guardado para estas ocasiões... :-` ), tentando encontrar alguns dos códigos do Blogger que salvei em alguns artigos quando notei que embora os tenha escrito em 2010, esta série de artigos sobre como funcionava a estrutura do Blogger ainda tem o seu interesse e continua actual mesmo que em alguns dos modelos mais recentes a codificação já funcione de maneira diferente.

Por essa razão resolvi republicar estes três artigos aqui neste blogue:

Nada foi alterado no texto a seguir em relação ao que escrevi originalmente, por isso alguns dos códigos apresentados podem aparecer de maneira diferente em modelos mais recentes.


Ao tentar explicar a alguns amigos o código básico da plataforma Blogger, percebi que muitos ainda não perceberam bem o que isso significa.

Por isso resolvi tentar escrever este pequeno texto mostrando de uma maneira que talvez possa ajudar...

Primeiro ponto para melhor entender a plataforma Blogger, certos códigos que funcionam num site normal para funcionar no Blogger vão precisar de ser adaptados e mesmo assim há alguns que podem não funcionar.

2º - Antes de qualquer alteração no código, SALVAR sempre o modelo actual!

Então é assim, geralmente cada site é composto de 2 partes, o CSS (Cascading Style Sheets), que contém os estilos de cada elemento da página, tal como cores, bordas, dimensões, tipo de letra, etc... e o HTML (HyperText Markup Language), onde estão os diversos elementos contidos na página propriamente ditos.

Ora a plataforma Blogger funciona da mesma maneira mas com algumas subtis diferenças. É que além do CSS e do HTML, ainda tem uma outra parte que gosto de chamar a parte do JavaScript(ou CSS: 2ªparte), embora isso não seja inteiramente correcto já que na verdade é mais um aparte da parte principal do CSS, mas onde além de estilos que não se pode colocar no CSS normal, se coloca a maior parte do javascript.

Depois de ter escrito boa parte deste artigo, notei que se estava tornando muito extenso e assim vou dividir em 3 partes, uma para cada secção.

Começando pelo básico com a localização de cada parte:

CSS (primeira parte), começa em <head> e termina em ]]></b:skin>:

É nesta secção que se encontra os estilos para a maior parte do seu blogue (as cores, os fundos, imagens, dimensões, etc...)

Quando desejar alterar por exemplo o fundo do seu blogue, basta procurar nesta secção por:

body {
   background:#000;
   margin:0;
   color:$textcolor;
   font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
   font-size/* */:/**/small;
   font-size: /**/small;
   text-align: center;
}

e modificar o código da cor em background:#000; ou caso se queira colocar uma imagem como fundo: background:#000 url('URL da Imagem do fundo');

Por norma, ao colocar uma imagem de fundo no CSS dum elemento não é necessário definir se a mesma deverá repetir-se porque essa é a regra normal. Somente no caso de só queremos que a imagem se repita horizontalmente (repeat-x), verticalmente (repeat-y) ou não se repita (no-repeat) é que precisamos definir essa regra nos estilos.

É também nesta secção que ao criarmos algum elemento no HTML ou se quisermos dar estilo a algum elemento existente que se deverá colocar os respectivos estilos. Exemplo com o código da navegação abaixo dos artigos (a parte que permite ir para o artigo anterior e seguinte), este é o código que normalmente se encontra no template ou modelo:

#blog-pager-newer-link {
   float: $startSide;
}
#blog-pager-older-link {
   float: $endSide;
}
#blog-pager {
   text-align: center;
}

e suponhamos que queremos dar estilo ao passar o rato por cima, modifica-se esse código acrescentando:

#blog-pager-newer-link {
   float: left;
}
#blog-pager-older-link {
   float: right;
}
#blog-pager {
   text-align: center;
}
#blog-pager a:hover {
   border:1px solid #F0F0F0;
   color:#FFFFFF;
}

Claro que estes são apenas exemplos básicos mas as possibilidades são imensas.

Tentando explicar com um exemplo simples, imagine que um blogue é uma caixa(o body) e dentro dessa caixa tem varias outras caixas(os restantes elementos), cada uma dessas caixas com a sua cor e formato(o estilo css).

Ora quase tudo funciona com divs que não é mais do que uma dessas caixas a que damos uma class ou id para pudermos depois dar o estilo.

Na prática dando um exemplo:

<div class='exemplo'> 
  qualquer conteúdo
</div>

Isto é o que colocamos na parte HTML do código, e se não darmos estilo no CSS aparece assim:

qualquer conteúdo

Ou seja podia simplesmente ter escrito sem colocar a div que ia aparecer da mesma maneira.

Mas se dar um estilo na parte em CSS, como por exemplo colocar uma borda:

.exemplo {
   border: 6px double #bd7407;
}
qualquer conteúdo

ou que tal acrescentar uma imagem como fundo(background), colocar uma largura(width) e altura(height):

.exemplo {
    border: 6px double #bd7407;
    background: #f1e1bd url('https://i.imgur.com/vBDhMbN.jpg') repeat-y;
    width: 450px;
    height: 150px;
}
qualquer conteúdo

A titulo de curiosidade, esta é imagem utilizada no fundo do exemplo acima:

Continuando... Podemos ainda incluir outra div dentro da principal para dar estilo ao conteúdo também:

<div class='exemplo'>
  <div class='exemplo2'>
    qualquer conteúdo
  </div>
</div>
.exemplo2 {
    color: #cceaf9; /* A cor do texto */
    font-family: "Book Antiqua", Palatino, serif;  /* A fonte da letra */
    font-size: 20px;  /* O tamanho da letra */
    font-weight: bold;  /* Em negrito */
    text-transform: capitalize;  /* Letra grande no inicio de cada palavra */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;  /* Dar um sombreado ao texto para imitar um traçado */
    border: 2px groove #1f9e03;  /* A borda, expessura em px, tipo e cor */
    border-radius: 5px;  /* A curvatura da borda */
    background: rgba(4, 84, 124, 0.5); /* O fundo em cor semi-transparente */
    width:300px; /* A largura */
    height: 50px; /* A altura*/
    padding:5px 10px; /* O espaço interior, cimo/baixo e esquerda/direita */
    margin:10px auto 10px; /* A margem, por cima, dos lados, por baixo */
    -webkit-box-shadow: 0 8px 6px -6px #000; /* Sombra por fora, somente de um lado. Chrome e outros navegadores -webkit */
      -moz-box-shadow: 0 8px 6px -6px #000; /* Sombra por fora, somente de um lado. Antigas versões do Firefox */
        box-shadow: 0 8px 6px -6px #000; /* Sombra por fora, somente de um lado. */
}
qualquer conteúdo

Nota: Os estilos exemplificados acima estão comentados com as minhas notas para melhor ajudar a entender o processo. ;)

Isto são somente alguns exemplos do que podemos fazer no CSS para dar estilo a cada parte dos elementos de um blogue. Atribuímos uma classe ou id se for necessário ou utilizamos a que tem e brincamos com o CSS até ficar a nosso gosto...

Já agora, se quisermos dar estilos no CSS somente para o Chrome e demais navegadores -webkit:


@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
/* Inicio dos estilos somente o Chrome */
  p {
    color: red;
  }
/* Fim dos estilos somente o Chrome */
}

A seguir o Javascript ou CSS:parte2

Até Breve. :-F

Aspirante a Artista Digital, Moderador no site Heromorph desde 2007. Um dos fundadores do Quadradinhos inK, projecto de BD com artistas de Portugal e Brasil.
Gosto de BD, Cinema. Jogos e códigos HTML, CSS e Javascript.
Autor do Coisas K Aprendi por Aí, um blogue sobre nada e mais alguma coisa.
BloggerTwitterFacebookPinterestStackOverflowNexusModsGOG.comSteamContactoPaypal

Comentários

Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.

Mas antes de comentarem, leiam as minhas Regras dos Comentários.

Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.

Enviar um comentário