Menu com Ícones para Blog

menu_icones 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:

 


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="http://www.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á:

By Ferramentas Blog

 

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.

.

27 Comentários

  1. Realmente dá um visual muito bonito ao blog, e como você disse, é muito facil de ser implementado

    Parabéns pela dica

    Responder

  2. Fabio,
    esse efeito é característica do meu template e eu não seu como faz isso.
    Tb já tentei descobrir, mas ainda não consigo!

    Responder

  3. Oi Marcos
    Vou usar no meu blog. Farei um teste antes, para não errar…ainda estou aprendendo e aqui é minha escolinha também! Obrigada pela dica.

    Responder

  4. Oi Marcos, estava procurando como colocar um ícone do orkut no meu blog, não encontrei resolvi digitar e procurar aqui no seu blog, encontrei !… Obrigada por disponibilizar e este blog nos ajuda bastante, continue !
    abraços.

    Responder

  5. Marcos, como sempre suas dicas são perfeitas, acabei de colocar imagem de navegação flutuante e de lá vir para este artigo e logo verei se dá para colocar no meu blog, mas obrigada, sempre sigo suas dicas e seu link tá na no meu blog, assim vejo as novidades que publica aqui.

    Marilúcia

    Responder

  6. cara valeu pela dica ficou massa no meu blog.
    É porque eu sou novato e não entendo muito de html.
    VC falou pra não tirar seus créditos, mas vc não tem
    aí um banner seu pra eu colocar no meu blog.

    Responder

  7. @ Paulo do Dicas e Downloads,

    Esse seu comentário foi publicado apenas como prova do crime contra minha pessoa.

    Desculpe-me meus leitores, mas esse tipo de atitude não é tolerada em nenhuma esfera da sociedade.

    Responder

  8. Olá, Marcos
    Mudei o nome e a url do meu blog.
    Tive que voltar a esse artigo para colocar o menu.
    Na primeira vez que instalei, acabei mexendo código e não conseguia inserir os créditos.
    Ficava com um pouco de preguiça de arrumar, mas agora coloquei os créditos devidos ao seu excelente trabalho.
    Fica muito legal mesmo.
    Tem só uma coisa nele que não consigo mudar: o botão de favoritos só funciona no Explorer como diz no código |Apenas Internet Explorer. Não é possível adicionar aos favoritos em outro navegador. É isso, né?
    Bem, era isso.
    Forte abraço

    Responder

  9. @Max,

    infelizmente esse modelo de código só marca como favorito no IE… Estou providenciando uma nova forma e assim q o fizer coloco aqui em algum novo tutorial.

    Responder

  10. Muito obrigado por essa dica, este blog esta me ajudando mt…
    Estou tentando adicionar este Menu com ícones, estou apenas tendo tblho com as imagens… mas de toda forma te agradeço por este tblho maravilhoso…

    Responder

  11. Consegui finalmente colocar o menu usei essas imagens que voces disponibilizaram aki pq eu só consegui adicionar 1 das minhas… mas o nome de vocês está lá…nos creditos.
    Mt legal, ajuda mt o menu.

    Responder

  12. Muito legal esse blog, ele tem dicas bem interessantes principalmente para quem não tem tanta prática com utilizaçaõ de blogs

    Responder

  13. Marcos,

    Parabéns pelo ótimo recurso disponibilizado. Muito simples e fácil de ser impantado.

    Já existe uma solução para o "ícone adicionar aos favoritos" para que funcione também com o Firefox?

    Responder

  14. Pingback: 5 dicas para melhorar o Layout do seu Blog | [ Ferramentas Blog ]

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.