Criar Menu para Blog (Vertical e Horizontal)

Criar Menu para Blog (Vertical e Horizontal)

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

css tab designer

Você poderá editar o texto apresentado fazendo duplo clique sobre o elemento que pretende alterar (no separador Itens). No separador “Tab Text” digite o texto que deve surgir no menu, e no “Tab URL” o link que deverá abrir.

editar menu

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

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

Aceda ao Painel de Controlo do seu Blog – Separador “Modelo” – Editar HTML. Cole o código do CSS imediatamente a seguir a tag <style type=”text/css”> e guarde as alterações.


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

Alterar cores do Menu…

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”. P

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.

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.

Partilhar:

Deixe um comentário