12 de out de 2010

Criando um Menu para seu Blog



Neste tutorial você vai aprender o básico para criar um menu vertical simples para seu blog:

1)Crie um novo documento 126 X 135 e em seguida um retângulo nas seguintes medidas:
W - 126
H - 27
X - 0
Y - 0
Escolha a cor que deseja.

2)Crie uma caixa de texto com a palavra "Home".Clique fora dela e então selecione-a,e altere suas medidas para:
W - 54
H - 27
X - 36
Y - 1

3)Agora selecione tudo {Ctrl + A},e copie {Ctrl + C} e cole {Ctrl + V}.Agora,arraste a cópia para baixo da original,e repita tudo isso mais 3 vezes.Altere as cores de fundo e os títulos de acordo com a necessidade de seu blog.

4)Com a ferramenta "Rectangle Hotspot Tool",crie um retângulo em cima de cada título,a fim de que fique como na imagem abaixo:


5)Selecione cada retângulo,e insira o link que deseja no campo "Link" e dê enter:


6)Se menu está pronto,mas para instalar no blog você precisará do código,certo?Então,primeiramente você terá que criar e salvar o código.Para isso,vá em:

Quick Export > Dreamweaver > Export HTML >


em "Nome",digite o nome do seu documento {ex: menu 1};
em "Tipo",escolha "HTML and Images";
em Slices,escolha "Export Slices";


clique em Salvar.

7)Vá até a pasta onde você salvou o arquivo que acabou de criar e clique com o botão direito,então vá em:
Abrir com > Bloco de Notas

8)A parte do código que você vai copiar é mostrada abaixo:


Esse é o código que você vai usar no seu blog,mas para que ele funcione,você terá que seguir 3 passos.
A)Abra o documento onde você criou seu menu,e exclua todos os retângulos que desenhou em cima dos títulos,e salve com outro nome {ex:menu2}.
B)Hospede sua imagem em um site de sua preferência,{ex:http://mynetimages.com/}
C)Copiar o endereço da imagem que o site irá fornecer,e colar no locar do seu código indicado abaixo:



Agora basta testar o menu e pronto!Qualquer dúvida, entre em contato !

Nenhum comentário :

Postar um comentário

Seu comentário me deixa mais feliz!
Respondo a todos, pois compartilhar conhecimento e opiniões é muito gratificante :D
{ Spams will be deleted, thanks ;) }

Related Posts Plugin for WordPress, Blogger...
Back to Top