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.



.

Coloque um menu de site no blog evangélico

.
PARA USUÁRIOS DO BLOGSPOT.

Autoria: João Cruzué

Se você der uma olhada logo abaixo do cabeçalho do blog, vai ver aqueles menus: Home, Post RSS, Testemunhos, Curso... Este é o tipo de melhoria que estou tratando. Eu sempre quis saber como fazer isto. Não tive dificuldades. Compartilhando:

Primeiro Passo:

Opções:

1) Crie um blog de testes com o mesmo modelo do seu blog principal. Para praticar.

2) Copie a página de HTML (Editar html) e salve no bloco de notas, para eventual restauração.

Figura 2 - segundo passo.

Segundo passo:

Abra a página Editar Html em "Layout"

1) Localize as linhas CSS de "Post" . Veja na figura 1. É acima *Post que vai ser inserido as linhas do "Nav"- entre os tópicos Header e Post.


2) Agora localize lá embaixo na divisa do CSS com o HTML a linha:

"div id='crosscol-wrapper' style='text-align:center" Localização: pouco abaixo do inicio das Linhas de HTML - da página de configuração do seu blog.

a) Inserir as linhas de HTML da figura dois. Copie do meu blog.

b) E depois personalize, trocando os endereços dos links

RESULTADO:

Sabe por quê estou repassando esta dica? Eu desejava colocar isto no meu blog Blog Olhar Cristão há uns três anos. Fui aprender sozinho, no mês passado. Fiquei muito contente com o resultado. A propósito, para copiar as linhas do CSS e HTML, abre o link do meu blog. Depois clique com o botão direito do mouse em qualquer espaço da página, até encontrar na caixa de seleção estas palavras: código-fonte. Clique ali. Pronto, vai abrir a minha configuração. Procure até achar as linhas do *Nav/ Topnav. Bem lá embaixo, na divisa do CSS com as linhas de HTML você vai achar a outra parte do "UL Topnav"

Como eu disse antes: crie um blog para testes. Igual ao modelo que usa. Pratique nele.Quando se sentir seguro(a) , vá em frente.

Se você gostou desta dica, SIGA o blog ou associe-se na : A B C


João Cruzué/ Associação de Blogueiros Cristãos

cruzue@gmail.com



.