Cute Iconos flotantes de Redes Sociales en Blogger♥

Hoola peques! Hoy les voy a mostrar una forma sencilla de agregar unos lindos iconos de redes sociales flotantes en Blogger. Con ellos les permitirá a sus seguidores del blog que se conecten o suscriban a su blog a través de los diferentes medios sociales. Se encuentran flotando a la derecha o la izquierda de la pagina.

En este tutorial, los sitios sociales que he incluido son Facebook, Twitter, Tumblr y Youtube. Así que veamos como instalarlos.

★LIVE PREVIEW HERE

Para colorcarlo solo debes seguir 3 faciles pasos:

1.- Entrar en panel de administración  - Diseño
2.- Añadir un gadget HTML/Javascript
3.- Copiar y pegar el siguiente código:

<style type="text/css">.redes-flotantes {
position: fixed;
left: 5px;
top: 40%;
}
.redes-flotantes img {
float: right;
clear: right;
margin: 5px;
-moz-transform: scale(.8) ;
-webkit-transform: scale(.8) ;
-o-transform: scale(.8) ;
-ms-transform: scale(.8) ;
transform: scale(.8) ;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.redes-flotantes img:hover {
-moz-transform: scale(1.1) rotate(6deg);
-webkit-transform: scale(1.1) rotate(6deg);
-o-transform: scale(1.1) rotate(6deg);
-ms-transform: scale(1.1) rotate(6deg);
transform: scale(1.1) rotate(6deg);
}</style>
<div class='redes-flotantes'>
<!-- Twitter -->
<a href='URL DE TWITTER' target='blank'><img alt='Twitter' height='48' src='http://i.imgur.com/glSGtBU.png' width='48'/></a>
<!-- Facebook -->
<a href='URL PAGINA FACEBOOK' target='blank'><img alt='Facebook' height='48' src='http://i.imgur.com/jq5xH9J.png' width='48'/></a>
<!-- Youtube-->
<a href='URL DE YOUTUBE' target='blank'><img alt='Twitter' height='48' src='http://i.imgur.com/j49u00m.png' width='48'/></a>
<!-- TUMBLR -->
<a href='URL DE TUMBLR' target='blank'><img alt='Feed' height='48'
src='http://i.imgur.com/xCwdF0r.png' width='48'/></a>
</div>

Tecnicismos!

el link de tu TWITTER 

el link de tu PAGINA FACEBOOK

el link de tu CANAL DE YOUTUBE

el link de tu TUMBLR 

Para Cambiar de lado los iconos Reemplaza:

left: 5px;
top: 40%;

POR:

right: 5px;
top: 40%;

La altura la aplicamos subiendo o bajando el: top: 40%;