.

sábado

Box Com Twitter, Facebook e RSS Com Efeito Hover

ACESSOS:
Deixe seu comentário

Nesta postagem compartilho com vocês blogueiros mais um código.


Torne-se membro do site, basta clicar no botão abaixo e clicar em Seguir:


Para colocar no blog... 

Entre em "layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código
<style>
.DicasHot-widget-rss
{
width:340px;
height:104px;
background:url('http://3.bp.blogspot.com/-qFOd5yfZkTg/U6YsUEyroMI/AAAAAAAAEkw/1hwMyBfOMUA/s1600/rss-widget-DicasHot.jpg') no-repeat;
background-position:0 -104px;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.DicasHot-widget-rss:hover
{
background-position:0 0px;
}
.DicasHot-widget-twitter
{
width:340px;
height:104px;
background:url('http://1.bp.blogspot.com/-a1nPDqFUHjk/U6YsUJaVnLI/AAAAAAAAEk0/PxHHnW_Sbi4/s1600/twitter_widget-DicasHot.jpg') no-repeat;
background-position:0 -104px;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
margin-top:10px;
}
.DicasHot-widget-twitter:hover
{
background-position:0 0px;
}
.DicasHot-widget-facebook
{
width:340px;
height:104px;
background:url('http://2.bp.blogspot.com/-SfdI7ZYDd8M/U6YsT3DzgzI/AAAAAAAAEks/NxfkhP2J-oM/s1600/facebook-widget-DicasHot.jpg') no-repeat;
background-position:0 0;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.DicasHot-widget-facebook:hover
{
background-position:0 -104px;
}
</style>
<div class='DicasHot-widget-twitter'>
<div style='color: #FFFFFF;     float: right;     font: 30px &#39;Boogaloo&#39;;     height: 80px;     margin-top: 15px;     width: 215px;'>Siga-nos!
<a class='twitter-follow-button' data-lang='pt' data-show-count='false' data-size='large' href='https://twitter.com/DicashotBlogger'>Seguir @DicashotBlogger</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
</div>
<div class='DicasHot-widget-facebook'>
<div style='color: #FFFFFF;     float: right;     font: 29px &#39;Boogaloo&#39;;     height: 80px;     margin-top: 15px;     width: 215px;'>Curta!
<center>
<div class='fb-like' data-href='http://www.facebook.com/dicashot?fref=ts' data-layout='button_count' data-send='false' data-show-faces='true' data-width='100'></div>
</center>
</div>
</div>
<div class='DicasHot-widget-rss'>
<div style='color: #FFFFFF;     float: right;     font: 29px &#39;Boogaloo&#39;;     height: 80px;     margin-top: 15px;      width: 209px;'>Receba!
<center>
<form action='http://feedburner.google.com/fb/a/mailverify' id='feedform' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=DicasHot&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "Insira seu e-mail aqui...";}' onfocus='if (this.value == "Insira seu e-mail aqui...") {this.value = "";}' type='text' value='Insira seu e-mail aqui...'/>
<input name='uri' type='hidden' value='DicasHot'/><input name='loc' type='hidden' value='pt_Br'/>
</form>
</center><br />
<div style="text-align: right;">
<span style="color: #cccccc; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;">Widget by <a href="http://dicashot.blogspot.com.br/" target="_blank"><span style="color: #cccccc;">DicasHot</span></a></span></div>
</div>
</div>
Modifique as partes destacadas de azul no código.

Tendo colado o código, basta salvar e pronto!!!

Cursos On-line 24 Horas - Educação a Distância de Qualidade