Personalizando o menu do Blogger

14/11/2012

 Tumblr_mdfqvtivhi1re4amro1_500_large 

Faz um bom tempo que eu não posto tutoriais aqui no blog né? Mais no post de hoje, vou ensinar a personalizar o menu padrão do blogger. O tutorial é do blog Go Imagine, então os créditos são de lá. O resultado será mais ou menos esse:

(Imagem do blog Go Imagine)




1) Vá no Painel do Blogger > Modelo > Editar HTML > Ctrl + F e procure por:

/* Tabs

2) Abaixo dessa tag, vai ter algo parecido com isso:

/* 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);
}

3) Substitua todo esse código por esse:

/* Menu do blogger personalizado by Go Imagine - goimagines.blogspot.com
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
margin-top: 0px; /*para subir ou descer o menu troque o número*/
margin-left: 0px; /*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: $(tabs.font); /*fonte*/
border-radius: 50px; /*bordas arredondadas, apague a linha se n quiser*/
line-height: 5px;
padding: 12px;
background: #BFCED5; /*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 alterações necessárias e visualize, se estiver tudo certo salve!

10 comentários:

  1. acho fofo esse menu ^^
    s2hay.blogspot.com

    ResponderExcluir
  2. Difícil ver um tutorial por aqui, rsrs. Muito lindinho esse menu [=
    fashion em cores

    ResponderExcluir
  3. Que gracinhaaa!!! *-*

    Beijo,
    www.estanteseletiva.com

    ResponderExcluir
  4. Adorei, =] eu adoro esse tipo de menu, aliais é o mais lindo :D

    #Volte logo!
    Bikoti.blogspot.com.br

    ResponderExcluir
  5. Legal esse Menu *-*
    perfeitateen.blogspot.com.br/

    ResponderExcluir
  6. Muito bom o tutorial, e como é fácil né? O resultado fica muito bom, até eu que ñ estendo nada de html poderia fazer, mais estou satisfeito com o meu!
    www.vitrola3000.com

    ResponderExcluir
  7. Lindo !!! - book-cookies.blogspot.com.br

    ResponderExcluir
  8. Adorei este menu, porém todos os meus títulos de gadgets mudaram e não consigo alterar a fonte deles nem a cor da letra. O que faço???

    ResponderExcluir
  9. Heey! como muda a cor do fundo? Não é acor dos botões não,é a cor do bg! não sei como explicar mas quando eu tentei fazer ficou uma faixa preta e com os botões em cima,onde muda isso??

    http://garotaasdoavesso.blogspot.com.br

    ResponderExcluir
  10. no meu não tem isso /* Tabs :((((((((((((((((((

    ResponderExcluir