5 Personalizando menu páginas do blogger

Olá gatinhas, tudo bom hoje eu trouxe um tutorial super fácil lembrando que não foi eu que criei o código!
O código original e da Anny do Go Imagine modificado pelo Bloguinho Cute  os créditos vão pra elas!
Vamos ao tutorial!

CLIQUEM LEIA MAIS...





Vá em modelo- editar html -prosseguir dê crtl+ F e procure 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);
}

Agora substitua por um dos códigos abaixo:

Opção 1 Menu redondo:


/* 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: 200px; /*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: #9370D8; /*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: #FFB6C1; /*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*/
}




Opção 2 menu quadrado:


/* 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: 200px; /*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: 5px; /*bordas arredondadas, apague a linha se n quiser*/
line-height: 5px;
padding: 12px;
background:#FF78C7; /*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: #C0D9D9; /*cor do fundo hover/selecionado*/
color: #fff; /*cor da fonte*/
border-radius: 5px; /*bordas arredondadas, apague a linha se n quiser*/
line-height: 5px;
padding: 12px; /*espaçamento interno*/
}



Vocês podem está modificando as cores usando essa tabela Aqui .
Beijos e Feliz ano novo a todos os meus leitores
OBS> testado somente modelo viagem-travel



5 comentários:

  1. Oi Jana , obriigada por postar aqui :)
    De repente uso no meu próximo layout ..

    ResponderExcluir
  2. Obrigada pelas dicas maravilhosas!
    Um ano maravilhoso para vc e família!
    Beijos^
    http://zenafashion.blogspot.com.es/2012/12/look-camisa-listrada.html

    ResponderExcluir
  3. olá flor que legal as dicas são ótimas beijos e retribuindo a visita la no blog beijão ótima semana .

    ResponderExcluir
  4. Gostaria de saber como se muda a fonte? tem que colocar código?
    Beijos :3

    http://entreerroseacertosoficial.blogspot.com.br/

    ResponderExcluir
  5. Primeiro tutorial que eu consigo fazer sem dificuldade!!!! Muito obrigada! Sério!
    ♥♥♥
    http://natalibispo.blogspot.com.br/#

    ResponderExcluir

Comente com educação .
Aceito criticas construtivas ajuda a melhorar o blog.
Retribuo comentários deixa seu link que eu vou te visitar ^^
beijos

imagem-logo