13 mayo 2013

Redes Sociales con efecto deslizante (lateral blog)


redes sociales

Anteriormente ya vimos como colocar unos simpáticos iconos flotantes de Redes Sociales y para continuar ahorrando espacio en nuestros Blog, hoy os muestro otra forma de hacerlo y es colocando en el lateral las redes sociales de más auge en estos momentos (Facebook,Twitter,Google+,Pinteres,Youtube y nuestro feed).

Este gadget los muestra en el lateral del blog y con un efecto deslizante y al colocar el cursor sobre los iconos van a salir lentamente.

1.- Entrar en panel de administración - plantilla - buscar (f3 o ctsl+f) </head> y pega justo antes el siguiente script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
$(window).load(function(){
$(&#39;.botones-sociales .social&#39;).mouseenter(function(){
$(this).stop();
$(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
});
$(&#39;.botones-sociales .social&#39;).mouseleave(function(){
$(this).stop();
$(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
});
});
</script>

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

<style type="text/css">
.botones-sociales {
position: fixed;
top: 130px;
width: 45px;
z-index: 9999;
}
.izquierda {
left: 0;
}
.derecha{
right: 0;
}
.botones-sociales #twitter-btn .social,
.botones-sociales #facebook-btn .social,
.botones-sociales #google-btn .social,
.botones-sociales #rss-btn .social,
.botones-sociales #pinterest-btn .social,
.botones-sociales #youtube-btn .social {
background-color: #33353B;
background-image: url(https://lh4.googleusercontent.com/-YvuT8p88fv8/UfENL6P-ROI/AAAAAAAAMdQ/sJGzNVgLf2U/w23-h256-no/mas-icons.png);
}
.izquierda #facebook-btn span {
background-position: right 10px;
}
.izquierda #twitter-btn span {
background-position: right -35px;
}
.izquierda #google-btn span {
background-position: right -127px;
}
.izquierda #rss-btn span {
background-position: right -80px;
}
.izquierda #pinterest-btn span {
background-position: 11px -177px;
}
.izquierda #youtube-btn span {
background-position: 11px -223px;
}
.derecha #facebook-btn span {
background-position: 12px 10px;
}
.derecha #twitter-btn span {
background-position: 11px -35px;
}
.derecha #google-btn span {
background-position: 10px -127px;
}
.derecha #rss-btn span {
background-position: 11px -80px;
}
.derecha #pinterest-btn span {
background-position: 11px -177px;
}
.derecha #youtube-btn span {
background-position: 11px -223px;
}
.botones-sociales #facebook-btn:hover .social {
background-color: #3B5998;
}
.botones-sociales #twitter-btn:hover .social {
background-color: #62BDB2;
}
.botones-sociales #google-btn:hover .social {
background-color: #DB4A39;
}
.botones-sociales #rss-btn:hover .social {
background-color: #FF8B0F;
}
.botones-sociales #pinterest-btn:hover .social {
background-color: #D43638;
}
.botones-sociales #youtube-btn:hover .social {
background-color: #C4302B;
}
.botones-sociales a:hover .texto{
display: block;
}
.izquierda .social {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: left;
height: 43px;
margin-bottom: 2px;
width: 43px;}

.izquierda .texto{
display: none;
float: right;
font-size: 1em;
font-weight: bold;
margin: 11px 40px 11px 0px;
white-space: nowrap;
}
.derecha .social {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: right;
height: 43px;
margin-bottom: 2px;
width: 43px;}

.derecha .texto {
display: none;
float: left;
font-size: 80%;
font-weight: bold;
margin: 11px 0 11px 40px;
white-space: nowrap;
}
.botones-sociales .texto{
color: #FFFFFF;
}
</style>

<div class='botones-sociales derecha hidden-phone hidden-tablet'>
<a class='itemsocial' href='url de facebook' id='facebook-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Facebook</span></span></a>
<a class='itemsocial' href='url de twitter'id='twitter-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Twitter</span></span></a>
<a class='itemsocial' href='url de google+' id='google-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Google</span></span></a>
<a class='itemsocial'href='url de pinterest 'id='pinterest-btn' target='_blank'><span class='social'>
<span class='texto'>Síguenos via Pinterest</span></span></a>
<a class='itemsocial' href='url de youtube' id='youtube-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Youtube</span></span></a>
<a class='itemsocial' href='url del feed' id='rss-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via RSS</span></span></a>
</div>

Cambiamos las url de nuestras redes sociales y listo.

Las dudas que te hayan quedado sobre este tutorial, por favor, déjamelas en el espacio de comentarios, te contestaré lo antes posible.


76 comentarios

Este comentario ha sido eliminado por el autor.

Hola! Muchas gracias por la aplicación, me gusta mucho ^^

Quería hacer una consulta, ya que los botones aparecen pero no me funciona el efecto deslizante. :(

Saludos!

Ancel tienes la librería jquery.min.js instalada 4 veces, con solo una vez, ya vale para todo lo que necesite "jquery".

Muchas gracias. Disculpa la ignorancia, en realidad no sé mucho sobre la edición html ^^'

Decís que tengo instalado el mismo script 4 veces, no? entonces borrando 3, lo demás debería seguir funcionando supongo :)

Voy a hacer el intento :3 muchas gracias por la ayuda! :D

Disculpa si molesto pero, ¿qué parte de cada jquery.min.js debería borrar? No tengo mucha idea del asunto >.<'...

Ancel, antes de nada copia de seguridad de la plantilla por si algo te sale mal.

Luego con dejar solo este script te vale: script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'>

Elimina:
3 de este -- script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'>

1 de este-- script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'></script.

excelente justo lo que quería una ves mas gracias :D

Hola! me gustan mucho estos iconos flotantes pero quisiera saber como pueden cambiarse de lado. Me interesaria ponerlos en el lado izquierdo.

Gracias!

Ainara, para cambiarlos hacia la izquierda tan solo debes cambiar del segundo código todos los right por left, creo que son 7 en total.

Saludos

Hola... una duda, como le hago para que no aparezcan todos los iconos, ya que no manejo todas esas redes sociales.

Saludos!

Dulce Iveth, Debes eliminar del último código en la parte final lo que no necesites.

Ejemplo para eliminar el feed:

Desde <a class......url del feed..........................................................................</a>

Este comentario ha sido eliminado por el autor.

Hola, yo he eliminado una versión anterior de jquery pero aunque los botones aparecen, no me funciona el efecto deslizante. ¿Podrías ayudarme a detectar el problema? el blog está en desarrollo: http://garciajoiers.blogspot.com.es/

tengo un botón de ir arriba con jquery, ¿puede que sean incompatibles?

Iván, hay algunos script que son incompatibles.
Primero guarda la plantilla y luego ve probando eliminando uno por uno los script y comprobando.
Eliminas uno, compruebas y si no vá, vuelve a colocarlo...así hasta que lo soluciones.

Desde aquí me es imposible detectartelo.

Saludos Sr. Excelentes aportes varios de los trucos aca publicados por usted los he puesto en mis blogs... muchas Gracias!!! Exito en todo lo que hace usted!!!

Este comentario ha sido eliminado por el autor.

Hola. Como puedo saber cual de los scripts es compatible? Porque a mi tambien me aparece los iconos pero no se deslizan. Saludos

David, si no dejas dirección del blog, difícilmente pueda ayudarte.

saludos y gracias por el aporte, una duda, sí quisiera agregar otro boton? en mi caso quisiera agregar mi Deviantart ¿cómo le hago? gracias de nuevo

Adrián si tienes conocimiento de photoshop y html no es complicado, tan solo debes modificar esta imagen http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png, colocarle tu Deviantart y añadirle el css.

Si no tienes conocimiento, te va resultar complicado.
Saludos.

oy ingrese a mi blogger y pas ya no aparecen los iconos puedes solucionarlos

Noe ya está solucionado, cambia esta url: https://lh4.googleusercontent.com/-YvuT8p88fv8/UfENL6P-ROI/AAAAAAAAMdQ/sJGzNVgLf2U/w23-h256-no/mas-icons.png
por esta otra
https://lh4.googleusercontent.com/-YvuT8p88fv8/UfENL6P-ROI/AAAAAAAAMdQ/sJGzNVgLf2U/w23-h256-no/mas-icons.png

Hola ya le intente como dijiste pero ami no me funciona sigue asi.

Hola amigo, a mi tampoco me funciona el efecto deslizante: foro-ptc.com

ya lo cheke y gracias ahora tengo esta duda mira en mi blogger pongo enlaces con imagen si me entiendes no al dar clik en la imegen se abre el enlace lo que quiero es que al dar click en la imagen se abra dos enlases mm me explice bien

error en la sintaxis


linea

$('.botones-sociales .social').mouseenter(function(){

$('.botones-sociales .social').mouseenter(function(){

Buenas noches ayudame con este problema me muestra error en esta linea:$('.botones-sociales .social').mouseenter(function(){, ademas las redes me aparecen vertical y no horizontal

Greisy, si no te muestra el efecto es porque tienes algún script que es incompatible con este truco.

Ola muy buen aporte... tengo una consulta... como ago para modificar las imagenes de facebook y esas...? no veo la direcion para modificar espero que me dees una pauta.

Ciber la imagen es esta: https://lh4.googleusercontent.com/-YvuT8p88fv8/UfENL6P-ROI/AAAAAAAAMdQ/sJGzNVgLf2U/w23-h256-no/mas-icons.png, debes tener un poco de experiencia en photoshop para modificarla.

Saludos

gracias no lo avía notado por que es todo de color blanco... y fondo transparente... muchas gracias...

Cómo puedo incluir otros logos, de redes sociales? Tumblr, Instagram, Linkedin, flikr... :)
Muchas gracias por la aportacion

María, para integrar otros logos debes tener un poco de conocimiento en photoshop, pero al hilo de esto, alguién me envió un email solicitando la eliminacion de Google+ y Pinterest y en su lugar colocar Instagram y tumblr.

Aquí te dejo el link: Imagen de redes

Debes eliminar la anterior imágen y en su lugar colocar esta, cambiando claro está, todos los enlaces de google y pinterest.

Saludos.

Este comentario ha sido eliminado por el autor.

ya está lo he conseguido... creo. muchas gracias!!!

Yo tampoco conozco muy bien HTML pero me he guiado por distintos comentarios y experimentando he solucionado tu mismo problema. Yo también agregué este mismo gadget (y está genial) y entró en conflicto con un Pop Up de facebook que integré. El código que te menciona Sevillista (libs/jquery/1.8.3/jquery.min) es el de la librería y su versión y tú tienes 4 librerías más, a saber: 3 de la versión 1.7.1 y una de la versión 1.7.0 Si a eso le sumamos que tienes la que viene con este gadget 1.8.3 ...tienes 5.

Entonces, busca en cuál de tus gadgets tienes las restantes librerías y sólo deja la más actual (1.8.3) y con eso quedará solucionado. Yo así lo sulucioné después de unos 40 minutos de estarle dando vueltas al asunto.

Gracias Sevillista, me sacaste de dudas sin contestarme directamente la pregunta. Los resultados están en mi blog: http://ergofelixculpa.blogspot.com/

Hola lo he intentado de mil maneras dejando solo un jquery y no hay manera de que funciona

Juan, primero haz una copia de la plantilla y a continuación sigue estos pasos.
1.- Elimina este código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

2.- ahora busca lo siguiente :

<script>
$(window).load(function(){
$('.botones-sociales .soci

3.- y pegas el siguiente código antes de lo anterior

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>

Espero que con esto se resuelva.

Hola! Quería saber cómo, además de la redes sociales que ya tenemos, puedo introducir linkedin y bloglovin. O sea, antes a María le has dado un link con diferentes redes sociales, pero yo quería saber como integrar todas: es decir, las que nos has dado más linkedin y bloglovin.
Mil gracias sevillista!

Beatriz, aquí te lo dejo totalmente modificado, elimina el paso 2 y en su lugar coloca esto:
Código Beatriz

no me anda el efecto hacia la izquieda?
y como muevo todo el sidebar mas a la izquierda?
gracias

Alex, no soy adivino, si no me dejas la dirección url de tu blog, dificílmente pueda ayudarte.

http://www.tkd-ashdod.com/%D7%A0%D7%99%D7%A1%D7%99%D7%95%D7%A0%D7%95%D7%AA-1-1-1-1-1.html

Hola, funciona bien, pero no tengo el efecto deslizante alguien me puede ayudar?
Activaré "avisarme" por si alguien responde.
mi web: www.consejosdelimpieza.com
Gracias.

Eres un genio... será posible añadir el instagram?

Sergio, según puedo observar te falta el primer código de este tutorial, míralo bien.
En cuanto a Instagram, si lees los comentarios puedes solucionarlo.

Hola muchas gracias por tu aporte pero no me logra el efecto deslizante sera que me ayudas con eso? aca esta mi web. http://aldeaeloyggonzalez.comxa.com/

Este comentario ha sido eliminado por el autor.

XXXjoder ya he comprobado que lo has solucionado, perdona pero estoy bastante ocupado.
A veces leyendo los comentarios se solucionan los problemas.

si amigo muchas gracias de todas manera,

Hola amigo, estoy haciendo una pagina http://daddigital.co para mi universidad pero en las redes no me funciona el efecto deslizante, es posible por favor me oriente que debo hacer, gracias

Jady, te comunico lo mismo que en el comentario 7b, hay script que son incompatibles con otros.

Bro hize de todo con los javascript y como quiera no se desplegaron

http://bajatusprogramas.blogspot.com/

Hasta busque mas librerias y nada
http://yourjavascript.com/9133056165/jquery-1-11-2-min.js

The Big, observo que en el blog http://bajatusprogramas.blogspot.com.es/ funciona perfectamente los dos enlaces que tienes puesto (facebook y youtube)

EN FIREFOX SI SALEN, PERO A LA HORA DE VERLOS EN GOOGLE CHROME NO SALE NADA, A QUE SE DEBE??

Eduardo es raro lo que te ocurre pero de momento deberías eliminar 2 de los 3 script jquery.min.js de los que tienes ya que con 1 es suficiente.
Puede que sea el motivo porque entren en conflicto entre ellos.

hola sevillista. e puesto todo correctamente, o nose si lo e hecho bien pero nose desplaza el lateral. me podrias decir si tengo bien puesto el codigo. esta es mi web. http://zonatvs.blogspot.com.es/ que falla? gracias.

ADTM, en primer lugar deberías organizar un poco la plantilla y eliminar algunos script que no te valen para nada.
Ejemplo este script no te vale: <script src='http://cositasarchivos.webcindario.com/jquery-1-4-2-min.js' type='text/javascript'>

Aparte tienes instalada la librería jquery.min.js 4 veces en diferentes versiones, dejando esta 1.8.3/jquery.min.js tienes suficiente.

Otra cosa es que tienes el blog desplazado....demasiada publicidad....etc...etc..

hola ya e quitado ese script. como quito esas librerias? como que mejor añado otro gadget no? xd y que significa desplazado? gracias por los consejos.

hola, tienes razon, e creado otro blog y funciona a la perfeccion. creo que mi plantilla tiene mucha tralla como tu dices. mejor elegire otra herramienta social. muchas gracias.

hola consegui ponerlo, no era problema del codigo ni de ningun script. era una herramienta social llamada sharethis.com.que estaba molestando. lo digo por si le pueda pasar a alguien tambien. nada mas, gracias por la ayuda intentare mejorar la web. gracias por los consejos. un saludo.

Este comentario ha sido eliminado por el autor.

ponga el codigo en el script asi



$(window).load(function(){
$('.botones-sociales .social').mouseenter(function(){
$(this).stop();
$(this).animate({width:160}, 500, 'easeOutBounce', function(){});
});
$('.botones-sociales .social').mouseleave(function(){
$(this).stop();
$(this).animate({width:43}, 500, 'easeOutBounce', function(){});
});
});



espero que le funcionen

Hola buenas!
He dejado solo los links de facebook y twitter y me gustaría añadir el instagram. He probado con los links que les has dejado a otras personas para modificar en facebook pero no se me carga ningun archivo o imagen....
Como lo podría hacer?

Muchas gracias.

He conseguido poner una tercera pestaña donde el link y el escrito es de instagram pero el logo es de RSS. He cambiado la imagen por el link que le diste a Maria pero sigue sin relacionarseme con el icono de instagram.

Iván en la segunda parte del código coloca este en lugar del de la entrada, lleva facebook, twitter, instagram y rss.

<style type="text/css">
.botones-sociales {
position: fixed;
top: 130px;
width: 45px;
z-index: 9999;
}
.izquierda {
left: 0;
}
.derecha{
right: 0;
}
.botones-sociales #twitter-btn .social,
.botones-sociales #facebook-btn .social,
.botones-sociales #google-btn .social,
.botones-sociales #rss-btn .social,
.botones-sociales #pinterest-btn .social,
.botones-sociales #youtube-btn .social {
background-color: #33353B;
background-image: url(http://4.bp.blogspot.com/-ukgG_UECCis/Uicd9wvYSyI/AAAAAAAAMjM/9rndQ0MheYM/s1600/iconos.png);
}
.izquierda #facebook-btn span {
background-position: right 10px;
}
.izquierda #twitter-btn span {
background-position: right -35px;
}
.izquierda #google-btn span {
background-position: right -127px;
}
.izquierda #rss-btn span {
background-position: right -80px;
}
.izquierda #pinterest-btn span {
background-position: 11px -177px;
}
.izquierda #youtube-btn span {
background-position: 11px -223px;
}
.derecha #facebook-btn span {
background-position: 12px 10px;
}
.derecha #twitter-btn span {
background-position: 11px -35px;
}
.derecha #google-btn span {
background-position: 10px -127px;
}
.derecha #rss-btn span {
background-position: 11px -80px;
}
.derecha #pinterest-btn span {
background-position: 11px -177px;
}
.derecha #youtube-btn span {
background-position: 11px -223px;
}
.botones-sociales #facebook-btn:hover .social {
background-color: #3B5998;
}
.botones-sociales #twitter-btn:hover .social {
background-color: #62BDB2;
}
.botones-sociales #google-btn:hover .social {
background-color: #DB4A39;
}
.botones-sociales #rss-btn:hover .social {
background-color: #FF8B0F;
}
.botones-sociales #pinterest-btn:hover .social {
background-color: #D43638;
}
.botones-sociales #youtube-btn:hover .social {
background-color: #C4302B;
}
.botones-sociales a:hover .texto{
display: block;
}
.izquierda .social {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: left;
height: 43px;
margin-bottom: 2px;
width: 43px;}

.izquierda .texto{
display: none;
float: right;
font-size: 1em;
font-weight: bold;
margin: 11px 40px 11px 0px;
white-space: nowrap;
}
.derecha .social {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: right;
height: 43px;
margin-bottom: 2px;
width: 43px;}

.derecha .texto {
display: none;
float: left;
font-size: 80%;
font-weight: bold;
margin: 11px 0 11px 40px;
white-space: nowrap;
}
.botones-sociales .texto{
color: #FFFFFF;
}
</style>

<div class='botones-sociales derecha hidden-phone hidden-tablet'>
<a class='itemsocial' href='url de facebook' id='facebook-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Facebook</span></span></a>
<a class='itemsocial' href='url de twitter'id='twitter-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Twitter</span></span></a>
<a class='itemsocial' href='url de instagran' id='google-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Instagram</span></span></a>

<a class='itemsocial' href='url del feed' id='rss-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via RSS</span></span></a>
</div>

gracias por la entrada pero no me aparece toda la imagen del icono porque?

Hola, este post era lo que estaba buscando... Una pregunta: Cómo hago para que se cambie para el lado izquierdo?
gracias....


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"