19 março 2013

Personalizar menu padrão do blogger


Tumblr_mj404ywm4h1qkkhk6o1_500_large

Olá gente!
A Verônica, do Blog da Vevê me pediu pra ensinar a fazer um menu igual ao meu. Então vou ensinar vocês tá?
Antes de tudo devo dizer que você precisa ter aquele menu padrão do blogger, porque o que vou ensinar é uma personalização. O tutorial original é do Go Imagine, mas eu resolvi fazer uma mudanças como background e efeito hover. Vamos lá?


No HTML do seu blog procure por:
/* Tabs
Dele deve estar mais ou menos assim:
/* Tabs
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
}
.tabs-inner .section {
margin: 0;
}
.tabs-inner .widget ul {
padding: 0;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}
.tabs-inner .widget li {
border: none;
}
.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
color: $(tabs.text.color);
font: $(tabs.font);
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
color: $(tabs.selected.text.color);
}

Substitua todo esse código por esse: 
/* Menu do blogger personalizado
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
margin-top: 400px; /*para subir ou descer o menu troque o número*/
margin-left: 20px; /*para afastar o menu para esquerda ou direita troque o número*/
}
.tabs-inner .section {
margin: 0;
}
.tabs-inner .widget ul {
padding: 0;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}
.tabs-inner .widget li {
border: none;
}
/*Estado normal do menu*/
.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
color: #fff; /*cor da fonte*/
font-family: Dosis; /*fonte*/
font-size: 20px;
border-radius: 50px; /*bordas arredondadas, apague a linha se n quiser*/
line-height: 5px;
padding: 15px;
background: url(URL DO BACKGROUND) repeat; /*cor do fundo normal*/
margin-left: 8px; /*espaço entre os botões*/
}
/*Estado hover e selecionado*/
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: #8BC2C9; /*cor do fundo hover/selecionado*/
color: #fff; /*cor da fonte*/
border-radius: 50px; /*bordas arredondadas, apague a linha se n quiser*/
line-height: 5px;
padding: 12px; /*espaçamento interno*/
}
Faça as mudanças necessárias.
Onde está URL DO BACKGROUND, coloque o url de uma imagem para ser o plano de fundo do menu.

Tomara que vocês consigam fazer.
Beijos e até a próxima.

48 comentários:

  1. Oi nah! Pena que meu menu não é padrão do blog :( se não eu usaria :) Adoro seu blog!!

    Convido você e seus leitores para participarem do me blog também: http://www.misturamadaju.blogspot.com.br/

    Ta rolando um sorteio lá!

    Beijos Ju

    ResponderExcluir
    Respostas
    1. Obrigada Julia. Já visitei seu blog e achei lindooo!

      Excluir
    2. http://adrianocds123.blogspot.com.br/

      Excluir
  2. Eu Baixei aquele seu layout free é já veio com esse menu ..Mas só tem inicio ...Como eu faço pra colocar outras coisas ? ...
    Tipo Goodies e tals ?

    ResponderExcluir
    Respostas
    1. Vc precisa criar mais páginas para seu blog.
      No Perfil do blogger, clique em Páginas e crie novas páginas, assim elas aparecerão no menu.

      Excluir
  3. Muito legal o tutorial :)
    Foi de grande ajuda!

    ResponderExcluir
  4. Adoro esse tutorial ^^
    http://manguitarosa.blogspot.com.br/
    beijooos

    ResponderExcluir
  5. Fica muito fofo. ;3
    Eu até mudava,mas acabei de fazer uma mudança no meu lay e vou acrescentando aos poucos novas coisas e ele vai ficando mais acolhedor. ;)

    Bjs
    Hayanne Deise Lins
    *Profissão Adolescente*
    >>Facebook<<
    >>Twitter<<

    ResponderExcluir
  6. Oi estou com problema serio com meu blog nao sei personaliza nada vou deixa meu contato para me ajudar ..conto com vc
    Skype:matheusazevedo931103
    Twitter:@00matheusfelipe
    E-mail: matheusfelipe_00@hotmail.com
    Espero por você .')

    ResponderExcluir
  7. Estava procurando faz tempo, obrigada! :)

    ResponderExcluir
  8. Obg! Ele ficou direitinho mas o fundo (não o que fica escrito no texto) fica cinza! Oq faço?

    ResponderExcluir
  9. Não encontrei o código "Tabs", mesmo depois de adicionar o gadget páginas :/
    O que pode ser?

    ResponderExcluir
  10. Não consegui achar na nova interface do blog ! Qual e o widget

    ResponderExcluir
  11. Queridos leitores, devido às atualizações do blogger, alguns tutoriais estão dando erro, mas antes de tudo, verifique se o código está expandido para poder encontrar todos os códigos.

    ResponderExcluir
    Respostas
    1. Nah, o meu ficou com um fundo cinza, o que eu faço ? Pf Pf ajuda linda, Obg.

      Excluir
  12. Legal, consegui fazer, só que fica aquela camada transparente atrás do menu. Me ajudaaa por favor =3!
    se puder, visite meu blog: http://pequena-lara.blogspot.com.br

    ResponderExcluir
  13. Oi olha só, no meu html não tem TABS e também não estou achando o código do menu. Não consigo colocar nenhum menu, na verdade, queria o menu dentro de uma caixinha e em cima dos posts mas não consigo :(

    ResponderExcluir
  14. Oi Nah!
    Então, estou tentando fazer esse menu, mas o meu está ficando estranho...
    Parece que ele ta "comendo" a imagem, o que eu faço?
    Deixarei o link abaixo para você entender o que estou dizendo.
    http://garotaliber2.blogspot.com.br/
    Beijos

    ResponderExcluir
    Respostas
    1. Roberta, eu dei uma olhada lá e não entendi o que vc me disse. Tá um menu normal!

      Excluir
  15. Olá!!
    Como eu faço para dar espaço entre os links nesse menu??
    obrigado =D

    ResponderExcluir
  16. http://jessica--magalhaes.blogspot.com.br/2013/04/personalizar-menu-padrao-do-blogger.html
    http://jessica--magalhaes.blogspot.com.br/2013/04/rodape-do-vlog-personalizado.html
    te plageiam...

    ResponderExcluir
  17. Oie Nah,

    Estou tentando personalizar o meu blog, porém não sei nem por onde começar...estou totalmente perdida neste sentido. Tem como você me ajudar?
    Email: graziellalvesmota@hotmail.com
    Blog: graziellamota.blogspot.com.br

    Beijos

    ResponderExcluir
  18. o meu esta dando erro na primeira linha o que faço

    ResponderExcluir
  19. Visitem meu blog *--*
    http://elelefantevoador.blogspot.com.br/

    Ele ainda precisa de alguns ajustes, então, se acharem que falta alguma coisa, mandem um comentário por favor.


    PS: Valeu mesmo pelo post Nat, achei ele ótimo!! c:

    ResponderExcluir
  20. Oi nah meu background não aprece vc sabe se tem outra forma?

    ResponderExcluir
  21. Muito bom seu Blog.
    voce sabe como fazer o menu ficar com aquela barra do lado e qundo clicar aparecer as opçoes. ??
    dar um olhada no meu.
    http://imoveismanausbb.blogspot.com.br/
    quero por esta barras ao lado de cada nome do menu.

    ResponderExcluir
  22. Adorei a dica, você explica super bem :)
    Quero te convidar para visitar o meu blog e me ajudar na minha meta de 250 seguidores, pode colaborar?

    Beijos, Julia.

    julia-nopaisdasmaravilhas.blogspot.com

    ResponderExcluir
  23. otimo tutorial! Deu certinhoo... só que no meu fica aparecendo o background padrão, mexi em td o codigo e não consegui tirar, vc sabe? bjos

    ResponderExcluir
  24. no meu html não encontro o /*tabs :

    ResponderExcluir
  25. Na tem como você me ajudar? eu fui fazer e acabei mexendo em algo que estraguei o que eu tinha de menu agora ele está largo feio com um espaço enorme entre o logo do blog e o menu!
    Por favor aguardo seu contato carlinhaeb@msn.com
    ME AJUDAAA :)

    ResponderExcluir
  26. Ótimo Tutorial !
    Estou usando ele só que tive que alterar, porque em monitores maiores e menores o MENU ESTAVA INDO PARA O LADO ESQUERDO "NÃO CENTRALIZAVA".

    TUTORIAL:
    ----------------------------------------------- */
    .tabs-inner {
    margin: 1em 0 0;
    padding: 0;
    margin-top: 400px; /*para subir ou descer o menu troque o número*/
    margin-left: 20px; /*para afastar o menu para esquerda ou direita troque o número*/
    }
    EXCLUIR:
    ----------------------------------------------- */
    margin: 1em 0 0;
    padding: 0;
    E
    margin-left: 20px; /*para afastar o menu para esquerda ou direita troque o número*/
    ESTOU USANDO:
    ----------------------------------------------- */
    .tabs-inner {
    margin-top: 400px; /*para subir ou descer o menu troque o número*/
    }


    Não estou criticando, só quero AJUDAR COMO NATÁLIA NÓS AJUDOU, PARABÉNS PELO SEU BLOG SHOW!

    VISITE: www.vinnypublicidade.blogspot.com.br

    ResponderExcluir
  27. no meu não encontrei o /*tabs:s
    me ajude o que eu faço??????

    ResponderExcluir
  28. Moça, Eu fiz tudo certinho , mas fica o menu verdadeiro e feio em baixo? pode me dizer oque eu errei?

    ResponderExcluir
  29. Poxa.. eu não consegui mais visitem o blog
    http://welovefashionteen.blogspot.com.br/
    bjussssssssssssss

    ResponderExcluir
  30. Amei mas eu queria saber uma coisa..
    em que tamanho mais ou menos tem que ser meu cabeçalho para encaixar direitinho no blog??
    me responde por favor

    ResponderExcluir
  31. Oi, o meu html também não tem /*tabs :s

    ResponderExcluir
  32. Pelo amor de Deus . Eu queria sua ajuda pois eu so nova quero muito cria meu blog , mais tipo não sei esse negócio de HTML , porfavor me ajuda me add no Isadora Ito

    ResponderExcluir
  33. Não encontra o /* Tabs :(
    visitem meu blog gatinhas :D
    http://blogimfashionista.blogspot.com.br

    ResponderExcluir
  34. Oi Nah to amando teu blog, posso coloca-los no meu blog como preferidos? bjoos
    http://meninnadebatom.blogspot.com.br/

    ResponderExcluir
  35. Oi Natália! Eu consegui fazer tudo como explicado neste post. Só não sei o porquê de o menu só aparecer se a seta do mouse passar por cima, caso não ele fica invisível.

    Me ajuda?! Obrigada!

    ResponderExcluir

© Blog da Nah | Oficial - 2012. Todos os direitos reservados. Criado por: Natália Médice. Tecnologia do Blogger. imagem-logo