Menu com Ícones para Blog

Essa é uma dica para blog bem simples de implantar. Muitos já me perguntaram como colocar esses ícones com os links devidos para cada parte que desejar e sempre me restringi a responder que basta escolher as figuras e criar links para elas. Como só agora achei os ícones q gostei e coloquei aqui na barra lateral do [ Ferramentas Blog ], então resolvi ensinar como fazer.

Não tem mistério: basta adicionar as imagens desejadas e linkar cada uma delas. Já mostramos aqui como criar links de textos e de imagens, veja os artigos:

• Códigos HTML para editar seu Blog
• Onde colocar códigos HTML (importante para saber como criar um elemento de página para esse tutorial aqui)
• Criando links nas postagens e na barra lateral

Com esses artigos você tem uma idéia geral de como criar links de forma eficiente para o seu blog. No caso aqui, o que vamos fazer é basicamente inserir imagens e direcioná-las com um link para o que pretendemos para cada uma. Neste modelo que vamos ensinar, teremos apenas as opções idênticas daqui do [ Ferramentas Blog ], a saber e nessa ordem: Página Principal – Adicionar aos Favoritos (funciona só no IE) – Entrar em contato (e-mail ou formulário) – Recomende para amigos – Comunidade do Orkut.

Se você quiser colocar mais opção, basta seguir o modelo, encontrar os ícones e criar o link.

Criando o Menu.

Copie o código abaixo e cole num novo elemento de página (gadget) para o seu blog, que será adicionado à barra lateral do seu blog. Faça apenas as modificações indicadas.

<div align="center"><table border="0" cellspacing="0"><tbody><tr><td valign="top">

<a href="URL DO SEU BLOG">
<img border="0" alt="Voltar para a Primeira Página" width="32" src="URL DA IMAGEM 1" height="32" title="Voltar para a Primeira Página"/>
</a>

<script language="JavaScript">
function addFav(){
var url="URL DO SEU BLOG";
var title="NOME DO SEU BLOG";
if (window.sidebar) window.sidebar.addPanel(title, url,"");
else if(window.opera && window.print){
var mbm = document.createElement(‘a’);
mbm.setAttribute(‘rel’,’sidebar’);
mbm.setAttribute(‘href’,url);
mbm.setAttribute(‘title’,title);
mbm.click();
}
else if(document.all){window.external.AddFavorite(url, title);}
}
</script>

<a href="URL DO SEU BLOG/#" onclick="window.external.AddFavorite(‘URL DO SEU BLOG‘,’Nome do Blog‘);" title="Adicione aos Favoritos | Apenas Internet Explorer">
<img alt="Adicione aos Favoritos | Apenas Internet Explorer" src="URL DA IMAGEM 2" border="0"/></a>

<a href="URL DA PÁGINA DE CONTATO">
<img border="0" alt="Formulário de Contatos" width="32" src="URL DA IMAGEM 3" height="32" title="Formulário de Contatos"/></a>

<a href="http://www.recomenda.com.br/cgi-bin/recomendaf.exe?modo=0&amp;local=URL DO SEU BLOG"> <img border="0" src="URL DA IMAGEM 4" title="Recomende para seus amigos"/></a>

<a href="ENDEREÇO DA COMUNIDADE DO ORKUT" target="_blank">
<img border="0" alt="Entre para nossa comunidade no Orkut" width="32" src="URL DA IMAGEM 5" height="32" title="Entre para nossa comunidade no Orkut"/></a>

<br/><p align="right"><font face="Microsoft Sans Serif" color="#c0c0c0" size="1"><em>By <a href="https://ferramentasblog.com/" target="_blank">Ferramentas Blog</a></em></font></p></td></tr></tbody></table></div>

Indicado em negrito, troque pelo endereço do seu blog ou a página de contato ou a página do orkut, conforme descrito. Para o link das imagens, salve as imagens no seu host de preferência (aqui já indicamos como salvar imagens na internet: “Armazenar Imagens na Internet – PicasaWeb”) e cole o link deles onde está indicado de vermelho. Os textos descritivos em verde, podem ser mudados de acordo com o que preferir.

O resultado esperado será:

Os links das imagens usadas aqui no [ Ferramentas Blog ] são:

• menu_icone01.png
• menu_icone02.png
• menu_icone03.png
• menu_icone04.png
• menu_icone05.png

Pedimos que não tire os créditos desse gadget. Se for retirar o link, ao menos coloque na sua lista de indicação, em sua página inicial ou faça referência em alguma parte de seu blog agradecendo.