menu blog fino

Na imagem abaixo vocês podem conferir como é e como vai ficar depois do tutorial. 

Entre no seu html é procure por /* Tabs, abaixo você encontrará algo parecido a 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); 
}

Feito isso, substitua todo esse código por esse aqui:

/* Menu do blogger  

----------------------------------------------- */

.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;

}

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

line-height: 5px;

padding: 12px; } 

.tabs-inner .widget li.selected a, 

.tabs-inner .widget li a:hover { 

position: relative; 

z-index: 1; 

line-height: 5px;

padding: 12px; /*espaçamento interno*/

}

Depois é só fazer qualquer alteração que achar necessária, as cores e fontes são alteradas pelo designer de modelo do blogger.