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://codigosblog.net/servidor/icones/home.gif\') no-repeat; padding: 0 0 0 20px; }
#menu-lateral li span.sobre { background: url(\'http://codigosblog.net/servidor/icones/about_kde.png\') no-repeat; padding: 0 0 0 20px; }
#menu-lateral li span.contato { background: url(\'http://codigosblog.net/servidor/icones/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://codigosblog.net/servidor/icones/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.
Pessoal, esse tutorial é um pouco complicado de ensinar, desculpe, mas tentei fazer do geito mais fácil.
Faça várias vezes, se mesmo assim não conseguir entre em contato por email, mande o código que você modificou, os links desejados para colocar no menu e as imagens (já hospedadas) para cada link.
E eu vou ver o que posso fazer.
abraços...