12/09/2009

Inserir menu Linkbar

Aprenda a inserir um menu horizontal em seu blog. Antes de começar faça um backup de seu layout. Vale lembrar que alguns Templates (modelos de blog) já vem com menu.



Fazer backup do layout não significa que você está fazendo backup de todo o blog. Fazer backup do layout é salvar o modelo da estrutura de seu blog. Para fazer backup de todas as postagens e comentários do blog acesse a postagem fazer backup do blog .


Faça login em seu blog ( nome de usuário e senha ), em seguida no painel inicial acesse Layout.


Na aba layout, há quatro opções:


Elementos da página – onde é possível adicionar e organizar os elementos de seu blog.


Fontes e cores – para alterar as fontes de seu blog e as cores dos elementos de seu blog utilize esta opção.


Editar HTML – para alterar o HTML do layout (modelo) de seu blog.


Selecione novo modelo – esta opção altera o modelo ou layout de seu blog para um layout pré-definido.


Selecione a opção Editar HTML.






E acesse a opção Baixar modelo Completo. Em seguida acesse salvar e escolha a pasta a ser salva em seu computador. Desta forma você estará assegurando que a alteração do HTML de seu blog poderá ser revertida carregando o modelo novamente.


Para carregar novamente o modelo de layout em seu blog acesse procurar, encontre onde foi salvo o modelo do layout em seu computador em seguida acesse Fazer Upload.





Edição do HTML







Procure as linhas
 
/* ---( layout structure )---*/

      Cole aqui o código abaixo

/* Outer-Wrapper*/




Entre elas cole este HTML abaixo:




/* ----- LINKBAR ----- */


#linkbar {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
position: relative;
background: #ffffff;
border: 0px solid #000;
border-bottom: 0;
}

#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 3px 3px 3px 3px;
text-align: center;
list-style-type:none;
}

#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#linkbar h2 {
margin: 0px 0px
0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility:
hidden;
}

#linkbar a {
clear: both;
margin: 0px 0px 0px 0px;
padding: 5px 5px 5px 5px;
width:40%;
text-decoration:none;
font-family: verdana;
font-weight: bold;
font-size: 20px;
color: #0066cc;
border-right: 1px solid #fff;
}

#linkbar a:hover {
color: #000;
background: #fff;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}



Procure estas linhas

Se o seu maxwidgets for só '1' mude para '2' em showaddelement se estiver 'no' mude para 'yes'.



Em seguida, logo após cole:



Os items em vermelho são as cores e o tipo de fonte caso queira alterá-los abra duas janelas uma com o layout, editar HTML. E outra em layout, Fontes e cores, selecione uma cor e veja na caixa Editar código de cor hexadecimal.






Agora salve o código HTML na aba Editar HTML, em SALVAR MODELO e Pronto!


Em seguida abra novamente a Aba layout e edite a Linkbar.


12 comentários:

  1. não consegui entender onde eu devo colocar o primeiro codigo. Vc pode me explicar?

    ResponderExcluir
  2. sim, é diretamente no layout do blog, acesse a aba layout conforme a (primeira imagem), em seguida selecione editar HTML. Igual na primeira imagem.
    Irá aparecer aquela caixa de textos com os códigos HTML do seu blog.(terceira imagem) em baixo role um pouco a tela e leia o código html até encontra a linha /* Outer-Wrapper*/
    Geralmente esta linha está logo no inicio do HTML.
    Copie o primeiro codigo e cole em uma linha acima dela.
    Os outros códigos estão mais no fim do HTML.
    Qualquer dúvida posta um novo comentário.

    ResponderExcluir
  3. Beatriz você publica suas postagens através de algum programa para publicação ou diretamente no site do Blogger?
    www.blogger.com
    Acesse o site do blogger e faça login em sua conta (nome de usuario e senha)
    No painel inicial acesse layout para alterar o código HTML do seu blog.

    ResponderExcluir
  4. Oi!Eu tenho Linkbar,no meu Blogspot!,mas sempre que posto qualquer coisa em um dos links, em todos os outros links,aparecem a mesma coisa!Queria saber como fassso para postar sem que aparessa,nos outros links!Você pode me ajudar?

    ResponderExcluir
  5. Ao postar um endereço e inserir um botão novo na linkbar você precisa alterar tambêm o endereço URL de destino do botão, o endereço url é o endereço da postagem que aparece no navegador, por exemplo: http://osegredodosblogs.blogspot.com/2009/09/inserir-menu-linkbar.html
    este é o endereço desta postagem...
    Espero ter ajudado...
    Abraços..

    ResponderExcluir
  6. Olá

    Meu blog já contém as abas, pois baixei este template pronto de um site na net, porém não sei como inserir minhas páginas nestas abas. Tentei seguir suas instruçoes acima, mas nao encontrei os mesmos códigos.
    Aguardo sua ajuda

    ResponderExcluir
  7. No meu texto de html não tem essas linhas
    /* Outer-Wrapper*/ e/ou
    /* ---( layout structure )---*/
    o que é que eu faço?

    ResponderExcluir
  8. Quero fazer um menu de abas como esse seu, acima. Como é que eu faço?

    ResponderExcluir
  9. Fabiana, se o seu tema foi baixado e modificado é provavel que você tenha que alterar o menu manualmente diretamento no código do blog(HTML), deve ter alguma mensagem em inglês do tipo "coloque o endereço URL aqui", Normamente está localizada no <---Header---> é um pouco dificil de achar mais depois que vc achar ficará facil alterar.

    Ana Lucia,
    Este menu que tenho deu um trabalhão para fazer não é igual o desta postagem ele foi retirado de algum tema que vi na net, se vc entendi um pouco de css e HTML analisa o HTML deste blog e pode copiar o menu, se vc não entendi muito ou não quer ter este trabalho te aconselho a trocar o template do seu blog por um que já possua menu. Veja a postagem mais de mil templates para você neste blog. O template que eu uso aqui é o minima modificado.

    ResponderExcluir
  10. Não consigo colocar as guias para inserir as paginas e postagens no meu blogspot, mesmo seguindo as suas instruçoes me ajuda !

    ResponderExcluir
  11. Madu.

    O Template esta funcionando?
    Se estiver, faça login e acesse a aba layout, em seguida elementos da página, localize a linkbar e altere com os endereços URL´s das paginas que vc quer colocar no menu....

    ResponderExcluir

Leia as regras:
Todos os comentários são moderados antes de serem publicados serão publicados somente os que respeitarem as regras abaixo:
-Comentários que incitem a violência, preconceito ou intolerância serão deletados;
-Cometários com conteúdo proibido para menores de 18 anos serão deletados;
- Links desnecessários serão apagados;
Obrigado