Hola The toro.
Según veo tu mensaje es del 28 de octubre, así que no se si aún estés interesado en saber acerca del tema, de igual manera medio lo explico por si alguien más quiere aplicarlo (
a mi manera, como yo lo haría) ya que desconozco como funciona en ese blog y por el momento tampoco me urge saberlo.
Lo que yo haría para lograr eso, sería combinar html, css y jQuery como sería de esperarse. no lo haré muy especifico, pero si no lo entiendes puedes decirme para hacerlo más puntual (con códigos).
1.- HTML:- Crea el 'div' de dicho elemento y sus "sub-divs" en el caso de que se requieran. | ejemplo:
<div id="facebook">
<div id="box">
Aquí iría el código del 'like box' de Facebook, lo puedes obtener en https://developers.facebook.com/docs/reference/plugins/like-box/
</div>
</div>
2.- CSS:- Añade las reglas de estilo, por ejemplo la que sería necesaria para el caso de (
div id=box):
display cuyo valor sería
none, porque nos interesa que inicialmente este div no se vea, ya que debe aparecer cuando situemos el cursor sobre el mismo. | ejemplo:
div#box {
display: none;
} - También puedes aprovechar y añadir el estilo claro, por ejemplo la imagen de Facebook, el color, el tamaño y la
posición, esta última muy importante para que puedas situarlo en una parte fija de la pantalla como el blog de ejemplo. (supongo que tienes conocimiento básico en html y css, de no ser así dímelo y seré más puntual).
3.- jQuery:- jQuery hará la magia por así decirlo, puedes usar el efecto "Slide" para lograrlo, (
http://docs.jquery.com/UI/Effects/Slide) indicando "left" como el parámetro de dirección (cuyo significado en español sería izquierda, la dirección hacia donde se "abre" el like box de Facebook). todo esto aplicalo como tu más quieras al código. | ejemplo:
$("#facebook").mouseover(function(){
$("#box").show("slide", { direction: "left" }, 1000);
});
(escribí el código de lo que se, así que corregidme si me equivoco por favor), a lo que esto hace referencia más o menos es:
$("#facebook").mouseover(function(){: Al pasar el cursor sobre el
div facebook.
$("#box").show("slide", { direction: "left" }, 1000);: Una vez pase lo anterior, el
div box se abrirá mostrándose hacia la izquierda.
- Tampoco olvides poner el código para que al llevar el cursor fuera del elemento, se vuelva a ocultar y no se quede "abierto"
Bueno creo que es más o menos así, debe ser fácil si sabes lo básico en html, css y js. de igual manera cualquier duda me dices y te responderé en cuanto me sea posible. y si tuve
algún error o me equivoco en algo también pueden hacérmelo saber.
¡Un saludo!
