Menus personalizados no estilo ANG-Animes

Menu personalizado no Estilo ANG-Animes

Aprincipio parece dificil mais vo mostra para vocês como fazerem estes menus em apenas alguns minutos.Essa e a forma mais facil de faze pois a que eu uso e de outra forma envolvendo java para eu poder modificar da forma que eu quizer e fazer mudar altomaticamente com dia e hora progrmado caso eu queira.Depois verei se posso fazer isso para vocês.

Siga os passos a baixo detalhadamente para você fazer estes menus

1- Primeiro pegue uma das imagens de barra dos menus normais do seu BLOG para saber a largura certa da barra.Depois de sabe a largura exata da barra pegue ela leve para um editor de imagens so para cervir de corpo para fazer o novo menu.

2- Hora de colocar a mão na massa entre em um dos sites a baixo para poder pegar imagens renders a qual servirão para fazer os personagens dos menus.

* http://www.gamerenders.com/
* http://planetrenders.net/renders/
* http://celestial-star.net/renders/
* http://photobucket.com/?src=wap
* http://renders.designergfx.com/index.php

Nesses sites vocês poderão achar tudo que e tipo de imagens renders desde Animes,Games e Etc...

Dependendo do tipo de menu que você vai fazer use as imagens necessarias para forma todo os esquemas de menus de acordo com o tema do BLOG.

3- Depois de definir os menus e hora de fazelos com o esboço da barra que você obteve você ja deve ter noção da largura aqual você tera que usar para o menu ficar de forma adequada.Agora para dar continuidade ao procedimento pegue um desses programas para poder fazer os menus.

* Fireworks 8 um dos melhores para fazer menus e imagens para Web super leve e por mim usei ele para fazer todo o ANG-Animes.

* Photoshop CS3 ou CS4 recomendo o CS4 pois tem mais posibilidades de criação.

3.1- Depois de obter um dos 2 programas acima e hora de por a mão na massa novamente com as imagens Renders faça as barras do menus com o mesma largura da imagem base depois de fazer a barra da forma desejada e so colocar um personagem encima dela e na barra escrever o nome da seção aqual o menu ira representar.

4- Depois de tudo pronto e hora de upar as imagens para poder dar procedimento a criação dos menus voce tera duas alternativas um upar no proprio servidor do Blogspot evite ao maximo fazer isso pois ele pode dar erro no caregamento dos menus para isso use este site para azer as upagens http://imageshack.us/ depois de upadas anote o endereço de cada menu no Bloco de notas do seu sistema operacional.com os links em mãos entre em no seu servidor do Blogspot e depois entre em Layout elementos da página depois click em adicionar uma gatget ao abrir a tela escolha a opção Html/Java Script.

5- Vamos agora a criação do codigo a qual servira apra fazer o menu.

ATENÇÃO SIGA O CODIGO DETALHADAMENTE SEM PULAR OU DAR NENHUM ESPAÇO PARA QUE NÃO FIQUE DE FORMA INREGULAR.

Primeiro escreva o codigo abaixo para poder colocar primeiro a imagem com a barra e o personagem do menu.

Ao colocar a imagem e hora de fazermos o codigo de listagem a qua lsera colocado os menus.Para isso use o codigo abaixo

ul essa teg você deve colocar no inicio e para fechar basta usar a
teg de fechamento /ul teg de fechamento
teg que servira para colocar os nomes das seções dos menus ao termina de escreve o nome da seção feche ela com a teg /ul
li teg que servira para colocar os nomes das seções dos menus ao termina de escreve o nome da seção feche ela com a teg /li
Para ficar mais facil veja o exemplo abaixo

agora e hora de colocar os menus lincados com o exemplo acima acrecente mais este codigo botado abaixo.

Esse codigo serve para fazer a linkagem dos menus

6- Agora que voce ja sabe para que serve este codigo veja como integrar ao menu de listagem

Click na imagem para poder ver o codigo melhor

Siga o mesmo esquema anterior caso queira adiconinar mais conteudos e so repetir este codigo

Click na imagem para poder ver o codigo melhor

O menu ja esta quase concluido agora so falta colocar para aparecer com icones de imagens ao lado dos nomes das seções para isso repita agora todo o procedimento anterior e coloque este codigo agora

Lembrese que o tamnho max da imagem não pode ultrapasa os 25x25 px de largura e de altura pois se trata somente de um icone a aqual você ira colocar ao lado dos nomes que aparecerão nos menu.

Nosso menu ja esta quase concluido veja agora como fazer o codigo para colocar a imagem junto ao codigos anteriores.

Click na imagem para poder ver o codigo melhor

Caso queira colocar mais seções itens e so repetir este codigo novamente e seguir o esquema

Click na imagem para poder ver o codigo melhor

Veja que entre o codigo img src="endereço da imagem" e o codigo a href="endereço da seção a qual você quer que o usuario va ao clicar" primeira seção do menu /a posui um pequeno espaçamento coloque isso para que a imagem não fique grudada ao nome da seção pois alem de ficar feio pode acaretar alguns problemas futuros caso você não saiba mexer em HTML por isso deixe de forma organizada.Agora que ja esta tudo montado e estruturado seu menu ja esta pronto basta salvalo e colocar onde tu quer que ele apareça e pronto você fez seu menu personalizado no estilo ANG-Animes guiado por Ryu ahahahahahahahahahah espero que vocês tenhão gostado pois tentarei trazer muito mais para vocês a medida que eu for enventando eu irei colocando aqui no ANG-Animes para todos vocês.A e pelo amor de deus caso de em algum erro e so deixar aviso na seção de comentarios,Juntamente com seu Email que assim que possivel mando as explicações.

Menu feito e criado no ANG-Animes todos direitos rezervados ao ANG-Animes e a seu Criador Ryu.