Hoy os voy a mostrar la forma de
agregar unos simpáticos iconos de redes sociales flotantes en Blogger. Con ellos les permitirá a sus lectores 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 su blog.
En este tutorial, los sitios sociales que he incluido son
Facebook, Twitter, Google+ y RSS. Así que veamos como instalarlos.
1.- Entrar en panel de administración - Diseño - Añadir un gadget HTML/Javascript y pega el siguiente código:
<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='' 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>
2.- Realizar los siguientes y sencillos cambios:
URL DE TWITTER por la vuestra.
URL PAGINA FACEBOOK por la vuestra.
URL DE GOOGLE+ por la vuestra.
URL DE FEEDBURNER por la vuestra.
3.- Cambiar de lado los iconos:
En el código aparecen los iconos en el lateral derecho y a media altura pero pueden cambiarse al izquierdo y con diferente altura y para ello hay que modificar la primera parte del código:
right: 5px;
top: 40%;
por:
left: 5px;
top: 40%;
La altura la aplicamos subiendo o bajando el:
top: 40%;
!Espero que sean de vuestro agrado estos simpáticos iconos!
Publicaciones Relacionadas
trucos blog
