Menu especial para blog

em 23 de janeiro de 2014

Olá, leitor!
Vou compartilhar com você um menu maravilhoso, excelente para economizar espaço, ótimo para deixar o blog limpo e bem organizado.
Esse menu tem um diferencial: ele comporta abas multiníveis, o box de curtir do Facebook, o box de seguidores do Google+ e a caixa de seguidores do Twitter.E também as postagens recentes e os últimos comentários feitos em seu blog.
Além de uma barra de pesquisa.
Inacreditável??
Veja:



 E o melhor de tudo é que a instalação é bem simples, basta um pouco de dedicação e atenção e todo mundo vai conseguir fazer.

Instalar o menu no blog

Para começar, caso você use um dos templates do Design de Modelo do Blogger precisará retirar toda a parte que define a aparência do menu nativo de cada template.
Nos modelos do Design de Modelo essa parte está localizada no código fonte do blog.
Faça assim: clique em Modelo, Editar html e localize esse trecho:

/* Tabs

Apague tudo que estiver desde /* Tabs até encontrar /* Headings, sendo que este /* Headings não deve ser apagado.
Salve a alteração.
Essa ação retira as definições do menu original e prepara seu template para receber o novo menu.
Vamos à ele?

Acesse a aba Layout de seu blog, clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT.
Dentro da caixa que expandir coleeste código:

http://codigos.elainegaspareto.com/2014/02/codigo-do-menu-especial-para-blog-com.html


Agora preste bastante atenção ao que vou explicar!
No código você encontra os lugares onde precisa preencher com seus endereços do perfil Google+, o endereço da fanpage de seu blog e seu username do Twitter.
Os dois primeiros (perfil G+ e fanpage) basta você copiar o endereço e colar no local indicado.
No meu caso este é o endereço do meu perfil G+: https://plus.google.com/u/0/+ElaineGasparetoParada
E este é o endereço da fanpage do blog: https://www.facebook.com/ElaineGaspareto

Mas no caso do Twitter será preciso ir até este site:
http://www.musicpaax.com/twitter/
E gerar lá o aplicativo que possibilita ter o box com os seguidores do Twitter.
Caso você já tenha feito isso em alguma ocasião não precisa refazer, mas se nunca gerou esse box do Twitter precisará fazer agora.
À partir daí basta colocar seu username do Twitter no local indicado e o box aparecerá.
Não adianta só colocar o username, tem que gerar o aplicativo no site, e somente depois disso colocar o username no local indicado no código, ok?

Depois de completada essa parte você deve configurar as abas do menu.
Você pode colocar quais links desejar. No meu exemplo eu coloquei os links para meu blog, para meu portfólio e para a Galeria de blogs.
Você pode colocar o que desejar, e dar às abas o nome que desejar.
Feito isso seu menu está pronto.
Salve e arraste para baixo do cabeçalho de seu blog.

Tem uma posição exata que permitirá que o menu abra exatamente como o meu: tem que ser imediatamente abaixo do cabeçalho.
Faça testes até achar o lugar exato, ok?
Depende de cada template, por isso terá que testar.
Nos testes que fiz deu certo também colocar no footer, ou rodapé do blog.
Como eu disse, faça testes.

Dicas extras:
Todas as cores podem e devem ser trocadas para combinar com seu blog.
Cores sempre são definidas por códigos hexadecimais precedidos do sinal #.
Sempre que esse sinal aparecer no código será seguido de um código hexadecimal que define a cor.
Portanto, para trocar as cores basta trocar os códigos.
Aqui tem uma tabela de cores com seus respectivos códigos.
Escolha os que mais combinam com seu blog, faça as substituições e salve.

Releia o tutorial até se certificar de haver entendido tudo.
Caso tenha dúvidas deixe nos comentários e na medida do possível eu tentarei ajudar, desde que a resposta já não esteja no próprio tutorial.

http://www.elainegaspareto.com/p/contato_27.html
Gostou, quer ter em seu blog mas não tem tempo ou paciência para fazer?
Escreva pra mim, nós combinamos o valor e eu faço rapidinho pra você!


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.

24 comentários , comente também!

  1. Olá Elaine, adoro suas dicas para blogs, já usei vários tutoriais e queria fazer um pedido, ensina a gente à colocar um botão de subir e descer a página do blog igual ao seu? Obrigada!

    ResponderExcluir
  2. Olá Elaine,
    te enviei um email.
    Estou aguardando resposta.
    Xerocas

    ResponderExcluir
  3. Oi Elaine,
    Isto é grego para mim!!!
    :(
    Bjs e um ótimo final de semana para vc.

    GOSTO DISTO!

    ResponderExcluir
  4. Olá, Elaine, tudo bom?

    Respondi ao teu e-mail, já faz um tempinho...

    Obrigada.

    ResponderExcluir
  5. Olá, Elaine, tudo bom?

    Eu respondi ao teu e-mail, já vaz algum tempo, sobre vaga para assessoria.

    Obrigada.

    ResponderExcluir
  6. Oi Elaine, gostei muito desse menu, vou usar no meu blog, na parte do twitter para eu colocar foi diferente do jeito que você explicou, tive que modificar algumas coisas mais agora está funcionando vlws e obrigado e fique com Deus....

    ResponderExcluir
  7. Esse codigo esta bloqueado, coloca a opção de copiar pra gente !
    Bjus

    ResponderExcluir
    Respostas
    1. Jaqueline, para copiar o código pare o mouse sobre ele e clique no primeiro ícone que aparecer.
      Explico isso no tutorial.
      beijos

      Excluir
  8. Elaine,
    Não encontrei estes códigos * Tab e * Headings no html do modelo do meu blog. Li todas as linhas e não encontrei.
    O meu é blogger. Se puder responder ficaria grata !

    ResponderExcluir
    Respostas
    1. Manati, eu olhei seu blog e ele tem os trechos sim, seu template é o Viagem, nativo do Blogger.
      Está bem no começo, procure de novo, tenho certeza que achará.
      beijossss

      Excluir
  9. Respostas
    1. Meri, experimente o código que atualizei aqui:
      http://codigos.elainegaspareto.com/2014/02/codigo-do-menu-especial-para-blog-com.html

      E se for o caso lembre de alterar o cabeçalho, trocando true por false e abrindo espaço para mais um gadget, trocando 1 por 4 no código fonte.
      Pode ser isso...
      beijossss

      Excluir
  10. Boa noite!
    Os dois códigos são colocados um após o outro ou tem um local específico? Colocando apenas o último, aparece os menus, porém quando coloco os dois em sequência, é bloqueado e até mudou o estilo do meu blog.
    Ah... parabéns pelo Blog, adorei!

    http://cadernodefarmacia.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Patrícia, eu modifiquei a forma de copiar os códigos, veja aqui o código atualizado:
      http://codigos.elainegaspareto.com/2014/02/codigo-do-menu-especial-para-blog-com.html
      Não esqueça de ler o tutorial e ver se está colocando os endereços certinhos, tá?
      beijos

      Excluir
  11. Olá Eliane, estou tentando organizar meu blog com um menu com abas mas o seu não está funcionando no meu ora sai sem cor ora aparece o menu mas não as sub abas, se puder me ajudar fico grato meu blog é profpaulorogerioareias.blogspot.com.br

    ResponderExcluir
  12. Menu interessante, mas gosto do meu menu do jeitinho que está (você que fez, lembra? rsrsr)
    bjos e ótima dica...

    ResponderExcluir
  13. Olá Elaine... Estou tentando encontrar "/* Tabs" mas não consigo :( Já tentei até no ctrl + f e nada

    ResponderExcluir
    Respostas
    1. É que no seu template, que é um dos modelos de Visualização Dinâmica, não existe a possibilidade de editar o código fonte.
      Infelizmente não vai poder inserir nada nesse modelo...

      Excluir
  14. Elaine, não consegui exibir as sub páginas. O que eu faço?

    ResponderExcluir
    Respostas
    1. Bia, como eu não sei a forma que você procedeu não tenho como ajudar.
      Sugiro que releia o tutorial e veja se não esqueceu nada.
      Caso tenha mesmo feito tudo certo e ainda assim não consiga pode ser que seu template não aceite o menu.
      Caso realmente queira envie um email pra mim, se for possível nós combinamos o valor e eu faço pra ti.
      beijosss

      Excluir
  15. Olá!!
    Adorei seu blog e estou amando as dicas!
    Porém, estou tendo algumas dúvidas, por exemplo:
    1) Quero colocar os meus posts anteriores em uma das opções do menu, como faço?
    2)Como colocar opções em um dos itens do menu? (pra fazer descer aquela janelinha com opções quando a pessoa cega com o mouse perto do item)
    3) Tem como trocar a fonte dessas barras que você colocou à disposição? gostei muito do estilo, mas gostaria de manter minha fonte.

    Me ajuda por favor!!!

    ResponderExcluir
  16. Olá Elaine adorei seu blog e seus tuto...Queria saber se esse menu com tudo, pode virar um menu rolante no topo. Tipo aquele que vc ensinou.

    Bjocas

    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…