Como personalizar o menu do blog

 

Oi gente tudo bom? trouxe um tutorial divino pra vocês :3 que como personalizar o menu do blog, mas o que é menu do blog? e onde tem as paginas (inicio, contato, por exemplo) vejam o exemplo abaixo: 

Depois de personalizado o menu vai ficar mais ou menos igual o meu... então vamos ao tutorial!

Primeiro vá em modelo> editar HTML > Aperte ctrl+f e procure por  /* Tabs

você vai encontrar o seguinte código abaixo:

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

Apague todo o código acima e substitua por este:


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

 Lembrando que no margin-top números positivos descem e negativos sobem. Já no margin-left números negativos vão para a esquerda e positivos para a direita.

Viu como é  facíl gente? *-*  Então é isso galera beijos! ;D

 Créditos á Goimagine e Bloguinho Cute