Tutorial de como alterar Menu Blogspot

1. Como encontrar o código:

1.1 Logue no blogger: www.blogger.com
1.2 Clique em ‘Layout’ na lateral esquerda
1.3 Em Pincipal, encontre o bloco com HTML e clique em ‘Editar’ (pode haver uma coluna na direita além dos itens da imagem abaixo)
1.4 Faça um backup, copiando todo o código e salvando em um bloco de notas, word ou notepad++.

2.  Baixe e instale o NotePad++ ou outro editor HTML de sua preferência
Para baixar o NotePad++ acesse: https://notepad-plus-plus.org/repository/7.x/7.2.2/npp.7.2.2.Installer.exe
O que vamos fazer a seguir da para ser feito até mesmo no editor do Blogger, mas com este programa conseguirá visulizar melhor, e será mais simples.

3. Como alterar a cor do Menu

3.1 Acesse um local para pegar as cores, por exemplo:
http://erikasarti.net/html/tabela-cores-seguras-web-safe/
http://www.colorpicker.com/

3.2 Faça um backup do código do menu e abra segunda cópia no NotePad++

3.3 Digite Ctrl+F e busque pelo item que deseja alterar, subistitua a cor que está ANTES do termo buscado, exemplo:
/*COR DA BORDA INFERIOR
Na imagem abaixo onde deverá trocar a cor está com fundo cinza mais escuro para visualizar melhor.
#numeracao é o código da cor, troque o atual pela cor desejada.Linha que divide os menus: /*COR DE BORDA SUBMENU*/
Triângulos (aparece duas vezes): /*COR TRIANGULO*/
Cor do SubMenu sem passar o mouse: /*COR DE FUNDO SUBMENUS*/
Cor do SubMenu ao passar o mouse: /*COR DE FUNDO SUBMENUS HOVER*/
Cor do Sub SubMenu ao passar o mouse: /*COR DE FUNDO SUBMENUS NÍVEL 2*/

3.4 Teste:
3.4.1. Salve com nome desejado e tipo html
3.4.2. Vá no menu: Executar > lanche in (selecione seu navegador) para ver como ficou

3.5 Após terminar de alterar todas as cores e testar, atualize o que foi feito no blogger
3.5.1. Copie todos o código no NotePad+
3.5.2. Apague todo o código do Blogger
3.5.3. Cole o código Novo
3.5.4. Clique em ‘Salvar’

4. Como adicionar um novo tema/submenu:

4.1 Faça um backup do código do menu e abra segunda cópia no NotePad++

4.2 Vá até o BLog abra a página que deseja inserir no menu, e encontre onde quer incluir o novo menu.
Vou colocar por exemplo o menu “Teste” dentro de ’15 anos’, abaixo de ‘Balada Neon’.

4.3 Digite Ctrl+F e busque pelo item acima do que deseja inserir, no meu caso procuro ‘balada neon’

4.4 Selecione a linha, linha acima e linha abaixo (De <li> á </li>)

4.5 Copie a linha seleciada acima e cole.

4.6 Altere o Nome e a URL

4.7 Salve e Teste
4.7.1. Salve com nome desejado e tipo html
4.7.2. Vá no menu: Executar > lanche in (selecione seu navegador) para ver como ficou

4.2 Após testar se estiver correto:
4.2.1. Copie todos o código do NotePad++
4.2.2. Apague todo o código do Blogger
4.2.3. Cole o código Novo
4.2.4. Clique em ‘Salvar’

5. Como adicionar um novo tema/submenu sendo o último da linha:

5.1 Faça um backup do código do menu e abra segunda cópia no NotePad++

5.2 Vá até o Blog abra a página que deseja inserir no menu, e encontre onde quer incluir o novo menu.
Vou colocar por exemplo o menu “Teste” dentro de ’15 anos’, abaixo de ‘Simpsons’.

5.3 Digite Ctrl+F e busque pelo item acima do que deseja inserir, no meu caso procuro ‘simpsons’

5.4 Selecione a linha, linha acima e linha abaixo (De <li class=”last”> á </li>)
5.5 Copie a linha selecionada acima e cole.
5.6 Altere o Nome e a URL do item copiado (terão dois iguais, mude no de baixo)
5.7 No menu que antes era o último (no meu exemplo o Simpsons) no inicio dele tem <li class=”last”> troque por <li>

Observe, que o menu novo que criei ‘Teste 2’ está abaixo do Simpsons e com <li class=”last”>.

5.8 Salve e Teste

5.8.1. Salve com nome desejado e tipo html
5.8.2. Vá no menu: Executar > lanche in (selecione seu navegador) para ver como ficou

5.9 Após testar se estiver correto:
5.9.1. Copie todos o código do NotePad++
5.9.2. Apague todo o código do Blogger
5.9.3. Cole o código Novo
5.9.4. Clique em ‘Salvar’