Papo de Colegas: Personalizar menu padrão do Blogger

Hoje eu vou ensinar uma coisinha que eu aprendi no blog da Anny : como personalizar o menu padrão do blog (aquele horroroso, que ninguém suporta!) é bem facil e leva menos do que 5 minutos. Além de deixar seu blog ainda mais lindo!

O resultado vai ser mais ou menos assim:

Como fazer :

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

}

Você, copia e apaga todo esse código e no local, coloca esse:

/* Menu do blogger personalizado by Go Imagine - goimagines.blogspot.com

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

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

}

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

}

___________________________________________________________________

PS: Em margin-top números positivos descem e negativos sobem e no margin-left números negativos vão para a esquerda e positivos para a direita.

PS-2: UPDATE 16/12/12: Após seguir o tutorial você deve adicionar ao seu template (caso ainda não o tenha) o gadget Páginas disponibilizado pelo próprio Blogger. Pra adiciona-lo vá em layout > adicionar um gadget >páginas.

Que tenham gostado. Creditem, se pegar :)