Personalizar menu padrão do blogger

Olá gente!

A Verônica, do Blog da Vevê me pediu pra ensinar a fazer um menu igual ao meu. Então vou ensinar vocês tá?

Antes de tudo devo dizer que você precisa ter aquele menu padrão do blogger, porque o que vou ensinar é uma personalização. O tutorial original é do Go Imagine, mas eu resolvi fazer uma mudanças como background e efeito hover. Vamos lá?

No HTML do seu blog procure por:

/* Tabs

Dele deve estar mais ou menos assim:

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

Substitua todo esse código por esse: 

/* Menu do blogger personalizado
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
margin-top: 400px; /*para subir ou descer o menu troque o número*/
margin-left: 20px; /*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-family: Dosis; /*fonte*/
font-size: 20px;
border-radius: 50px; /*bordas arredondadas, apague a linha se n quiser*/
line-height: 5px;
padding: 15px;
background: url(URL DO BACKGROUND) repeat; /*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*/
}

Faça as mudanças necessárias.
Onde está URL DO BACKGROUND, coloque o url de uma imagem para ser o plano de fundo do menu.

Tomara que vocês consigam fazer.
Beijos e até a próxima.