Menu horizontal colorido

em 12 de dezembro de 2013


Olá, leitor!
Quero compartilhar com você um menu colorido bem fofo e fácil de instalar.
Clique no botão para ver a demonstração:


Demonstração do tutorial


Para ter em seu blog é bem simples:
Acesse o painel de seu blog e clique na aba Layout.
Clique em Adicionar um gadget e escolha HTML/JAVASCRIPT.
Na janela que expandir cole esse código:



Copiar o código



Leia:
Como usar os tutoriais deste blog?


Entenda o código:
<span style='border-radius: 7px; /*grau de arredondamento da aba*/
background-color:#f781f3; /*cor de fundo da aba*/

padding: 5px 15px 5px 15px;'> /*espaçamento interno*/
<a href="LINK 1 ">categoria 1</a></span>

Onde você lê LINK 1  coloque, claro, o endereço para onde deseja direcionar o leitor quando ele clicar.
Em geral a aba 1 é para o começo do blog, o endereço principal.
As demais você coloca o que desejar, sendo que em geral são páginas  Sobre, Contato, Mapa do blog, etc.
Onde você lê categoria1 coloque o nome da aba como deseja que apareça.
Para trocar a cor das abas troque o código hexadecimal pelo código da cor que você deseja.
Veja minha demonstração e configure o seu como desejar.
Depois de pronto arraste para onde deseja que apareça e salve as alterações.

Caso deseje incluir mais abas repita esse trecho antes de fechar a div, tantas vezes quantas forem as abas que deseja acrescentar.:



Gostou?
Então curte aí!
E ajude a divulgar o blog!
Eu agradeço!!!!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

36 comentários , comente também!

  1. Elaine, além de agradecer por sempre estares compartilhando o que sabes pra nos ajudar

    ¸.•*´¨`*•.¸¸.•*´¨`*•.¸¸.•*´¨`*•

    Meu agradecimento pelos carinhos todos nesse ano e desejos de FELIZ NATAL e lindo, iluminado e com muita garra 2014 ! beijos,chica

    ¸.•*´¨`*•.¸¸.•*´¨`*•.¸¸.•*´¨`*•

    ResponderExcluir
  2. Adorei vou tentar no meu blog, se puder seguir o meu agradeço beijos http://duasirmasatelie.blogspot.com/

    ResponderExcluir
  3. Estava querendo colocar Abas no meu Variedade!
    Vou tentar fazer.
    Obrigada.
    Beijos.

    ResponderExcluir
  4. Coloquei as abas.
    Li mas não entendi como trocar a cor, você me explica mais detalhado.
    Obrigada.
    Beijos.

    ResponderExcluir
    Respostas
    1. Jo, para trocar as cores troque o código hexadecimal das que estão pelo código das que deseja, conforme explico no tutorial.
      Aqui tem uma tabela de cores:
      http://cores.gratuita.com.br/
      beijos

      Excluir
  5. Oi Elaine,
    Muito legal!
    Eu vou aproveitar as férias do blog para fazer algumas mudanças, mas ainda não sei o que farei rs
    Vou guardando todas as dicas.
    bjs
    Ótimo finde!

    ResponderExcluir
  6. Obrigada! Consegui trocar a cor (pelo código da tabela).
    Valeu mesmo.
    Beijos.

    ResponderExcluir
  7. Ótima dica! Quando sair de férias vou dar uma melhorada no layout do meu blog e com certeza vou passar por aqui pra pegar umas dicas!

    oblogdafenixx.blogspot.com

    ResponderExcluir
  8. Que fofo!!!
    Não fosse o meu menu tão lindo (graças às SUAS mãos de fada!), colocaria no meu bloguito!
    Obrigada por compartilhar!
    Beijinhos,
    Cris

    ResponderExcluir
  9. Oii linda , seu blog tem tudo queeu preciso , obrigada <3

    ResponderExcluir
  10. Elaine:
    Passei pra agradecer pelas preciosas dicas, inclusive já alterei meu menu.
    Agora ele tá linduxo, rsrsrsrs.
    E aproveitei para divulgar seu blog na minha Sinopse Semanal.
    Para conferir o post, basta acessar esse link:
    http://meusdevaneiosescritos.blogspot.com.br/2013/12/sinopse-semanal-n-07.html
    E se quiser, aproveite para participar, ok. (As informações de participação, estão no post)
    Bjs.:
    Sil

    ResponderExcluir
  11. Gostei sim , mas vou deixar para a menina que renovará a carinha do meu blog .
    Beijinhos
    Deus abençõe

    ResponderExcluir
  12. Elaine minha querida já deixei outros recados aqui e não foram publicados! Eu achei legal vc colocar o seu arquivo neste menu, ficou mais fácil para a pesdquisa!
    Beijinhos...

    ResponderExcluir
  13. Obrigada minha flor... vc foi a minha salvação, nunca vi alguém explicar tão bem como vc, estou colocando em pratica tudo o que vc ensinou, bjoos...
    Feliz natal e o prospero ano novo.

    ResponderExcluir
  14. gosto muito do seu blog , vc é simpática e explica tudo direitinho ! Parabéns !

    se quiser dar uma passadinha no meu blog , agradeço : http://princesasdosalvador100.com.br

    ResponderExcluir
  15. Mudando o visual do Pitacos de Lua aproveitei esse seu tutorial para colocar os botões no meu blog...ficaram ótimos. Só estou tentando descobrir como afastar eles da imagem do layout, ficou muito grudado, não ficou com o mesmo espaçamento dos gadgets da lateral, mas mesmo assim já fiquei muito feliz com meus novos botões colorido :)

    Mais uma vez, obrigada pela dica...gente ajudando a nós blogueiros a configurar nossos blogs.

    Um grande 2014 para você e sua família.
    Abraço

    ResponderExcluir
    Respostas
    1. Lualessi, experimente definir o espaçamento inserindo o valor margin-top depois de center;
      Valores negativos sobem, positivos descem. Tente algo como 10px e vá alterando até ficar como deseja.
      Não testei, mas é por aí...
      beijosss

      Excluir
  16. ooi Elaine td bem ? estou ADORANDO AS SUAS DICAS MUITO OBRIGADA comecei agora meu blog e esta ficando cada vez mai slindo graças a vc !!! mas por favor me ajuda não to conseguindo mudar os nomes nos inten ainda continuam como categoria 1 e categoria 2 e tals ... como mudar ?? obg bjs

    ResponderExcluir
    Respostas
    1. LAILA, é muito simples, substitua o nome categoria 1, 2 , 3 etc ... e coloque o nome que você achar melhor bjs xau.

      Excluir
  17. Olá
    Elaine tem como mudar a cor e a fonte do menu, se sim como faço rs

    ResponderExcluir
    Respostas
    1. Milena, as cores você troca mudando os códigos hexadecimais precedidos do sinal #
      A fonte não dá pra trocar, ela segue o padrão de seu blog.
      bjssss

      Excluir
  18. Oi Elaine, td bem? Fiz tudo certinho porém ficou colado na imagem do cabeçalho. Como faço pra aumentar a margem? vi num comentário acima que vc mandou colocar margin-top 10px logo após o center, mas qdo faço isso essas palavras aparecem no blog e a margem não muda... Como devo escrever exatamente? Obrigada pela ajuda! Patricia

    ResponderExcluir
    Respostas
    1. Patrícia,
      Nesse caso você precisa retirar o gadget Páginas pois em geral o menu vai exatamente ali.
      Se ficar muito próximo ao cabeçalho a solução é tentar descer o menu colorido para uma casa abaixo.
      Como cada template tem características próprias tem que ir testando até achar o lugar.
      bjsss
      bjsss

      Excluir
    2. Obrigada Elaine, mas já tinha retirado o gadget páginas e no lugar coloquei o menu colorido, foi aí que ficou em cima da imagem. Se desço o menu para uma casa abaixo, ele vai para a sidebar, e não gostaria que ele ficasse ali, pois não fica no meio de tudo. Bom, vou tentando, apesar de achar que não vai dar certo.... :( Pensei que tivesse algum código pra colocar e mudar a margem... De qquer forma muito obrigada!!!
      www.lenaepatytasca.com.br

      Excluir
  19. Olá Elaine!
    Eu fiz no meu e deu certo. Fiquei de voltar aqui pra te falar. E hoje pintou esse tempinho :)
    Beijinhos e Sucesso lindona!
    http://dulcineiadesa.blogspot.com

    ResponderExcluir
  20. Oiii adoreeeei !!
    Elaine queria saber como é que muda a letra ???

    ResponderExcluir
  21. Oi! Gostaria de saber se as dicas para o blog tambem se aplicam no Wordpress.

    ResponderExcluir
  22. Olá Elaine pode me dizer se neste menu tem como colocar sub menus ?

    ResponderExcluir
  23. Fiz no meu blog e ficou ótimo! Obrigada pelas dicas :)

    ResponderExcluir
  24. Bom dia Eliane,

    Este comentário é apenas para lhe alertar sobre o bloqueio ao copiar o código, acredito que seja pelas mudanças que vens promovendo recentemente, mas ainda não colocaste o botão para copiar tal conteúdo.

    Um grande abraço, até breve.

    ResponderExcluir
    Respostas
    1. Adriano, já atualizei.
      Obrigada!
      Atenciosamente

      Excluir
  25. era o que eu precisa muito obrigado Elaine continua com o teu trabalho tenho aprendido muito sempre que visito a tua pagina...

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…