OLá caramelos de uva tudo bem? bom o tutorial e super hipermega mega legal e de como personalizar aquele menu feio do Blog. irá ficar igual o meu. eua achei o gódigo no Goimagine mas eu o deixei muito mais facil, e retirando aquele fundo que e mais horrorozo ainda! quer aprender vem comigo.
vá em modelos> editar HTML > Clique em Ctrl+F e pesquise por:
/* Tabs
E apague toda essa parte
/* 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);
}
----------------------------------------------- */
.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);
}
E substitue por:
/* Menu do blogger personalizado by Go Imagine modificado por Bloguinho Cute
----------------------------------------------- */
.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;
}
.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*/
}
----------------------------------------------- */
.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;
}
.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*/
}
E lembre-se
Lembrando que no margin-top números positivos descem e negativos sobem. Já no margin-left númerosnegativos vão para a esquerda e positivos para a direita.
caso queira com o fundo cole esse código abaixo de padding: 0;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
E só, beijos bye!
créditos á Goimagine e Bloguinho Cute
Lindo o menu eu consegui fazer no meu. obrigado!
ResponderExcluirhttp://depoisdodesfile.blogspot.com.br/
Que bom que conseguiu!
ExcluirBeijos
Otimo tutorial! Adorei seu blog, super legal!
ResponderExcluirhttp://garotapetulante.blogspot.com.br
Obrigad a queria, volte mais vezes! e já vou dar uma olhad a no seu blog.
ExcluirBeijos,
oii adorei seu blog já estou seguindo!! passa no meu http://mayalbuquerquegama.blogspot.com
ResponderExcluirse vc gostar vou adorar te ver seguindo
Haha,adorei o blog e claro to seguindo se possivel visita e segue o meu por favor,ta no começo mais to fazendo o possivel pra pelo menos chegar aos seus pés né gata! Obgd
ResponderExcluirhttp://descedosaltto.blogspot.com.br/
Wlw pela dica, conseguir atualizar o meu!
ResponderExcluirMe ajudou muito .Você pode visitar?Ao proposito adoro o blog...
ResponderExcluirwww-doce-menina.blogspot.com
www-rosa-chclete.blogspot.com
bjos
no meu deu erro, quando eu colocava o código do menu o titulo do gadget ficava todo erradoo!!! :/
ResponderExcluirBlog Muiito #Legal,Deu Certo O Tutorial Beijinhos
ResponderExcluirooi , sou novo em Blogs e não entendo muito bem haushau'
ResponderExcluirEntão sempre que tento fazer isso nao consigo ! Não consigo dizitar a palavra /*Tabs Aparece um 0 .
Não consigo msmo :'(
Ameeei , muito obrigada ! :D
ResponderExcluir