Dishman

6

Entendendo o Blogger... Parte 3: HTML

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.


A parte HTML, começa em <body> e termina em </body> e é onde estão os elementos visíveis num blogue.

Num site normal, geralmente isso é conseguido com divs, mas na plataforma Blogger existe algumas diferenças.

Se olharem para o código do vosso blogue nesta secção, podem ver que além das divs, ainda cada div contem uma secção chamada de b:section, que pondo a coisa duma maneira para mais fácil entender, não são mais que outras divs dentro duma div.

Ora para podermos editar o template ou dar estilos no CSS, acrescentar outros elementos directamente no código tal como alguns slideshows, menus ou mais secções tipo um rodapé extra dividido em três, e para isso é necessário sabermos identificar o que são essas divs e onde estão localizadas no blogue.

Observando a imagem acima como exemplo, podemos identificar algumas delas:

A main-wrapper que é a parte dos artigos, a sidebar que é a parte da(s) barra(s) na lateral e o footer-wrapper que é a parte do rodapé abaixo. Falta na imagem ainda o outer-wrapper que é parte total que contém os elementos e a header-wrapper que é a parte do cabeçalho, mas por aqui já dá para ter uma ideia da localização de cada elemento.

A imagem acima é da interface antiga do Blogger tal como se apresentava em 2009 quando este artigo foi escrito mas para efeitos de exemplo serve o seu propósito.

Além de que também serve para mostrar como era a aparência dos bastidores do Blogger nessa altura. ;)

Isto num template normal do Blogger, porque nos personalizados pode aparecer com nomes diferentes mas o básico é saber identificar esses elementos e sua localização.

Ora se reparar, dentro de cada uma dessas divs está uma b:section que também tem uma id (que deve ser sempre única) e uma class que pode ser comum com outras a que se deseje dar os mesmos estilos no CSS.

Se observar o seu CSS, vai notar que os estilos normalmente estão na mesma ordem em que as divs estão localizadas no corpo do blogue, isso também pode ajudar a localizar os respectivos códigos no HTML.

Marcando expandir os modelos do widget, cada b:section expande-se, revelando mais divs e outros elementos, mas se imaginar a ideia de caixas dentro de caixas vai poder identificar cada uma delas. Só precisa ter em conta que cada div existente no código tem que ter um fecho (</div>), e lendo o seu CSS vai poder identificar e localizar cada uma delas para saber em qual editar os estilos e/ou mudar a localização, acrescentar outros elementos, etc...

Também a ter em conta, que certos estilos nos templates normais são comuns a vários elementos e que se os desejarmos personalizar em separado temos que separar, criando no CSS a designação para eles:

Exemplo, a barra lateral normalmente utiliza o mesmo estilo nos títulos que no resto dos elementos dessa secção, para poder dar um estilo aos títulos da sidebar em separado, precisamos saber qual o tipo de titulo que os elementos da barra lateral possuem (<h1>,<h2>,<h3>), sabendo isso podemos criar um estilo acrescentando no CSS, junto aos restantes estilos da sidebar:


.sidebar h2 {
    height:27px;
    line-height:27px;
    font-size:16px;
    color:#eee;
    margin:5px 0 0 0 ;
    padding:0px 0 0 15px;
    background: blue;
    font-weight:bold;
    -webkit-border-radius:10px; /* - Estilo webkit para Chrome e Safari - */
    -moz-border-radius: 10px; /* - Estilo para as versões mais antigas do Firefox - */
    border-radius:10px; /* - Estilos já aceites pela maioria dos navegadores actualizados - */
}

Os estilos acima são um exemplo, cada um deve colocar estilos que se integrem bem na aparência do próprio blogue.

Também se podem colocar estilos no próprio HTML da seguinte forma:


<div class='title' style='color: #f2f;font-weight: bold;'>
... Conteúdo...
</div>

Pessoalmente, só coloco estilos desta maneira em ultimo caso. I-X

Resta ainda mencionar a prioridade em que os navegadores lêem os estilos:

  1. No CSS, com a declaração !importante (esta maneira é um pouco de desenrascanço mas é a única forma de anular os estilos no próprio HTML. Só utilizar em ultimo caso!). Exemplo: div {color: red !important; }
  2. No próprio HTML ou com Javascript, tal como em <span class='textoverde' style='color: green;'>Este texto é VERDE</span>. Neste exemplo, mesmo que a cor (color) já esteja definida na class .textoverde no CSS, essa definição é ignorada. As restantes propriedades serão mantidas.
  3. Através de Javascript. Neste caso a maneira como esses estilos são colocados depende de que tipo de codificação em javascript se utiliza. Exemplo de javascript puro: document.getElementById('textazul').style.color='blue'; serve para numa elemento com a id textazul colocar o texto em azul.
  4. No CSS, seja externo ou na <head> havendo também a prioridade na ordem em que os estilos estão colocados. Exemplo: 

     <style>
    .textoverde {
      color: #cfc!important; /* esta cor vai ter prioridade sobre as demais nesta c̲l̲a̲s̲s̲, a menos que exista outra igual com a declaração !̲i̲m̲p̲o̲r̲t̲a̲n̲t̲e̲ mais abaixo para a mesma propriedade */
      color: #090; /* esta seria a cor do texto SE não existisse a declaração !̲i̲m̲p̲o̲r̲t̲a̲n̲t̲e̲ acima */
      background: #d0e4f7; /* Cor de fundo para os navegadores mais antigos que não lêem gradientes. Caso o navegador não consiga ler alguma das propriedades abaixo, esta será lida */
      background: -moz-linear-gradient(top,  #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); /* Cor de fundo para o Firefox mais antigo (3.6 a 15). Caso o navegador não consiga ler alguma das propriedades abaixo, esta será lida */
      background: -webkit-linear-gradient(top,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Cor de fundo para o Chrome e Safari mais antigos (Chrome 10-25,Safari 5.1-6). Caso o navegador não consiga ler alguma das propriedades abaixo, esta será lida */
      background: linear-gradient(to bottom,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Cor de fundo para os navegadores mais modernos (W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ ).  */
    }
    </style>
    <link rel='stylesheet' type='text/css' href='MeuEstiloCSS.css' /> <!-- Os estilos repetidos têm prioridade mesmo numa folha de estilos externa como neste caso -->

    Ou seja, não importa se o CSS está presente no modelo do blogue (normalmente, está) ou se está num local externo (tal com em algumas das miniaplicações), o navegador vai ler sempre os estilos na ordem descendente em que estão colocados e o estilo que estiver repetido mais abaixo vai ser o que vai aparecer.

Outra coisa a ter em conta ao escrever estilos CSS é a questão das ids e classes e a prioridade entre elas:

  1. No próprio HTML, tal como em <div id='laranja' class='verde' style='color: red;'>Este texto é vermelho</div>.
    Neste exemplo, a class é ignorada se .verde já tentou definir o valor da cor. Também a id será ignorada se tentou definir a cor.
  2. Selector de ID, como por exemplo: #laranja { color: orange; }
    que resulta em texto laranja. A id NÃO PODE SER REPETIDA, SÓ DEVE EXISTIR UM ELEMENTO COM A MESMA DENOMINAÇÃO!
  3. Selectores de Class, como por exemplo: .verde { color: green; }
    que resulta em texto verde para todos os elementos com class .verde.
  4. Selectores de Elemento, como por exemplo: div { color: black; }
    que resulta em texto preto para todas as divs.

Para terminar esta curta e muito incompleta tentativa de explicar como são os códigos do Blogger, existe muito mais a saber sobre códigos, como funcionam, como são lidos por cada navegador,etc..., do que o que eu escrevi neste 3 artigos.

A minha intenção aqui foi somente tentar dar uma introdução e ajudar a identificar cada um deles e respectivo estilo no CSS. Se desejar ter um maior conhecimento de como funcionam os códigos do blogger recomendo que leia os artigos nos excelentes e muito completos blogues de autênticos mestres: Vagabundia do JMiur(NOTA: muito activo em 2009 mas sem novas publicações desde 2013, embora os artigos publicados ainda tenham muito para ensinar. ) em espanhol, mas entende-se bem, Yet Another Blogger Tips Blog do finlandês MS-potilas(NOTA: muito activo em 2009 mas sem novas publicações desde 2013, e tal com o blogue do JMuir também os artigos publicados têm muito para ensinar) em inglês e por fim Dicas para Blogs do Fabiano Roberto(NOTA: muito activo em 2009 e um dos poucos blogues dedicados a dicas e tutoriais para o Blogger com publicações com menos de um ano).

E assim, me despeço com um

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