Menu padrâo do blogger personalizado



Oii cherries, sabe aquele menu horrível do blog? É aquele que tem no blogger quando você cria, então nesse tutorial vou ensinar a vocês a personalizá-lo.Ficará parecido com o do Go Imagine.






Vá em "Editar HTML" e clique em Ctrl + F ou F3 e procure por:

/*Tabs

Você vai achar algo como 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);
}


Depois de procurar, substitua por isso

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

OBS: onde estiver de azul mude de acordo com seu blog e onde está escrito font: $(tabs.font), apague $(tabs.font) e coloque a fonte que quiser.

Ex: font: Trebuchet

Foi testado só no modelo Travel, visualize primeiro se gostar salve se não exclua as alterações. Créditos ao Go Imagine.

9 comentários:

  1. Já to lhe seguindo! bjo
    http://apenaas-uma.blogspot.com.br/

    ResponderExcluir
  2. Adorei as dicas ,vou usar muito porque eu tô "reformando" o meu blog!! Acho que vai ficar mais fofo :)

    Segue?

    http://criticascomblablabla.blogspot.com.br/

    ResponderExcluir
  3. Este comentário foi removido pelo autor.

    ResponderExcluir
  4. Usei o tuto no meu blog, ficou legal, mas o primeiro botão ficou sem o efeito hover, o q eu faço?

    ResponderExcluir
  5. Anah, grato pela dica! Ficou muito legal em meu blog.
    Qualquer coisa, passa por lá, podemos até formar uma parceria.
    http://www.fredericolima.com/

    ResponderExcluir
  6. Amei o seu blog!Usei ficou bem legal!
    http://chovendoglitteremparis.blogspot.com.br/

    ResponderExcluir
  7. estou me inpirando em voce para fazer meu blog, muito lindo o seu blog adoro ja estou segindo o seu , se quiser visitar esse e o meu confissoesnadapopulares.blogspot.com

    ResponderExcluir
  8. oie me ajuda não achei o /*Tabs por favor me ajuda ou faz um video explicando para quem não sabe direito

    ResponderExcluir