Box Com Twitter, Facebook e RSS Com Efeito Hover - Versão #2

Nesta postagem compartilho com vocês que acompanham o DicasHot mais um excelente código para deixar seu site ainda mais melhor e com um ótimo Designe.

Como vocês podem ver na imagem ao lado, a box é bem elegante além de atrair olhares.

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

Para colocar no seu site...

Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código

<style>
/* Box Personalizada by DicasHot
----------------------------------------------- */
#side-redes {
float: right;
width: 300px;
float: right;
margin: 0;
}
#facebox {
width: 300px;
height: 227px;
background: url(http://i.imgur.com/OaDcLWn.png) no-repeat top center;
float:left;
position: relative;
}
#facebox .link {
width: 290px;
height: 55px;
z-index: 2;
position: relative;
top: -207px;
left: 5px;
}
#facebox:hover .link a {
background: url(http://i.imgur.com/ebwBga2.png) 0 -55px;
}
#facebox .link a {
width: 290px;
height: 55px;
position: absolute;
background: url(http://i.imgur.com/ebwBga2.png) 0 0;
z-index: 3;
}
#facebox h2 {
color: #7789c3;
font-weight: normal;
font-size: 15px;
padding: 0;
margin: 36px 0 0 67px;
float: left;
width: 150px;
height: 20px;
position: relative;
z-index: 999;
position: relative;
z-index: 9;
}
#facebox .like {
width: 60px;
height: 22px;
float: right;
margin: 12px 10px 0 0;
position: relative;
z-index: 999;
}
#facebox .thumbs {
width: 284px;
height: 156px;
overflow: hidden;
position: relative;
top: 7px;
left: 8px;
}
#facebox .fb-like-box {
position: relative;
top: -99px;
left: -10px;
}
#twitbox {
width: 300px;
height: 55px;
margin: 6px 0 0 0;
float:right;
position: relative;
}
#twitbox:hover a {
background: url(http://i.imgur.com/R7CqESX.png) 0 -55px;
}
#twitbox a {
width: 300px;
height: 55px;
display: block;
position: absolute;
background: url(http://i.imgur.com/R7CqESX.png) 0 0;
z-index: 3;
}
#twitbox h2 {
color: #fff3e3;
font-weight: normal;
font-size: 15px;
padding: 0;
margin: 32px 0 0 65px;
float: left;
position: relative;
z-index: 10;
width:
}
#twitbox .button {
font-size: 0px;
float: right;
margin: 8px 8px 0 0;
position: relative;
z-index: 20;
width: 62px;
height: 22px;
overflow: hidden;
}
#twitbox .button a {
background: #00baf3;
}
#feedbox {
width: 300px;
height: 55px;
margin: 6px 0 0 0;
float:right;
position: relative;
}
#feedbox:hover a {
background: url(http://i.imgur.com/JvgQWa7.png) 0 -55px;
}
#feedbox a {
width: 300px;
height: 55px;
display: block;
position: absolute;
background: url(http://i.imgur.com/JvgQWa7.png) 0 0;
z-index: 3;
}
#feedbox h2 {
color: #fff3e3;
font-weight: normal;
font-size: 15px;
padding: 0;
margin: 32px 0 0 65px;
float: left;
position: relative;
z-index: 10;
width:
}
#feedbox .button {
font-size: 0px;
float: right;
margin: 8px 8px 0 0;
position: relative;
z-index: 20;
width: 58px;
height: 20px;
}
#feedbox .button a {
width: 58px;
height: 20px;
margin: 0;
background: url(http://i.imgur.com/Mldc7t2.png);
display: block;
}
</style>
<div id='side-redes'>
<div id='facebox'>
<h2>41.415 já curtiram</h2>
<div class='like'><div class='fb-like movelike' data-href='https://www.facebook.com/dicashot' data-layout='button' data-send='false' data-show-faces='false' data-width='60'></div></div>
<div class='thumbs'><div class='fb-like-box' data-colorscheme='light' data-header='false' data-height='350' data-href='https://www.facebook.com/dicashot' data-show-border='false' data-show-faces='true' data-stream='false' data-width='350'></div></div>
<div class='link'>
<a href='https://www.facebook.com/dicashot' target='_blank'></a>
</div>
</div>
<div id='twitbox'>
<a href='https://twitter.com/DicashotBlogger' target='_blank'></a>
<h2>1082 seguidores</h2>
<div class='button'><a class='twitter-follow-button' data-lang='pt' data-show-count='false' data-show-screen-name='false' href='https://twitter.com/DicashotBlogger'>Seguir @DicashotBlogger</a></div>
</div>
<div id='feedbox'>
<a href='http://feeds.feedburner.com/dicashot' target='_blank'></a>
<h2>Assine nosso Feed</h2>
<div class='button'><a href='http://feeds.feedburner.com/dicashot' target='_blank'>Seguir</a></div>
</div>
<div style="text-align: right;">
<span style="color: #eeeeee; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;">Widget by <a href="http://dicashot.blogspot.com.br/2014/07/box-com-twitter-facebook-e-rss-com.html" target="_blank"><span style="color: #eeeeee;">DicasHot</span></a></span></div>
</div>

Faça as modificações apenas nas partes destacadas de azul no código, nada mais além disso para não dar erro no código.

Tendo feito as modificações no Gadget, basta salvar e pronto!!!