Novidades

15 agosto 2012

Tutorial - Personalizar o menu Padrão do Blogger



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



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


substitua o que está descado em roxo!

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

12 comentários:

  1. Lindo o menu eu consegui fazer no meu. obrigado!
    http://depoisdodesfile.blogspot.com.br/

    ResponderExcluir
  2. Otimo tutorial! Adorei seu blog, super legal!

    http://garotapetulante.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigad a queria, volte mais vezes! e já vou dar uma olhad a no seu blog.

      Beijos,

      Excluir
  3. oii adorei seu blog já estou seguindo!! passa no meu http://mayalbuquerquegama.blogspot.com
    se vc gostar vou adorar te ver seguindo

    ResponderExcluir
  4. 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
    http://descedosaltto.blogspot.com.br/

    ResponderExcluir
  5. Wlw pela dica, conseguir atualizar o meu!

    ResponderExcluir
  6. Me ajudou muito .Você pode visitar?Ao proposito adoro o blog...
    www-doce-menina.blogspot.com
    www-rosa-chclete.blogspot.com

    bjos

    ResponderExcluir
  7. no meu deu erro, quando eu colocava o código do menu o titulo do gadget ficava todo erradoo!!! :/

    ResponderExcluir
  8. Blog Muiito #Legal,Deu Certo O Tutorial Beijinhos

    ResponderExcluir
  9. ooi , sou novo em Blogs e não entendo muito bem haushau'
    Então sempre que tento fazer isso nao consigo ! Não consigo dizitar a palavra /*Tabs Aparece um 0 .
    Não consigo msmo :'(

    ResponderExcluir

Regrinhas!
1- aceito seguindo segue de volta
2- sem xingamentos! se expresse de uma maneira mais civilizada.
3- aceito criticas e Elogios