Menu com opções de Home - Twitter - Games

Olá pessoal, hoje recebemos um pedido de como fazer um menu com os icones de uma casa para voltar a página inicial (Home), um icone do famoso passarinho do Twitter para seguir na comunidade e um icone de um video game para ir para a página de jogos. Fizemos dois modelos conforme abaixo.

                   

               

Para colocar qualquer um dos menus em sua página, é só cópiar o código abaixo e colar em sua página, no caso do Blogger entre na sua página de login depois clique em Layout, em seguida em Adicionar um Gadget, escolha a opção HTML/JavaScript e cole o código nesta página, clique em salvar e pronto, agora é só visualizar sua página.

Código do 1º Menu

<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
a {
font-family: Arial, Helvetica, sans-serif;
color: #0000FF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #0000FF;
}
a:hover {
text-decoration: underline;
color: #FF0000;
}
a:active {
text-decoration: none;
color: #FF0000;
}
-->
</style>
<div align="center">
<table
style rgb(243, cellspacing="4
" border: 7); 145, 100%; width:="solid" cellpadding="2" text-align: left; 1px>
<tbody>
<tr>
<td valign="undefined" align="left">
<p align="left"><a href="SEU LINK" target="_self"><img border="0" alt="Home" src="http://i361.photobucket.com/albums/oo57/ren3_02/Home.png" /></a></p></td>

<td valign="undefined" align="undefined">
<p align="center"><a href="SEU LINK" target="_self"><img border="0" alt="Twitter" src="http://i361.photobucket.com/albums/oo57/ren3_02/Twitter64x64.png" /></a></p> </td>

<td valign="undefined" align="undefined">
<p align="center"><a href="SEU LINK" target="_self"><img border="0" alt="Games" src="http://i361.photobucket.com/albums/oo57/ren3_02/Game64x64.png" /></a></p></td>

</tr>
</tbody>
</table
style>
</div>
<h6 align="left" class="style1">
<h6 align="center"><span class="style1">Widget <a href="http://www-baixandonaweb.blogspot.com/">Baixando na WEB</a></span></h6></h6>

Código do 2º Menu

<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
a {
font-family: Arial, Helvetica, sans-serif;
color: #0000FF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #0000FF;
}
a:hover {
text-decoration: underline;
color: #FF0000;
}
a:active {
text-decoration: none;
color: #FF0000;
}
-->
</style>
<div align="center">
<table
style rgb(243, cellspacing="4
" border: 7); 145, 100%; width:="solid" cellpadding="2" text-align: left; 1px>
<tbody>
<tr>
<td valign="undefined" align="left">
<p align="left"><a href="SEU LINK" target="_self"><img border="0" alt="Home" src="http://i361.photobucket.com/albums/oo57/ren3_02/Home32x32.png" /></a></p></td>

<td valign="undefined" align="undefined">
<p align="center"><a href="SEU LINK" target="_self"><img border="0" alt="Twitter" src="http://i361.photobucket.com/albums/oo57/ren3_02/Twitter32x32.png" /></a></p> </td>

<td valign="undefined" align="undefined">
<p align="center"><a href="SEU LINK" target="_self"><img border="0" alt="Games" src="http://i361.photobucket.com/albums/oo57/ren3_02/Game32x32.png" /></a></p></td>

</tr>
</tbody>
</table
style>
</div>
<h6 align="center" class="style1">Widget <a href="http://www-baixandonaweb.blogspot.com/">Baixando na WEB</a></h6>

Vamos entender os códigos, onde esta escrito SEU LINK, você irá apagar e colocar o link correspondente, por exemplo no "home" você irá colocar o link da página inicial do seu blog, no Twitter você irá colocar o link do seu perfil do twitter e onde esta o Games você irá colocar o link da página de onde esta os jogos.

É isso ai pessoal, espero que mais esta dica ajude muitas pessoas, qualquer duvida é só deixar um coméntario que esclareceremos todas as dúvidas.

Até mais.