Tutorial: Ícones flutuantes das redes sociais

Ola meu povo!!!
Hoje trago para vocês mais um tutorial bem simples pois não precisa mexer no html do seu blog...
Sabe aqueles ícones de redes sociais  flutuantes? Pois é... 
Esse tipo de Gadgets é muito bacana, porque  mesmo quando o visitante do seu blog desce toda barra de rolagem os ícones descem junto, sendo sempre visualizado, tendo assim mais chances de ser seguido também pelas redes sociais.

Esse tutorial peguei no site Prodeveloper, fiz apenas algumas alteraçoes deixando apenas os icones do facebook, twitter e Google plus ( pois sao as redes mais usadas) ,  tirei o tumblr e o Rss... nesse codigo nao tinha o youtube.

Bom entao vamos la...

Acesse o Blogger e vá em "Layout".

Clique em "Adicionar um gadget" e escolha por "HTML/Javascript".

Dentro do conteúdo do gadget, cole o código a seguir:



<style type='text/css'>
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
left: 0;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #cccccc;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
left: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
-webkit-transition: opacity .3s, left .4s;
-moz-transition: opacity .3s, left .4s;
-ms-transition: opacity .3s, left .4s;
-o-transition: opacity .3s, left .4s;
transition: opacity .3s, left .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }

</style>
<div id='social-sidebar'> <ul>
<li><a class='entypo-facebook' href='URL FACEBOOK' target='_blank'>
<span>facebook</span></a></li>

<li><a class='entypo-twitter' href='https://twitter.com/USUÁRIO DO TWITTER' target='_blank'>
<span>Twitter</span></a></li>

<li><a class='entypo-gplus' href='URL GOOGLE+' target='_blank'>
<span>google+</span></a></li></ul></div>




Subistitua as URL das redes selecionadas, 
No inicio do codigo onde tem "background: #cccccc;" substitua pela cor de fundo desejada (no caso desse codigo esta conza claro)

Se voce gostou desse tutorial, deixe um comentario  para que eu fique sabendo. 
Ah... e nao se esqueça de seguir o blog para ficar por dentro das novidades!!!

Quer ver mais Tutoriais Bacanas para seu Blog? Clique Aqui