Gadget de Redes Sociales fijo al hacer scroll

Hoy compartiremos un gadget de redes sociales que se encuentra fijo en el lateral izquierdo de nuestra página al hacer scroll, o sea al bajar y subir en nuestro blog el gadget se mantiene fijo, los iconos que incluyen son de Facebook, Google+, Twitter y Feedbuner.

Este tutorial consta de un solo paso, asi que presta atención que es muy fácil de implementarlo!

Como unico paso debemos ir a la sección Diseño » Añadir un Gadget » y elegimos HTML/Javascript, dentro del gadget incluiremos el siguiente código.

<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
#redes-sociales a { text-decoration: none; }
#redes-sociales ul {
list-style: none;
margin: 0;
padding: 0;
}
#redes-sociales {
left: 0;
margin-top: -115px;
position: fixed;
top: 50%;
}
#redes-sociales ul li:first-child a { border-radius: 0 5px 0 0; }
#redes-sociales ul li:last-child a { border-radius: 0 0 5px 0; }
#redes-sociales ul li a {
background: #121212;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#redes-sociales ul li a:hover span {
left: 130%;
opacity: 1;
}
#redes-sociales 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: 9999;
}
#redes-sociales 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;
}
#redes-sociales ul li a[class*="facebook"]:hover,
#redes-sociales ul li a[class*="facebook"] span,
#redes-sociales ul li a[class*="facebook"] span:before { background: #234999; }
#redes-sociales ul li a[class*="gplus"]:hover,
#redes-sociales ul li a[class*="gplus"] span,
#redes-sociales ul li a[class*="gplus"] span:before { background: #E34429; }
#redes-sociales ul li a[class*="twitter"]:hover,
#redes-sociales ul li a[class*="twitter"] span,
#redes-sociales ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#redes-sociales ul li a[class*="rss"]:hover,
#redes-sociales ul li a[class*="rss"] span,
#redes-sociales ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style>

    <div id='redes-sociales'>
    <ul>
    <li>
    <a class='entypo-facebook' href='URL DE TU PÁGINA O PERFIL EN FACEBOOK' target='_blank'>
    <span>facebook</span>
    </a>
    </li>
    <li>
    <a class='entypo-gplus' href='URL DE TU PÁGINA O PERFIL EN GOOGLE+' target='_blank'>
    <span>google+</span>
    </a>
    </li>
    <li>
    <a class='entypo-twitter' href='URL DE TU PERFIL EN TWITTER' target='_blank'>
    <span>Twitter</span>
    </a>
    </li>
    <li>
    <a class='entypo-rss' href='URL DE TU FEEDBUNER' target='_blank'>
    <span>feedburner</span>
    </a>
    </li>
    </ul>
    </div>

Luego sin definir ningun título al gadget, lo guardamos.

Aclaración debemos cambiar lo que se encuentra en AZÚL por nuestros perfiles en dichas redes sociales.

Puedes apreciar el resultado en nuestro
 » BLOG DE PRUEBAS «