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!

acho fofo esse menu ^^
ResponderExcluirs2hay.blogspot.com
Difícil ver um tutorial por aqui, rsrs. Muito lindinho esse menu [=
ResponderExcluirfashion em cores
Que gracinhaaa!!! *-*
ResponderExcluirBeijo,
www.estanteseletiva.com
Adorei, =] eu adoro esse tipo de menu, aliais é o mais lindo :D
ResponderExcluir#Volte logo!
Bikoti.blogspot.com.br
Legal esse Menu *-*
ResponderExcluirperfeitateen.blogspot.com.br/
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!
ResponderExcluirwww.vitrola3000.com
Lindo !!! - book-cookies.blogspot.com.br
ResponderExcluirAdorei 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???
ResponderExcluirHeey! 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??
ResponderExcluirhttp://garotaasdoavesso.blogspot.com.br
no meu não tem isso /* Tabs :((((((((((((((((((
ResponderExcluir