.
figura 1
figura 1
Por João Cruzué.Não é preciso ser graduado em TI para entender algumas coisinhas sobre a linguagem das páginas do blogspot. Tenho uma opinião formada sobre a edição de Blogs: buscar a melhoria do conteúdo sem esquecer a forma é uma atitude de compromisso, de respeito para com nossos leitores. Esta melhoria passa pelo conhecimento de detalhes da sintaxe da linguagem do "HTML" do Blogspot. Foi a curiosidade que levou-me a resolver alguns problemas e concretizar planos que julgava difíceis para mim, a partir de um blog de testes. Eu literalmente desmontei as configurações de um blog criado para testes de modelo igual ao Olhar Cristão.
No Começo, eu conheci o Blog O Levita do irmão Daniel Miranda. Achava o máximo design do banner do Levita. Por uns dois anos e continuei com o cabeçalho original do meu blog. Só depois disso é que me aventurei a desenhar meus banners.
Mas antes disso já conseguia alterar a cor de fundo, do fundo da caixa de textos, a cor das fontes dos títulos, datas , boxes laterais e rodapé. Por último, isto faz menos de um mês, eu consegui colocar um menu de site debaixo do cabeçalho de alguns de meus blogs. Continua sem compreender HTML, mas dá para experimentar algumas mudanças.
SINTAXE.
Definição: A Sintaxe é a parte da gramática que estuda a disposição das palavras na frase e a das frases no discurso, bem como a relação lógica das frases entre si. (...) Para isso, as palavras são relacionadas e combinadas entre si. A sintaxe é um instrumento essencial para o manuseio satisfatório das múltiplas possibilidades que existem para combinar palavras e orações. [1]
Dito isto, vamos ao ponto. Abra uma outra página na internet e digite o endereço do meu blog: www.olharcristao.blogspot.com . Olhe bem para a figura acima. Na página do meu blog, clique com o botão direito do mouse, ao lado do botão amarelo "João Cruzué". Vai abrir esta caixinha de menu onde lá embaixo está a opção "Código-fonte" - clique com o mouse esta opção. Se você fez tudo certo, vai abrir esta página abaixo. Clique para ampliar.
No Começo, eu conheci o Blog O Levita do irmão Daniel Miranda. Achava o máximo design do banner do Levita. Por uns dois anos e continuei com o cabeçalho original do meu blog. Só depois disso é que me aventurei a desenhar meus banners.
Mas antes disso já conseguia alterar a cor de fundo, do fundo da caixa de textos, a cor das fontes dos títulos, datas , boxes laterais e rodapé. Por último, isto faz menos de um mês, eu consegui colocar um menu de site debaixo do cabeçalho de alguns de meus blogs. Continua sem compreender HTML, mas dá para experimentar algumas mudanças.
SINTAXE.
Definição: A Sintaxe é a parte da gramática que estuda a disposição das palavras na frase e a das frases no discurso, bem como a relação lógica das frases entre si. (...) Para isso, as palavras são relacionadas e combinadas entre si. A sintaxe é um instrumento essencial para o manuseio satisfatório das múltiplas possibilidades que existem para combinar palavras e orações. [1]
Dito isto, vamos ao ponto. Abra uma outra página na internet e digite o endereço do meu blog: www.olharcristao.blogspot.com . Olhe bem para a figura acima. Na página do meu blog, clique com o botão direito do mouse, ao lado do botão amarelo "João Cruzué". Vai abrir esta caixinha de menu onde lá embaixo está a opção "Código-fonte" - clique com o mouse esta opção. Se você fez tudo certo, vai abrir esta página abaixo. Clique para ampliar.
Como esta é uma dica restrita aos modelos de páginas do Blogspot, não vou tratar de outros assuntos, a não ser isto: toda página da Internet que se abre no seu monitor tem por trás de sua beleza uma estrutura construída de HTML ou de línguagens complementares. Basta clicar com o botão direito do mouse nos espaços vazios que vai aparecer seu código-fonte.
DETALHES E TÍTULOS DO CÓDIGO FONTE
Do início da página do código-fonte (Doctype) até a última linha das "/* Variable definitions" a linguagem é (X)HTML. Depois das Variáveis, começa as linhas em CSS, conforme abaixo.
*/
body {
background:#ebe5d5;
Daqui ele se estende até bem abaixo, passando por vários títulos: como
1 - /* Page Structure
2 - /* Links
3 - /* Blog Header
4 - /*nav
5 - /* Posts
6 - /* Comments
7 - /* Profile
8 - /* Sidebar Boxes
9 - /* Footer
Recomeço do HTML em -->
------------------------------------------------------
Antes da sintaxe do CSS vamos olhar um pouco as linhas de "Variable definitions" ou traduzido: definição das variáveis.
1 - Main Background Collor
Quer dizer a cor do fundo da caixa de textos onde você escreve as postagens.
2 - Text Collor
Quer dizer a cor (default) das letras (fontes) que você digita seu texto.
3 - Post Title Collor
A cor da fonte do título da sua postagem.
4 - Date Header Collor
A cor da fonte das datas da sua postagem.
5 - Post Border Collor
A cor das bordas da caixa de textos e do box lateral
6 - Link Collor
A cor default de todos os links no blog
7 - Visited Link Coll0r
A cor do link depois de visitado
8 - Page Header Background Collor
A cor de fundo dos cabeçalhos orgiginais do Blogspot.
Não tem utilidade nos blogs de cabeçalhos modificados.
9 - Blog title collor
A cor da fonte do título do blog
Não tem utilidade nos blogs com títulos feitos diretamente sobre o Banner do cabeçalho
10 - Top Sidebar Title Color
A cor da fonte do título do primeiro box lateral
11 - Top Sidebar background collor
A cor do fundo do primeiro box lateral
e assim por diante... Estas cores podem ser modificadas nos 9 títulos do CSS abaixo.
SINTAXE DO CSS
Definição: Cascade Style Sheets: folhas de estilo em cascata. O CSS é uma linguagem criada por volta de 1994 e é muito usada em redesign do HTML. No blogspot ela é usada para alterar cores de fundo, tamanho de fontes, cores de textos, links, posições dos menus: altura, espaçamento, distâncias etc. Sua sintaxe é mais clean do que o HTML. O CSS não funciona sozinha; precisa do HTML para lhe conceder beleza de forma e espaço.
1 - /* Body
O primeiro título do CSS no Blog Olhar Cristão (Modelo Rounders 3)
A chave {background "#ebe5d5" dá a cor de fundo de externo de todo o blog. No caso é uma cor café-com-leite bem clara. Se está cor fosse "#000000" a cor de fundo seria o preto. Se fosse "#ffffff" seria o branco. São cores hexadecimais que começam em "000000" e terminam em "ffffff". Qualquer grupo númerico, alfa ou alfa-númerico de até 06 posições entre [0 a 9] e [a até f] vão definir as cores tanto no CSS quanto em HTML.
2 - Page Estructure
Outer -wrapper { width: 956px
É a largura máxima com base no banner (cabeçalho) do Blog Olhar Cristão. A largura original era bem mais estreita. Ela pode ser alargada até 980px.
Main Wrapper1 { width: 700px
Estabelece a largura da caixa de textos da postagem. Eu alterei esta largura de 484px para aproveitar o expaço útil para 700px
Sidebar - Wrap { width:240px;
Estabelece a largura da caixa do box lateral.
Bom não preciso ir muito adiante. As posições de largura, altura e espaçamento são estabelecidas em px. Todo número neste formato pode ser modificado, resultando ou não em mudanças. Todo formato #000000 ou #ffffff estabelece cor para o ítem selecionado. O melhor site para mostrar paletas de cores é o December.com.
Creio que aqui tem material de sobra para auxiliar em suas pesquisas.
Última dica: para mudar o banner do blog olhar cristão eu levo pouco mais de 5 segundos. Vou em personalizar/Editar HTML, faço uma cópia da sua configuração, depois vou em escolher novo modelo (para habilitar a opção do cabeçalho que fica travada) escolho o mesmo modelo do meu blog. A seguir vou em elementos da página, o cabeçalho já está liberado, removo o cabeçalho antigo, faço o upload do novo, clico em salvar. Depois vou para Editar HTML, seleciono o conteúdo, deleto e reponho as configurações que tinha copiado antes da mudança. Salvo, e o novo banner do "HEADER" (cabeçalho) já está configuradíssimo.
Abraço.
Se vocêgostou desta dica, afilie-se na Associação de Blogueiros Cristãos
DETALHES E TÍTULOS DO CÓDIGO FONTE
Do início da página do código-fonte (Doctype) até a última linha das "/* Variable definitions" a linguagem é (X)HTML. Depois das Variáveis, começa as linhas em CSS, conforme abaixo.
*/
body {
background:#ebe5d5;
Daqui ele se estende até bem abaixo, passando por vários títulos: como
1 - /* Page Structure
2 - /* Links
3 - /* Blog Header
4 - /*nav
5 - /* Posts
6 - /* Comments
7 - /* Profile
8 - /* Sidebar Boxes
9 - /* Footer
Recomeço do HTML em -->
------------------------------------------------------
Antes da sintaxe do CSS vamos olhar um pouco as linhas de "Variable definitions" ou traduzido: definição das variáveis.
1 - Main Background Collor
Quer dizer a cor do fundo da caixa de textos onde você escreve as postagens.
2 - Text Collor
Quer dizer a cor (default) das letras (fontes) que você digita seu texto.
3 - Post Title Collor
A cor da fonte do título da sua postagem.
4 - Date Header Collor
A cor da fonte das datas da sua postagem.
5 - Post Border Collor
A cor das bordas da caixa de textos e do box lateral
6 - Link Collor
A cor default de todos os links no blog
7 - Visited Link Coll0r
A cor do link depois de visitado
8 - Page Header Background Collor
A cor de fundo dos cabeçalhos orgiginais do Blogspot.
Não tem utilidade nos blogs de cabeçalhos modificados.
9 - Blog title collor
A cor da fonte do título do blog
Não tem utilidade nos blogs com títulos feitos diretamente sobre o Banner do cabeçalho
10 - Top Sidebar Title Color
A cor da fonte do título do primeiro box lateral
11 - Top Sidebar background collor
A cor do fundo do primeiro box lateral
e assim por diante... Estas cores podem ser modificadas nos 9 títulos do CSS abaixo.
SINTAXE DO CSS
Definição: Cascade Style Sheets: folhas de estilo em cascata. O CSS é uma linguagem criada por volta de 1994 e é muito usada em redesign do HTML. No blogspot ela é usada para alterar cores de fundo, tamanho de fontes, cores de textos, links, posições dos menus: altura, espaçamento, distâncias etc. Sua sintaxe é mais clean do que o HTML. O CSS não funciona sozinha; precisa do HTML para lhe conceder beleza de forma e espaço.
1 - /* Body
O primeiro título do CSS no Blog Olhar Cristão (Modelo Rounders 3)
A chave {background "#ebe5d5" dá a cor de fundo de externo de todo o blog. No caso é uma cor café-com-leite bem clara. Se está cor fosse "#000000" a cor de fundo seria o preto. Se fosse "#ffffff" seria o branco. São cores hexadecimais que começam em "000000" e terminam em "ffffff". Qualquer grupo númerico, alfa ou alfa-númerico de até 06 posições entre [0 a 9] e [a até f] vão definir as cores tanto no CSS quanto em HTML.
2 - Page Estructure
Outer -wrapper { width: 956px
É a largura máxima com base no banner (cabeçalho) do Blog Olhar Cristão. A largura original era bem mais estreita. Ela pode ser alargada até 980px.
Main Wrapper1 { width: 700px
Estabelece a largura da caixa de textos da postagem. Eu alterei esta largura de 484px para aproveitar o expaço útil para 700px
Sidebar - Wrap { width:240px;
Estabelece a largura da caixa do box lateral.
Bom não preciso ir muito adiante. As posições de largura, altura e espaçamento são estabelecidas em px. Todo número neste formato pode ser modificado, resultando ou não em mudanças. Todo formato #000000 ou #ffffff estabelece cor para o ítem selecionado. O melhor site para mostrar paletas de cores é o December.com.
Creio que aqui tem material de sobra para auxiliar em suas pesquisas.
Última dica: para mudar o banner do blog olhar cristão eu levo pouco mais de 5 segundos. Vou em personalizar/Editar HTML, faço uma cópia da sua configuração, depois vou em escolher novo modelo (para habilitar a opção do cabeçalho que fica travada) escolho o mesmo modelo do meu blog. A seguir vou em elementos da página, o cabeçalho já está liberado, removo o cabeçalho antigo, faço o upload do novo, clico em salvar. Depois vou para Editar HTML, seleciono o conteúdo, deleto e reponho as configurações que tinha copiado antes da mudança. Salvo, e o novo banner do "HEADER" (cabeçalho) já está configuradíssimo.
Abraço.
Se você
