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):
]]>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; }* 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);
#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; }
* 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:
* 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.
0 comentários:
Postar um comentário