Menu com opções de Newsletter - Feed - Orkut - Twitter

Olá pessoal, hoje vamos disponibilizar o código de dois Widget que criamos.

Fizemos dois modelos com as mesmas funções porém com o designer diferente.

1º Widget

               

2º Widget

                 

Segue abaixo o 1º código:

<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
a {
font-family: Arial, Helvetica, sans-serif;
color: #0000FF;
}
a:link {
text-decoration: underline;
}
a:visited {
text-decoration: underline;
color: #0000FF;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:active {
text-decoration: underline;
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="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/dHTX&amp;loc=en_US" target="_blank"><img border="0" alt="Assine nossa Newsletter" src="http://i361.photobucket.com/albums/oo57/ren3_02/email.jpg" /></a></p></td>

<td valign="undefined" align="undefined">
<p align="center"><a href="http://feeds.feedburner.com/blogspot/dHTX" target="_blank"><img border="0" alt="Assine nossos Feeds" src="http://i361.photobucket.com/albums/oo57/ren3_02/Feed1.jpg" /></a></p> </td>

<td valign="undefined" align="undefined">
<p align="center"><a href="http://www.orkut.com.br/Main#Community?cmm=92492056" target="_blank"><img border="0" alt="Orkut" src="http://i361.photobucket.com/albums/oo57/ren3_02/orkut1.jpg" /></a></p></td>

<td valign="undefined" align="undefined">
<p align="center"><a href="http://twitter.com/renatogj" target="_blank"><img border="0" alt="Twitter" src="http://i361.photobucket.com/albums/oo57/ren3_02/Twitter1.jpg" /></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>

Segue abaixo o 2º código:

<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
a {
font-family: Arial, Helvetica, sans-serif;
color: #0000FF;
}
a:link {
text-decoration: underline;
}
a:visited {
text-decoration: underline;
color: #0000FF;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:active {
text-decoration: underline;
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="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/dHTX&amp;loc=en_US" target="_blank"><img border="0" alt="Assine nossa Newsletter" src="http://i361.photobucket.com/albums/oo57/ren3_02/email-32x32.png" /></a></p></td>

<td valign="undefined" align="undefined">
<p align="center"><a href="http://feeds.feedburner.com/blogspot/dHTX" target="_blank"><img border="0" alt="Assine nosso RSS" src="http://i361.photobucket.com/albums/oo57/ren3_02/feed-32x32.png" /></a></p> </td>

<td valign="undefined" align="undefined">
<p align="center"><a href="http://www.orkut.com.br/Main#Community?cmm=92492056" target="_blank"><img border="0" alt="Orkut" src="http://i361.photobucket.com/albums/oo57/ren3_02/orkut-32x32.png" /></a></p></td>

<td valign="undefined" align="undefined">
<p align="center"><a href="http://twitter.com/renatogj" target="_blank"><img border="0" alt="Twitter" src="http://i361.photobucket.com/albums/oo57/ren3_02/twitter-32x32.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>

Agora vamos entender onde você irá adaptar o código para colocar no seu blog ou site.
Onde esta grifado de verde, você irá substituir pelos seus dados, por exemplo no campo dos dados da comunidade do Orkut, você irá colocar o link da comunidade do seu blog ou site, e assim você fará com os outros links.

OBS: É muito importante deixar as aspas no começo e no final dos links pois estas aspas fazem parte do código e sem elas o código não funcionará.

Onde colocar este Widget ?

Entre na página de login do seu blog ou site, no caso estamos tando a preferência para o blog, clique em "Layout" depois em "Adicionar um Gadget" e escolha a opção "HTML/JavaScript", copie o código que você mais gostou e cole na tela que abriu, clique em salvar e pronto, entre na sua página e visualize.

É isso ai pessoal, espero que vocês tenham gostado, qualquer dúvida deixe um comentário que estaremos esclarecendo todas as dúvidas.

Até mais.