13 de fev de 2013

como adicionar um barra de menu personalizada no blog



Sabem aquela barra de menu que fica abaixo do cabeçalho do blog e hospeda as páginas do blog?
Quer fazer uma personalizada? É super fácil, faça assim:

Primeiro, cheque a largura total do seu blog com o atalho Layout / Designer de Modelo / Selecione 'Ajustar Larguras' e visualize a largura total no blog. Abra o Paint Brush no seu computador e salve a imagem em branco que já aparece ao abrir o programa. Você pode no redimensionar o tamanho da imagem em branco já no Paint para fazer a barra de menu. 



Ou você pode redimensioná-las em um editor de imagens preferido. Eu vou usar o PicMonkey como exemplo. Considere a largura do seu blog para o tamanho da largura da barra de menu por um tamanho até 50 pixels de altura. Por exemplo: meu blog tem 1100 pixels de largura conforme vi no meu Designer de Modelo, então vou fazer uma barra de menu de 1100 pixels x 40 pixels.

Carregue a imagem em branco salva do Paint no editor de imagens. Você pode escrever em cima do branco o título das páginas ou usar retângulos e outros recursos no editor para fazer a barra de menu.



Salve sua barra de menu e visite este site aqui: Image Maps.
Carregue a sua imagem e forme retângulos sobre a imagem de modo a determinar a área onde os seus visitantes vão clicar na barra de menu e serem direcionados às páginas correspondentes.
Desabilite a opção 'Show Text Links'.



Clique em 'Get your code' e ao abrir o código HTML a ser fornecido, selecione 'HMTL Code' na parte  superior. 



Copie e cole em um gadget do Blogger (Layout / Adicionar um Gadget / Html /Javascript / Cole o código html do Image Maps), posicionando-o abaixo ou acima do cabeçalho, por exemplo.

Desabilite a exibição das páginas do seu menu conforme o modelo do Blogger, selecionando a opção 'Não Mostrar' na aba Páginas do Painel do seu Blogger.



Dicas:
♥ Ao criar sua barra de menu, tenha atenção à cor, tamanho da fonte e distância entre uma palavra (título da página) e outra.
♥ Como só se trata de um gadget, você pode visualizar, excluir ou fazer de novo se desejar, uma vez que não influencia no modelo (template) do blog.
♥ Clique nos links para testar se seus visitantes serão redirecionados aos links corretos.


Qualquer dúvida, deixe um comentário abaixo ou escreva para costuramor@gmail.com.






Um comentário :

  1. Consegui fazer, muito obrigada ! http://pormimcriticotambem.blogspot.com.br/

    ResponderExcluir

Obrigada por costurar seu comentário aqui no bloguinho! ♥
Perguntas são respondidas no seu blog.