Menu com imagem

Estou recebendo muitos emails de leitores pedindo para ensinar a fazer algum Menu de navegação para o blog.

Fiz um muito fácil de modificar, então vou ensinar aqui. O menu vai ficar mais ou menos assim:

1º - Faça login no Blogger, entre em: "Layout" -> "Editar HTML".



2º - Procure (Ctrl + F):

]]></b:skin>

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://iconlet.com/icons/twotone/beige/home.gif') no-repeat; padding: 0 0 0 20px; }


#menu-lateral li span.sobre { background: url('http://iconlet.com/icons/futurosoft/16x16/actions/about_kde.png') no-repeat; padding: 0 0 0 20px; }


#menu-lateral li span.contato { background: url('http://iconlet.com/icons/nuvola/16x16/mail_post_to.png') no-repeat; padding: 0 0 0 20px; }

* Onde está de vermelho são as imagens do menu, caso queira troca-las, basta substituir o link pela nova imagem desejada (tamanho ideal: 16px por 16px);

* Para criar novos links para o menu copie esse código abaixo:

#menu-lateral li span.NOVO { background: url('IMAGEM') no-repeat; padding: 0 0 0 20px; }

* Onde está de azul substitua pelo nome do novo link, em letra minuscula, exemplo:

#menu-lateral li span.templates { background: url('http://iconlet.com/icons/fff_silk/layout.png') no-repeat; padding: 0 0 0 20px; }

Simples, faça cada código para cada link do menu.

 Depois teste, se não modificou NADA no template, salve!



3º - Entre em: "Layout" -> Elementos da página".


Clique em "Adicionar um Gadget" no lugar desejado que fique o menu. Escolha adicionar um: "HTML/Java Script".



E adicione o seguinte código:

<div id="menu-lateral">

  <ul>

  <li><span class="home"><a href="LINKAQUI">Home</a></span></li>


  <li><span class="sobre"><a href="LINKAQUI">Sobre</a></span></li>

  <li><span class="contato"><a href="LINKAQUI">Contato</a></span></li>


  </ul>

  </div>

* Onde está de preto é o que vai "ligar" com o código que você colou no template.

* Onde está de azul você deve colocar o link desejado para o menu.

* Onde está de rosa é o que vai aparecer no menu, é o nome do link.



Substitui tudo de acordo e salve