Gadgets rede sociais personalizado

Gadgets rede sociais personalizado!

Bom no post anterior expliquei como fazer um Gadget  rede sociais simples, nesse tutorial vou ensinar como fazer uma Gadget de rede social personalizado para dar um visual melhor ao seu Blog!

                    Imagem do Gadget:

  Esse modelo é exatamente idêntico ao que estou usando no blog :D, o código é um pouco mais complexo mas não é um bicho de sete cabeças, Veja o código:

<!--Gadget redesocial personalizado Por dicasblogget.net-->

<center><table bgcolor='#ffffff' border='0' cellpadding='0' cellspacing='0' style='height: 20px; width: 250px;'><tbody><tr>

<td height='30' style='border: 1px solid rgb(231, 236, 227);' width='70'>

<div align='center'>

<a href='SUA URL DO GOOGLE+'>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaLteNoZEqN7DtzZqZcxoctXRVzu1bUmDqjebLmwXUw785hJKCtqZyAqKCdX8f6B8gXgyVua9fUmWivGz5o7DXjN5hrLPPDwfu5CPj6-BxipgVZNZEhIoLy85xCrsgJhnN92Uf2ggOJ3U/s1600/buzz.png"/><b>

<span style='color: #0000ee; font-family: Verdana; font-size: 6pt;'>Google+</span></b></a></div></td>                   

<td height='30' style='border: 1px solid rgb(231, 236, 227);' width='70'>

<div align='center'>

<a href='SUA URL DO TWITTER'>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG2oTNX8t2XQaKy_95XcJYcWyjLTE8SNIv0jz7VoTMqJdtX2JKvE_Ippm6RayJP2xBrPxDyy-rBCddVO83Uh8G0eCs2Jav2nN_jc3IGe8O3EAWSkF1JSiXFxv6cLE3Qwh_VDSpBE15XDU/s1600/twitter1.png"/> <b>

<span style='color: #0000ee; font-family: Verdana; font-size: 6pt;'>Twitter</span></b></a></div></td>   

<td height='30' style='border: 1px solid rgb(231, 236, 227);' width='70'>

<div align='center'>

<a href='SUA URL DO FACEBOOK'>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOP-y2-_9G216zKE_YtATc-AmaLn5D4vMjm8k33lN7HTfTolpoYLrYTn_RgfurqTk5L-w9xmef_X6g7k5D-N-B8GQ3D5pMkP3dOdQF7KxVf2UU8Yexb39JNx9TKkF9MlKKoYUROVyYjFk/s1600/facebook1.png"/> <b>

<span style='color: #0000ee; font-family: Verdana; font-size: 6pt;'>Facebook</span></b></a></div></td>   

<td height='30' style='border: 1px solid rgb(231, 236, 227);' width='70'>

<div align='center'>

<a href='SUA URL DO FEED RSS'>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_dfmMwpyn_-40g0g8v0Y4xKQhyJsKEOWOH90FBcccnuBUhxDXZW_nhXx1NUUEFWv-WX7LnAuYMHpFfqW1TdVcIXca0EoxLFZPBkELRa2vyNXb7M_5CzfwNhRgiE22I31FBYC0PnVThN0/s1600/rss1.png"/> <b>

<span style='color: #0000ee; font-family: Verdana; font-size: 6pt;'>RSS</span></b></a></div></td>   

<td height='30' style='border: 1px solid rgb(231, 236, 227);' width='70'>

<div align='center'>

<a href='SUA URL DO EMAIL PARA ESCREVER NOS FEEDS'>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-oB4p6pDrMLgpQBNmfFS5fdrSOGvLCI0myJ4BUGaCZbdy1EG50RDf8Dy5M7MUqo4hawsyG9980CpKa-oBr7LamYgQt46LzkcPJKv3p2mGq6Q8KdAlxR_LzA4fu87aKbXTlA84CxgehLE/s1600/email.png"/> <b>

<span style='color: #0000ee; font-family: Verdana; font-size: 6pt;'>E-Mail</span></b></a></div></td>   

</tr>

</tbody></table></center>

 Agora é só substituir  as partes sinalizadas em vermelho pelo link das redes sociais indicadas, feito isso só adicionar um HTML/JavaScript na parte do blogger onde quer que apareça os Gadget.

Obs: Edite o código no bloco de nota antes de colocar no blog.

Espero que esse tutorial seja útil!  Expresse sua opinião, comente e tire suas duvidas...

                         SIGA @DicasBlogger.net agora e mantenha-se mais atualizado!

Recomendamos que leia também