[TUTORIAL] Menu de navegação

Em várias ocasiões necessitamos oferecer um menu de navegação aos leitores, isso facilita muito á nevegação e claro deixando seu blog mais atrativo e construtivo. Neste tutorial vamos conhecer um código simples de um menu horizontal e adicionar-mos ao Multiblog ou blog principal.

--> Tutoriais dicas, e astúcias <--
Gerir um menu de navegação

1º - Conhecendo e editando o código do Menu:
Até você mesmo pode criar um menu horizontal ou vertical e adicionar ao blog sem dificuldades, vamos usar um menu simples mais com muitas utilidades na hora que precisar-mos.

<table align="center" cellspacing="10">
<tr>
<td><div id=menu01 class=ancora><a href="ENDEREÇO_DO_LINK_1" onmouseover="mostra('e1')" onmouseout="oculta('e1')">Link 1</a></div></td>
<td><div id=menu02 class=ancora><a href="ENDEREÇO_DO_LINK_2" onmouseover="mostra('e2')" onmouseout="oculta('e2')">Link 2</a></div></td>
<td><div id=menu03 class=ancora><a href="ENDEREÇO_DO_LINK_3" onmouseover="mostra('e3')" onmouseout="oculta('e3')">Link 3</a></div></td>
<td><div id=menu04 class=ancora><a href="ENDEREÇO_DO_LINK_4" onmouseover="mostra('e4')" onmouseout="oculta('e4')">Link 4</a></div></td>
</tr>
</table>

Configurar o menu
Cores índicas	URL/Endereço externo de uma página desejada.
Cores verdes	Nomes que serão exibidos no blog. Como por exemplo: "Início".
Cor vermelha	Um simples código de centrealização do menu, caso não queira centrealizado apenas retire.

2º - Aplicando ao blog:
Para que seja possível esse menu funcionar no local onde queremos, que seria abaixo do logo do blog teremos que ceder em: Painel de controle ->> Multiblog ->> Geral ->> Conteúdo Personalizável ->>

Regra de visualização	vamos marcar á opção "Todas às páginas".
Posição vertical	vamos marcar á opção "Em baixo do nome do blog".

Logo mais clique no botão Salvar.

--> Tutoriais dicas, e astúcias <--
Gerir um menu de navegação

• Posso adicionar imagens?
  No lugar do nome de exibição dos links, é possível adicionar botões em formas de imagens. Somente terá que usar às tags em HTML das imagens:
  

  <td><div id=menu01 class=ancora><a href="http://ajuda.criarumblog.com/forum" onmouseover="mostra('e1')" onmouseout="oculta('e1')"><img src ="ENDEREÇO_DO_BOTÃO"></img></a></div></td>

  Ou seja:
  

  Código:

  <td><div id=ancora1 class=ancora><a href="http://ajuda.criarumblog.com/forum" onmouseover="mostra('e1')" onmouseout="oculta('e1')"><img src="http://hitskin.com/themes/17/26/00/i_icon_mini_index.png"></img></a></div></td>

  
  
• Qual é o resultado sem às imagens?
  
  

---

© Suporte Criarumblog

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Menu de navegação