![[TUTORIAL] Widget Redes Sociais com Efeito Over Icon_quicknav](https://2img.net/h/www.ipbforumskins.com/skindemo/public/style_images/marble34x/icon_quicknav.png){kind=icon}
![[TUTORIAL] Widget Redes Sociais com Efeito Over User_login](https://2img.net/h/www.ipbforumskins.com/skindemo/public/style_images/marble34x/user_login.png)
Entrar![[TUTORIAL] Widget Redes Sociais com Efeito Over User_register](https://2img.net/h/www.ipbforumskins.com/skindemo/public/style_images/marble34x/user_register.png)
Cadastre-se
Admin
Administrador
![[TUTORIAL] Widget Redes Sociais com Efeito Over Gestio10](https://i.servimg.com/u/f66/15/86/37/09/gestio10.png) | Widget Redes Sociais com Efeito Over |
--> Tutoriais, dicas e astúcias <--
Widget Redes Sociais com Efeito Over
Widget Redes Sociais com Efeito Over
1º - Código Widget
![[TUTORIAL] Widget Redes Sociais com Efeito Over 5tb3SnO](https://i.imgur.com/5tb3SnO.png)
- Código:
<style type='text/css'>
.db a{
color: #6e6e6e;
font: bold 12px Century Gothic, AppleGothic, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 #fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #2780c7;
border: solid 1px #2780c7;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.db a:hover { background:#ff9900;
color: #fff;
border-color: #f7a032;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.db a:active {
color: #000;
border-color: #f7a032;
}
.dbbar{ width:250px; float: left; margin-left:3px; margin-top:5px; padding:0;}
.dbbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 0px 0 15px 0; float: left; width: 100%; font-family: Century Gothic, AppleGothic, Arial, sans-serif;}
.dbbar .emailsub .emailupdatesform{width: 100%; float: right; padding:0px;}
.dbbar .emailsub .emailupdatesform input.emailupdatesinput{background: #2780c7; float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px; width: 138px; height:30px; border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;}
.dbbar .emailsub .emailupdatesform input.emailupdatesinput:hover{
border-color:#f7a032;background-color: #fff;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.dbbar .emailsub .emailupdatesform input.joinemailupdates:hover{background:#ff9900;border-color:#f7a032;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer;
}
.dbbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #eb3355;
background: #2780c7;
font-family:Century Gothic, AppleGothic, Arial, sans-serif;
text-transform: none; color: #989898; height: 25px; padding: 5px 10px; margin: 0 0 0 5px; font-weight:normal; font-size:12px; height:30px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.dbbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px; width: 138px; height:28px; border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;}
.dbbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #2780c7;
background: #2780c7;
font-family:Century Gothic, AppleGothic, Arial, sans-serif;
text-transform: none; color: #fff; height: 25px; padding: 0 5px; margin: 0 0 0 5px; font-weight:normal; font-size:14px; height:30px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
</style>
<!--[if IE 8]> <style>
.dbbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: left; border: 1px solid #dcdcdc; padding: 5px 10px; color: #989898; font-size: 12px; width: 138px; height:18px; border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;}
.dbbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
background: #f3f3f3;
font-family:Century Gothic, AppleGothic, Arial, sans-serif;
text-transform: none; color: #989898; height: 25px; padding: 0 5px; margin: 0 0 0 5px; font-weight:normal; font-size:14px; height:30px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
/*------------- www.personalizaroblogger.com.br -------------*/
</style> <![endif]-->
<div class="db" style="padding: 0pt 0pt 0pt 5px;">
<table><tr>
<td>
<a href="http://feeds.feedburner.com/NOME DO FEED" rel="nofollow" target="_blank"><img src="http://2.bp.blogspot.com/-g7FaIJ1OjgQ/Ttd3DAAytbI/AAAAAAAAEGI/ifepI3TXqhg/s1600/rss.png" border="0" /></a>
</td>
<td>
<a style="margin-left:5px;"href="http://twitter.com/SEU USUÁRIO DO TWITTER" rel="nofollow" target="_blank"><img src="http://4.bp.blogspot.com/-82yXf2C2f7Y/Ttd3DvVP5-I/AAAAAAAAEGQ/9YRURg-wrPY/s1600/twitter.png" border="0" /></a>
</td>
<td>
<a style="margin-left:5px;"href="https://www.facebook.com/429981887071828" rel="nofollow" target="_blank"><img src="http://3.bp.blogspot.com/-bnswEL1l4bI/Ttd3CJ0oSNI/AAAAAAAAEGA/MNN2fh77H4Q/s1600/facebook.png" border="0" /></a>
</td>
</tr></table><div class="dbbar"><div class="emailsub"><div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NOME DO FEED', 'popupwindow', 'scrollbars=yes,width=520,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Digite seu e-mail..." onblur="if (this.value == '') {this.value = 'Digite seu e-mail...';}" onfocus="if (this.value == 'Digite seu e-mail...') {this.value = '';}" type="text" /><input value="NOME DO FEED" name="uri" type="hidden" /><input value="Cadastrar" class="joinemailupdates" type="submit" /></form></div></div></div></div>
Nome do widget : O que você desejar
Utilizar um table type : Sim
Título do widget : O que você desejar
Fonte do widget : O código acima
2º - Resultado
Normal:
![[TUTORIAL] Widget Redes Sociais com Efeito Over HaXSqBl](https://i.imgur.com/haXSqBl.png)
Mouse por cima:
![[TUTORIAL] Widget Redes Sociais com Efeito Over Ni58rWw](https://i.imgur.com/Ni58rWw.png)
3º - Créditos
Modificado e Postado por Pro Publicitário
© Pro Publicitário
![[TUTORIAL] Widget Redes Sociais com Efeito Over HRCtW0X](https://i.imgur.com/hRCtW0X.png) | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Widget Redes Sociais com Efeito Over |
![[TUTORIAL] Widget Redes Sociais com Efeito Over Top](https://2img.net/h/www.ipbforumskins.com/skindemo/public/style_images/marble34x/top.png)
