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:
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; }
#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>
<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.
Comentários
Postar um comentário