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:
- Entendendo o Blogger... Parte 1: CSS Este Artigo
- Entendendo o Blogger... Parte 2: Javascript ou/e as Condicionais do Blogger
- Entendendo o Blogger... Parte 3: HTML
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
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.
Caso prefiras comentar numa nova janela, ou se o formulário abaixo estiver nos dias ruins, podes clicar aqui.
Enviar um comentário