Personalize o menu padrão do blogger

Hey gente. Bom, como muitos sabem o menu padrão do blogger é horrivel , não é ? Com esse fato, resolvir trazer um tutorial aqui de como personalizar o menu padrão do blogger . 

O primeiro dessa serie de tutoriais que vou postar é como personalizar o meu padrão do blog, conhecido também como guias. Esse menu é extremamente horroroso em todos os layouts base do blogger e esse tutorial é super fácil de usar e deixa ele muito mais bonito. 

Esse tutorial eu vi no Go Imagine, porem eu adaptei os códigos  pois o que esta disponível lá, não é exatamente o que eu estava procurando. Então para ninguém vim me acusar com relação aos créditos, esse menu é inspirado no que a Alana criou, mas é modificado por mim. 

Se quer aprender, clique em continue lendo . 

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.

É isso gente, espero que tenham gostado, tá ? Beijos *-*