Criar menu personalizado para Blogger | Tutorial

Por | Atualizado em 2014-11-25

Criar um menu personalizado no Blogger é muito simples e praticamente dispensa conhecimentos de programação. Você poderá criar um menu vertical, horizontal ou extensível (drop-down).

Os menus são muito importantes pois permitem organizar as suas páginas de uma forma simples e eficiente, facilitando a navegação dos seus visitantes.

Criar menu personalizado para Blogger

1. Antes de começar a criação do seu menu, é recomendado criar um backup do template. Dessa forma, você poderá reverter todas as alterações caso não fique satisfeito com o resultado final.

2. Em seguida, faça o download do programa CSS Tab Designer e instale no seu computador. Execute o programa e no campo “tab Styles” selecione o tipo de menu que irá utilizar.

3. No campo “Itens” clique no botão “+” para adicionar um campo no seu Menu. No campo “Tab Text” digite o texto que pretende exibir no menu, e em “Tab Link” o link de destino. Lembre-se você poderá alterar os links e o texto exibido mais tarde.

criar menu para blogger

Dica: No Blogger, existe um pequeno “truque” que permite organizar todos os artigos por categorias. Para isso, basta adicionar a mesma etiqueta (marcador) em todos os artigos do mesmo tema, e depois direcionar o link do seu menu para:

“http://linkdoseublog.blogspot.com/search/label/nome_da_etiqueta”.

4. Quando terminar de compor o seu menu, clique no botão “Generate HTML & Images”. Agora, aceda ao diretório onde guardou o seu menu e clique com o botão direito do rato no arquivo HTML que o programa gerou e selecione “Abrir com – Bloco de Notas”.

5. Agora, selecione o código imediatamente a seguir à tag “<style type="text/css">” até “</style>” (não incluído) – com o botão direito do rato faça copiar.

6. Aceda ao Painel de controlo do seu blog e clique no menu “Modelo” – “Editar HTML” – cole o código do menu imediatamente a seguir à tag “<style type="text/css">”. Guarde as alterações e verifique se o seu blog está a funcionar corretamente.

menu personalizado para Blogger


7. Agora, volte novamente ao arquivo HTML gerado pelo CSS Tab Designer e copie o código imediatamente a seguir à tag “<body>” até “</body>”.

Aceda ao painel de controlo do seu blog e clique no menu “Esquema” (ou layout) – clique em “Adicionar miniaplicação” (em português do Brasil Adicionar Gadget) – adicionar miniaplicação de HTML/Javacript. Cole o código do menu e guarde as alterações.

O seu menu está pronto.

Importante: Se o menu que você escolheu é gerado com imagens, você deverá fazer o upload das imagens para um serviço de hospedagem (Tinypic por exemplo), e adicionar os links diretos gerados, no código CSS do ponto 5. Por exemplo: background: url(link_direto_imagem).

Um comentário em “Criar menu personalizado para Blogger | Tutorial

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *