Iconos flotantes de tus redes sociales para blogger

Hoy te  voy a mostrar la forma de agregar unos simpáticos iconos de redes sociales flotantes en Blogger como los que puedes observar a tu izquierda. Con ellos les permitirá a tus lectores del blog que se conecten o suscriban a tu blog a través de los diferentes medios sociales. Se encuentran flotando a la derecha o la izquierda de su blog.

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

Antes que nada les dejo una vista previa de como se miran los iconos. 


Para añadir estos iconos a tu blog debes ir a tu pagina de Diseño y añadimos un nuevo Gadget de tipo HTML/JavaScript ahy copeas y pegas este codigo:

<style type="text/css">.redes-flotantes {
position: fixed;
right: 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='https://lh3.googleusercontent.com/-HiZe1pm_Rok/ToE0l_3Wl4I/AAAAAAAACvY/ztE85o-w3Lg/s800/Fa_Twitter_creatures.png' width='48'/></a>

<!-- Facebook -->
<a href='URL PAGINA FACEBOOK' target='blank'><img alt='Facebook' height='48' src='https://lh3.googleusercontent.com/-QaLRred01jw/ToE0l2ruGBI/AAAAAAAACvc/ydfvF-xOi_4/s800/Facebook_creatures.png' width='48'/></a>

<!-- Google+-->
<a href='URL DE GOOGLE+' target='blank'><img alt='Feed' height='48' src='https://lh5.googleusercontent.com/-dUIx19LJB_A/UYqbVu4cK_I/AAAAAAAALeI/p7qqF1vg3ng/s48-no/google%252B.gif' width='48'/></a>

<!-- RSS -->
<a href='URL DE FEEDBURNER' target='blank'><img alt='Feed' height='48' src='https://lh5.googleusercontent.com/-16rpSgs_Rdk/ToE0l6-gnjI/AAAAAAAACvg/pbKahocVGVg/s800/Feed_creatures.png' width='48'/></a> </div>

Antes de guardar debes introducir tus respectivos links marcados en color rojo para cada red social.

NOTA: Si quieres cambiar de lado debes cambiar el right:5px por left:5px.
La altura la aplicamos cambiando el top:40%;.