08 mayo 2013

Agregar unos simpáticos iconos flotantes de Redes Sociales en Blogger

redes sociales flotantes

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!


21 comentarios

muy bueno me gusto mucho ya la estoy usando...
ey una pregunta... ¡Tu sabes que quiero cambiarle el tamaño y el tipo de fuente a los titulos de las publicaciones! ¿Que codigo debo buscar y cambiar?

Elvis, debes buscar: .post-title{color:#010101;margin: 0 0 10px 0;padding:0px;font-family:Arial,Helvetica,Sans-serif;font-size:18px; y en font-family:(tipo de fuente) y font-size (tamaño de la fuente).

Saludos.

Muchas Gracias... me ayudaste mucho..
Saludos

Si no sabes la respuesta no borres las preguntas!!!
Por cierto...viva el betis!

Ainara, no es mi estilo eliminar comentarios que no conlleven insultos u otro tipo de aberraciones.
Por no saberlo, no elimino ningún comentario, solo soy un aficionado de esto no soy Albert Einstein.

Saludos.

Este comentario ha sido eliminado por el autor.

Hola, muy buenos tutoriales, ma han servido mucho. Me preguntaba si es posible disminuir el"agrandamiento" cuando se pasa el mouse por el ícono, quisiera que se "agrandara" levemente. Saludos y muchas gracias.

como cambiar la imagen del vinculo por que no lo ago desde codigo y todo ok pero al querer verla no se muestra sino que solo sale el nombre de la imagen veo que vinculas las imagenes de un sitio remoto saludos y excelente post eres muy bueno

Huy me encanto!! y es fásil de editar tanto en tamaño de las imagenes como tambien escojer que imagen usar en ves de esos pequeños simpaticos :3 Graciass!!! Saluditos ~

Me alegro que te hayan gustado Javiera.

Carlos no entiendo lo que me quieres decir, explícamelo un poco más detallado.

Buenos dias, gracias por interesante entrada ha sido muy util, tengo problemas con el enlace de facebook, no me sale, me puedes orientar.... mil bendiciones... gracias...

Martín, si no me dejas la dirección de tu blog no podré ayudarte.

Hola Amor Sevillista, soy yo otra vez :)
Mira, es que en la página del demo no aparecen los íconos flotantes... Ando buscando algo así, para que no me ocupe espacio dentro del cuerpo del blog, sino que sean flotantes. Pero me gustarían así como los que tienes aquí mero arriba, ésos en tonos de grises.
¿Tienes el tutorial para ésos?

LaProfe esos iconos están aquí: http://www.amorsevillista.com/2013/02/iconos-de-redes-sociales-con-efecto-zoom.html

Para hacerme administrador de tu blog sigue estos pasos:
Configuración-Permisos-Autores del blog -+ Añadir autores -coloca mi email:antonioperezvidal@hotmail.com - invitar autor - y cuando yo acepte vuelves de nuevo - click en autor de mi email y colocas administrador-guardar.

¡Sí, ya los puse en mi blog! :D Se ven muy bonitos, ¡muchas gracias!

Ahora sólo me queda la duda de si el carrusel de entradas recientes puede configurarse para que sea continuo :) ¿Se podrá?

Listo, Amor Sevillista. Te he mandado la invitación para ser autor de mi blog; espero en Cristo que puedas ayudarme con ese detallito de que no se ve la última entrada, sino que se brinca a la penúltima :)
Y también a ver si se puede lograr que sea continuo :D

Hola, Nitro Sonic. Mi blog es http://creciendoenvictoria.blogspot.mx

LaProfe, ahora debes volver a configuración-permisos-click en mi nombre donde pone autor y colocar "administrador".
Tras esto ya puedo acceder totalmente al blog.

Listo, Amor Sevillista... Ahora eres Administrador de mi blog :)


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"