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
               

       
Assine nossa Newsletter

 
Assine nossos Feeds

 
Orkut

 
Twitter
2º Widget
              

       
Assine nossa Newsletter

 
Assine nosso RSS

 
Orkut

 
Twitter
   
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.



4 comentários:

Junior 15 de fevereiro de 2010 22:18  

Parabéns pelo trabalho amigo, muito interessante ficou muito legal. Muito bom teu blog estou te seguindo.

Abraços.

CCMaia 24 de fevereiro de 2010 16:51  

Muito bom. Vou visitar sempre.

Anônimo,  27 de julho de 2010 01:03  

muito bom...nota 1000!

Lidi 7 de novembro de 2010 02:21  

Era isso que eu tava procurando na net e achei aqui no teu blog, mas eu queria com os botões: Email, Orkut, Twitter, Facebook, Skoob. Como faço? Abraços.

Postar um comentário

© 2012 Todos os direitos reservados | Baixando na WEB | | Desenvolvido por - RL Design