box facebook con jQuery
Llego la hora de crear una pastaña lateral desplazadora que al pasar el cursor sobre ella mostra el like box de nuestra pagina de Facebook, para que el dezplasamiento se vea elegante vamos a utilizar jquery, para ser mas precisos la libreria 1.5.2
Par ver com luce el slide pueden verlo en la parte lateral izquierda de mi pagina, ayer lo he puesto y como veran se ve de maravilla.
Asi que vamos a empezar:
Lo primero que vamos a hacer es istalar/poner la libreria jquery y el script del mismo ya mencionados ya que esto nos dara el efecto de desplazamiento. Recuerden que esto es un archivo .js y un script, lo van a pegar justo antes de </body></html>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".s_likebox").hover(function(){
jQuery(".s_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".s_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>
Ya instalada la libreria y el script vamos a pasar con el segundo paso que es darle el diseño css, aqui usaremos la posicion fixed y lo alinearemos en la parte lateral derecha justo como se muestra a continuacion. Recuerden que esto es un codigo css y lo deven pegar en CSS-CODE
float:right;
width:288px;
height:345px;
background: url(https://lh6.googleusercontent.com/-VW_GzzYnZJ0/TkiZQFcBc2I/AAAAAAAABmg/fa9_qWV8Cu4/fb_bg.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}
Ya pegado el estilo y diseño css de nuestro slide pasaremos al ultimo paso... que es mostrar el slide mediante html, cabe mencionar que si pegan este html en una pagina en especifico solo se vera en esa pagina, para que es slide se vea en todas las paginas deveremos pegarlo en Texto por debajo de la página.Recuerden que esto es un codigo HTML y lo deven pegar en Texto por debajo de la página justo antes de </body></html> para que es slide se vea en todas las paginas