Menu social com efeito hover e deslizante

Como podemos notar vários blogs tem Widget de follow para  redes sociais e é de extrema importância, hoje em dia é indispensável esse maravilhosa ferramenta na vida de um blogueiro, já mostrei alguns modelos aqui no blog mas nada comparado a este, trazendo como caracteristica um visual simples, com efeito hover e  transição criado com Css3.

Artigos recomendados:

1. Menu de Redes Sociais na vertical com efeitos CSS
2. Menu de redes sociais animado com css3

 

 Vamos ao Tutorial :

Para adicionar em deu blog é simples e rápido vá em layout >>  adicionar widget >> HTML/javaScript e cole o código abaixo.

 <div dir="ltr" style="text-align: left;" trbidi="on">
<style>
#bssose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#bssose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#bssose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#bssose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkRLAjWuyvt1Jks95185gMpku3DjxFh3_SCvPQ3lzZOG3j-kLXcPT_8p4EjV5iuVPjf_3ZmX_bkaPIw-pmUA4vsp1kY6zJ6a9tivAWyJymAGoRL9FR1lwtr36eIQedOw3_1Pk5ZJTZg6-/s320/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#bssose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#bssose .icon{overflow:hidden; color:#fafafa;}
#bssose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#bssose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#bssose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#bssose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#bssose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#bssose li:hover .icon,
.touch #bssose li .icon{width:210px;}
.touch #bssose li .facebook, #bssose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #bssose li .twitter, #bssose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #bssose li .googleplus, #bssose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #bssose li .pinterest, #bssose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #bssose li .rss, #bssose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<br />
<ul id="bssose">
<li data-alt="Siga-nos no Facebook"><a class="icon facebook" href="http://www.facebook.com/tecnologiablogger">Siga-nos no Facebook</a></li>
<li data-alt="Siga-nos no Twitter"><a class="icon twitter" href="http://www.twitter.com/tecno_blogger">Siga-nos no  Twitter</a></li>
<li data-alt="Siga-nos no Google+"><a class="icon googleplus" href="https://plus.google.com/XXXXXXXXXXXX">Siga-nos no  Google+</a></li>

</ul>
</div>

Configurações:

Claro que não pode esquecer de fazer as modificações, na parte em vermelho você troca pelo nome de sua Fan page.
Na parte roxa troque pelo nome do Twitter.
Já na parte azul troque pelo endereço do Google+ pode ser de sua página ou seu perfil pessoal.