Criar Menu para Blog (Vertical e Horizontal)

Por | Atualizado em 2014-03-14

Se deseja criar um menu (vertical ou horizontal) para o seu blog tem agora ao seu dispor o programa gratuito CSS Tab Designer.

O programa possui vários modelos de menus prontos a usar. Na prática, basta selecionar o menu que pretende adicionar no seu blog e clicar no botão “Fill with Examples” (menu esquerdo).

Download programa: CSS Tab Designer

Como usar o CSS Tab Designer

Após instalar o programa execute o CSS Tab Designer. No separador “Tab Styles” você encontrará dezenas de menus prontos a usar. Selecione o menu que mais lhe agrada e clique no link “Fill with Examples”.

Você poderá editar o texto apresentado fazendo duplo clique sobre o texto que pretende alterar (no separador Itens).

Por fim, selecione “Generate HTML & Images” (no topo do programa) para criar o seu menu. Indique a pasta onde pretende guardar o seu Menu.

Criar Menu para Blog Vertical e Horizontal

Agora, abra o arquivo (.html) gerado pelo CSS Tab Design com o bloco de notas (botão direito do rato – abrir como – bloco de notas). Copie o código CSS inserido após a tag <style type="text/css"> até </style>.


Agora, aceda ao Painel de Controlo do seu Blog – Separador “Modelo” – Editar HTML.

Importante: Não se esqueça de criar um backup do seu template, antes de proceder a qualquer alteração.

Cole o código do CSS imediatamente a seguir a tag <style type="text/css"> e guarde as alterações.

Dica: Poderá alterar as cores do seu Menu alterando a propriedade “Color”. Se o seu menu for constituído por imagens, poderá alterar a sua cor com o editor de imagens gratuito Gimp (Download SafePC Tuga). Menu “Colors” – “Colorize”.

Para terminar….

Menu Vertical

Para inserir um Menu Vertical volte a abrir o arquivo (.html) gerado pelo CSS tabs e copie o código imediatamente a seguir à tag <body> até </body> (não incluído). Aceda ao menu Esquema (ou Layout) e clique em “Adicionar uma miniaplicação (ou Adicionar um Gadget), na zona lateral do blog.

musica no blogger

Por fim, cole o código gerado no Gadget e guarde as alterações. Por exemplo:

<div id="navigation">
<ul>
<!-- CSS Tabs -->
<li><a href="Home.html"><span>Inicio</span></a></li>
<li><a href="Products.html"><span>Produtos</span></a></li>
<li><a href="Services.html"><span>Serviços</span></a></li>
<li><a href="Support.html"><span>Contato</span></a></li>
<li id="current"><a href="News.html"><span>Novidades</span></a></li>
<li><a href="About.html"><span>Sobre</span></a></li>
</ul>
</div>

Verifique o resultado final.

Menu Horizontal

Para inserir um Menu Horizontal volte a abrir o arquivo (.html) gerado pelo CSS Tab Designer e copie o código imediatamente a seguir à tag <body> até </body> (não incluído). Aceda ao menu Esquema (ou Layout) e clique em “Adicionar uma miniaplicação (ou Adicionar um Gadget), na zona superior do blog. Se necessário arraste a miniaplicação para a zona superior do template.

Dica: Você poderá criar um menu apontando para as categorias do seu blog, dessa forma, obterá um menu de navegação eficiente, que permite o visitante navegar por todas as páginas do seu Blog.

Para isso, crie o seu link da seguinte forma:

<a href="http://linkdoseublog.blogspot.com/nomedaetiqueta">Nome do seu menu</a>

Caso possua dúvidas deixe o seu comentário.

Deixe uma resposta

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