Como colocar menu de site - Topnav - no seu blog

TOPNAV - CSS e HTML

O resultado do Topnav

Por João Cruzué

Desde o início, eu sempre desejei ter um menu de site no Olhar Cristão. Como eu sei que você também já deve ter imaginado isto, se ainda não conseguiu a mudança vou compartilhar outra vez este assunto para sua análise.

Se acaso um dia quiser testar esta melhoria, é preciso escolher entre tuas medidas de segurança: 1) Fazer uma cópia de todas as linhas de configurações usando o Ctrl+a, Ctrl+c, e colando com Ctrl+v em arquivo do bloco de textos. Salve o arquivo com o nome de meublog; 2) Se achar melhor, crie um blog de testes semelhante ao modelo que tiver, para testar a inserção do CSS (figura 1) e HTML (figura 2). Depois de experimentar e acertar, siga os mesmos passos para inserir o Topnav no seu Blog principal. Relembrando, para acessar o "Editar HTML" do seu blog você pode ir pelo menu Layout ou Personalizar.

clique duas vezes para ampliar a figura

Figura 1 - CSS

A primeira parte das configurações do blogspot é escrita em CSS. No Modelo Rounders 3, as linhas de CSS do Topnav são inseridas abaixo do HEADER e acima do POST. Em outros modelos você precisa fazer o teste para saber ONDE INSERI-LAS. As linhas de CSS alteram configurações de backgroundCollor, tamanho das fontes, espaçamento... clique 2x na figura 1

Figura 2: HTML

No final das linhas de CSS, iniciam outras configurações em HTML. É bem no começo que você insere a segunda parte das configurações para colocar o menu de site no blogspot. Observe bem quando começa o HTML com a tag ]] skin . As linhas em vermelho mostra o que acrescentei para finalizar a configuração. A posição fica entre o /div e a linha que tem as tags croscol-wrapper.

Há muito tempo desejei ter um menu de site no meu blog. Aprendi sozinho, observando. Gostei e estou compartilhando. Irmão João Cruzué, da Associação de Blogueiros Cristãos ABC

Visite o blog da Associação de Blogueiros Cristãos para copiar as linhas do CSS e HTML das figuras. Funciona assim: se você clicar com o botão direito do mouse em nosso blog, vai abrir uma caixa de seleção. Escolha a opção código-fonte, Copie e cole cada uma em arquivos separados do programa bloco de notas.

Este programa existe no seu computador em: Iniciar/Todos Programas/ Acessórios/Bloco de Notas. Depois que você copiar os dois grupos de linhas (CSS e HTML) em arquivos do bloco de notas, salve com os nomes de CSS e HTML. Para mudar os links do meu blog para os seus, observe na figura 2 as linhas que estão em azul. É provável que isto pareça grego para você. Era assim que eu também achava. Mas o compromisso de oferecer melhor conteúdo em melhor visual me levou a investir um pouco do meu tempo investigando e aprendendo essas coisas.

Um abraço sincero. João. cruzue@gmail.com

Associe-se na ABC. Veja como no menu do meu blog - lá em cima. Já é resultado do efeito Topnav.



.

Curso de Blogs - Sintaxe do CSS do Blogspot

.

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.

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ê é evangélico e gostou desta dica, afilie-se na Associação de Blogueiros Cristãos