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.



.