Personalizando menu

Hi cherry trouxe um tutorial fácil para vocês achei esse tutorial no blog Go Imagine apenas dei uma mudanças ok,estou passando para vocês pois tive muita dificuldade de acha ele,é um modo simples e fácil de mudar o menu padrão do blog,então vamos para o tutorial.

                                            clique em contiue lendo.

 Atenção:

Como vamos mexer no html recomendo você faça em um blog de testes ok. 

Entre em seu html e de Ctrl + F e procure por /* Tabs você encontrara alguma coisa parecido com 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);
}

Após acha cole este no lugar do código acima:

/* Menu do blogger versão Magna Biju

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

.tabs-inner {

margin: 1em 0 0;

padding: 0;

margin-top: 0px; /*para subir ou descer o menu troque o número*/

margin-left: 200px; /*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:#696969; /*cor da fonte*/

font: $(tabs.font); /*fonte*/

border-radius: 50px; /*bordas arredondadas, apague a linha se n quiser*/

line-height: 5px;

padding: 16px;

background:#CFCFCF; /*cor do fundo normal*/

margin-left: 16px; /*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:#FFB5C5; /*cor do fundo hover/selecionado*/

color: #FFFFFF; /*cor da fonte*/

border-radius: 50px; /*bordas arredondadas, apague a linha se n quiser*/

line-height: 5px;

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

}

Ele mesmo  já diz oque tem fazer ok.No margen-top números positivos descem e negat. sobem e no margen-left negativos é pra esquerda e positivos Direita .Ok

Aqui você terá todos os códigos de cores (WWW).

Gosto comente dúvidas também.

Tchau.