Box Com Twitter, Facebook e RSS Com Efeito Hover
Nesta postagem compartilho com vocês blogueiros mais um código.
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAeyF-mBHLdqYhwBl8XTyM7Xilb5VTGnD9hsR8tYngzCTl7IEUGeeLty_qV6SrYkMkta0lVG_qX3YBdRdanjdb8ymkJ5HRS7jT-T1uEFLKPxOonCG8i6omq7w_7-9SR6sundZzDgGzkNA/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEN3V10GoixUgLud4MOTKl7C1pMMTnPGs6Xx6XTVOJFWNZDurQ4YOuUBskeaLoKSWUpAfVHRrkFlvIH46-PkXPop5HFOg_MsbOw4ZQqXrYQNXf-Tl00L1MoMhtXndrz7HBwH-P2zvonek/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ0yBwXSAQjkS9QxCwUZpx8MO1-83RchHZg-jTFqxKLF1L1x3J1yLA6pUtvoKwqzfSXX98I4VG7uml1e7u3ulH8XJlJtzSs2OnDQCKGE574SxfXyKONsmMoQicHLrX43F7uACASn8eWMI/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 'Boogaloo'; 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 'Boogaloo'; 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 'Boogaloo'; 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('http://feedburner.google.com/fb/a/mailverify?uri=DicasHot', 'popupwindow', 'scrollbars=yes,width=550,height=520');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!!!