Como criar um Menu com imagens no seu blog


Parar criar um Menu de navegação no seu blog incluindo imagens que se alternam automaticamente não é uma coisa muito difícil de se fazer se você seguir corretamente os passos a seguir. 

Vamos lá então:

1º Em primeiro lugar faça login no Blogger, e clique na opção: "Tema" e depois em "Editar HTML".
2º Clique em qualquer parte dentro do código e pressione (Ctrl + F) e digite:  ]]></b:skin>
3º Cole o seguinte código ANTES:

#menu-lateral ul li { display: inline; font-weight: bold; list-style-type: none; padding: 5px 5px 5px 0; margin: 0; }
#menu-lateral li span.home { background: url(‘http://www.imagem.eti.br/clipart/animais_diversos_267.gif’) no-repeat; padding: 0 0 0 20px; }
#menu-lateral li span.sobre { background: url(‘http://www.imagem.eti.br/clipart/animais_diversos_125.png’) no-repeat; padding: 0 0 0 20px; }
#menu-lateral li span.contato { background: url(‘http://www.imagem.eti.br/clipart/animais_diversos_586.gif.png') no-repeat; padding: 0 0 0 20px; }

4º Substitua os endereços exemplo que estão em vermelho pelo endereço correto de armazenamento de suas imagens. Caso queira acrescentar mais imagens é só repetir o código correspondente a última linha e substituir pelo novo link da imagem. O tamanho ideal das imagens é 16px por 16px. O texto em azul de cada linha também pode ser alterado a seu critério. Este procedimento deve ser feito para cada link do menu.

5º Após terminar de acrescentar o código clique no botão “Salvar Tema”.

6º Entre agora em: "Layout" e clique em "Adicionar um Gadget" na posição desejada em que deve ficar o menu em sua página. Escolha a opção: "HTML/Java Script".

7º Insira o código abaixo:
<div id="menu-lateral">
  <ul>
  <li><span class="
home"><a href="Link da página">Home</a></span></li>
  <li><span class="
sobre"><a href=" Link da página ">Sobre</a></span></li>
  <li><span class="
contato"><a href=" Link da página ">Contato</a></span></li>
  </ul>
  </div>

8º Substitua no código o texto em verde pelo link da página que deve ser acessada pelo usuário.  Salve tudo e clique no botão Visualizar para verificar as alterações.

É isso, acredito que deve funcionar.

Comentários

Postagens mais visitadas