Tutorial: personalizando o menu do blog

Oii lindinhas!

A pedido de uma leitora muito querida do blog, hoje vim fazer um tutorial de como colocar o menu do blog e como personalizar ele! vamos começar

Como colocar!

1º - Vá no Layout e do seu blog. e no lugar que você quer que fique o menu, clique em *Adicionar gadget* e na pequena aba que vai abrir escolha o Gadget de "paginas"

2º - Quando você clicar no "+" vai aparecer assim (como mostra a imagem) e é você clica em "Salvar"

3º - Agora vá em "Páginas"

4º - Quando você clicar vai aparecer assim:  agora é só clicar em "Nova página" e escrever

Pronto agora você já tem o Menu no seu blog! agora vamos aprender a personalizar!

Vá  em Modelo>> Editar HTML>> e presione Ctrl+F e na caixa de pesquiza que vai aparecer cole:

/* Tabs

E ele vai localizar o código! e logo abaixo dele vai ter algo 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);

}

Apague esse código e substitua por 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*/

Agora é só fazer as alterações necessárias.