Mil Trucos Blogger

El Fanbox de Twitter, flotante y con efecto deslizante

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Estos dias he recibido varias consultas de personas que me han pedido la version para Twitter del fanbox flotante,pues bien basandome en la creacion del Potro El Fanbox de Facebook Flotante,he creado una adaptacion de dicho fanbox para Twitter.

Para añadir dicho fanbox ve a la Edición de HTML y antes de </head> pega lo siguiente:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>

Ahora antes de ]]></b:skin> agrega los estilos:

 .slide_likebox {
float:right;
width:288px;
height:345px;
background: url(http://4.bp.blogspot.com/-1Bwy7Br6OeQ/TuqLoITm9UI/AAAAAAAAAoE/TXulC2hQoo0/s1600/tw_ag.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}

Guardas los cambios y ahora vas a  Diseño| Añadir gadget | HTML/Javascript,alli pegas lo siguiente:

<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox">
<script type="text/javascript">fanbox_init("Tu Usuario");</script></div></div></span></div></div>

Reemplazas Tu Usuario por el nombre de tu usuario en Twitter sin @,el resultado final lo pueden ver en el siguiente blog de pruebas.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

41 Comentarios

  1. diciembre 15, 2011    

    Gracias Juvinao! Por fin lo consigo! Y te hago una consulta! no importa si no se puede! si quiero ponerle mis ultimos twets eso es posibe en vez de mis seguidores? 😀 Espero tu respuesta saludos! :buenpost: :] :headbang:

  2. diciembre 16, 2011    

    Administrador@ que bueno que hayas podido agregar el truco bueno intentare a ver que puedo hacer.

    Saludos 😈

  3. diciembre 16, 2011    

    Gracias Saludos! 😛

  4. diciembre 16, 2011    

    Administrador@ de nada 😀

  5. diciembre 16, 2011    

    Otra cosilla Bro! Mira yo encontre esto → http://loseasi.blogspot.com/2011/10/seguidores-blogger-twitter-y-facebook.html Sabes¿?!…
    Es un ”seguidores de blogger twitter y facebook”.
    A mi me gustaria poner solo el de twitter y facebook pero con efecto deslizante, osea con jQuery Tu me darias el codigo para hacerlo?¿ Desde ya muchas gracias por toda tu paciencia y ayuda Saludos!!! 😀

  6. diciembre 17, 2011    

    Administrador@ ok tratare de hacerlo pero eso si dame un tiempillo para hacer pruebas con los codigos y si resulta algo bueno lo publico,ok.

    Saludos 😎

  7. diciembre 17, 2011    

    Magnífico gadget, te ahorra bastante espacio en la sidebar, tengo que probarlo a ver que tal va.

    Excelente aporte compañero, saludos!

  8. diciembre 17, 2011    

    Hola apenas el día de hoy ley tu comentario, perdón por copear tu post pero solo estaba haciendo unas pruebillas nada de afectar tu gran esfuerzo, y descuida ya no vuelve a suceder saludos man 😀

  9. diciembre 17, 2011    

    Que buena información muchas gracias por compartirla.
    Visiten nuestro sitio web

  10. diciembre 17, 2011    

    Dryken sin duda alguna ahorra un gran espacio.

    Blosk Sánchez ok amigo no hay problemas com tal de que no vuelva a suceder. :shrug:

    Saludos

  11. diciembre 17, 2011    

    Sarasota Computer Services Intl gracias por comentar.

  12. diciembre 17, 2011    

    Ok Juvinao gracias por tu esfuerzo y dedicacion 😉 Saludos

  13. diciembre 23, 2011    

    eres grandioso, tambien vi un blog, con ese mismo efecto deslizante pero para seguir el blog, mediante el gadget que proporciona blogger, quien sabe como lo hizo.. jejeje saludos

  14. Anonymous Anonymous
    febrero 4, 2012    

    hola sepodria poner algo asi en una pagina web

    • febrero 4, 2012    

      A decir verdad no tengo ides,pero creo que si porque esto es HTML y CSS lenguajes web standar.

  15. Anonymous Anonymous
    febrero 5, 2012    

    mmm por si un dia tienes la idea de como seguire pendiente de tu blog para seguir las instrucciones, gracias xD

    • febrero 5, 2012    

      Ok amigo intentare hacer algo por ti,Saludos

  16. febrero 12, 2012    

    puse el de twitter y de facebook los dos juntos pero solo el de twiiter se ve.. q puedo hacer.. si pueden me dan un mensajito a shulsito@facebook.com para ver la respuesta aqui…

    • febrero 12, 2012    

      Pues amigo no se que pueda ser el problema,asi que revisare el codigo para ver cual es el problema.

  17. febrero 15, 2012    

    xqe me sale de afuera twitter y cuando abro me sale facebook?

  18. febrero 19, 2012    

    ami tambien me pasa :S

    • febrero 19, 2012    

      Ese problema de verdad no lo sabia,mirare cual es la solucion.

    • febrero 20, 2012    

      envia solucion x fa

  19. febrero 26, 2012    

    Juvinao puedes haces el fanbox de twitter y facebook que se vea por la derecha de la pantalla?

  20. abril 3, 2012    

    hola amigo gracias por el codigo, pero tengo una duda. como ya tengo el del facebook a la derecha, quisiera colocar el del twitter a la derecha… sera que este se puede modificar para tal efecto? gracias!! 🙂

    http://premiumhunt2012.blogspot.com/

  21. mayo 7, 2012    

    Hola Amigo,

    Muy bueno este tutorial, habra algo parecido para WordPress? o bien donde pongo ese codigo que en blogger seria en ” Diseño| Añadir gadget | HTML/Javascript”?

    Saludos y espero tus respuestas

    • mayo 7, 2012    

      En wordpress seria “Apariencia,Widgets,Texto”..

      Pero no se si este truco funcione en WordPress.

  22. junio 1, 2012    

    Saludos!! gracias por el tutorial! lo coloque en mi blog, pero por alguna razon la imagen del fanbox no se desliza… que puedo hacer?

    • junio 1, 2012    

      Ricardo estuve revisando tus blogs y no veo en niguno de ellos el fanbox,talvez el error se deba a la version de jquery que tienes en tu blog.

  23. junio 3, 2012    

    Tengo ese gadget pero de facebook y lo tengo posicionado en el medio. Al añadir este, cómo hago para que uno quede debajo del otro?? en qué parte del código está el posicionamiento??
    Gracias

    • junio 3, 2012    

      Rikardo para manipular este truco hazlo desde el CSS pero te recomiendo que solo pongas uno de los dos ya que que usando los dos tu blog cargara muy lento.

  24. junio 5, 2012    

    hola que t al saludos… mi cuestion es que bueno el deslizante que muestras es para el lateral derecho pero como puedo hacer para que pueda ponerlo delk lado hisquierdo ya que en el derecho ya tengo el da facebook…te agradeceria mucho la ayuda….

    • junio 6, 2012    

      Bueno amigo dejame revisar el codigo un poco y mañana te doy una respuesta.

  25. junio 5, 2012    

    hola que tal juvinao saludos mi pregunta es como podria poner el deslizante de twitter del lado isquierdo ya que en el derecho ya tengo el de facebook.. agradeseria mucho la ayuda…

  26. julio 8, 2012    

    Exelente post “lo estaba buscando” está muy bueno, aunque tuve que configurarlo un poco para ponerlo a mi gusto!!

    • julio 8, 2012    

      Que bueno que hayas encontrado en mi blog lo que buscabas,Saludos 😀

  27. diciembre 1, 2012    

    muy bueno!… solo una consulta, me sale el recuadro perfecto y se desliza tambien perfecto, pero no se ve el contenido una vez abierto, sale en blanco… por que puede ser?. agradeceria una respuesta 🙂

    • diciembre 3, 2012    

      Amigo lo que pasa es que el script del fanbox de twitter esta fallando, tengo que actualizar la entrada con otro script, estos dias lo hare 😛

    • enero 19, 2013    

      A mi me pasaba lo mismo Josu y lo que pasaba es que cambie de Usuario y una vez que cambias de usuario no se te vera si no lo modificas en el codigo revisa tu usuario que tienes puesto y mira a ver si es el mismo usuario que usas porque a mi me funciona.

      Espero averte ayudado. Saludos 🙂

    • enero 21, 2013    

      Alberto gracias por tu aporte a la entrada, de hecho el script ya funciona.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo