Souldhack
Souldhack necesita de nuestra ayuda! Por favor lee la siguiente nota! Necesitamos tu ayuda! Y apoyanos!

souldhack

Slide like box facebook

Slide like box facebook con jQuery 1.5.2

Escrito por Administrador - 27/octubre/2011


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" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<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

.s_likebox {
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

<div class="s_likebox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'> Aqui pon el codigo de tu likebox de facebook</div></span></div></div>


Sin duda un articulo muy interesante y util para todos los que queremos innovar y mostrar con estilo un likebox, tambien cabe mencionar la gran ayuda de jQuery





Acerca del autor
Manolo M./Administrador
Les cuento un poco sobre mi... soy un aficionado en todo lo relacionado con las paginas web, haora estoy enamorado de mi pagina web en la cual se comparten conocimientos, ideas... Leer mas

 


Algunas categorias
Interesante
Aqui hablaremos de articulos de interes y debate.

Interesante

Recursos
En esta categoria encontraras, recursos utiles para tener un buen desempeño web.

Recursos


 
Site5.com

Souldhack necesita tu ayuda!

Souldhack necesita nuestra ayuda!
Todos podemos ayudar a souldhack entrando al blog Souldhacko Y dandole click a la publicidad y anuncios de google que estan en dicho blog, de esta manera estaremos apoyando y agradeciendo a souldhack por toda su ayuda brindada hacia nosotros!, espero y todos nos apoyen, no saben lo agradecidos que estaremos con todos ustedes!, Recuerden que souldhack! esta echo por y para ustedes!.

¿Que pasa en souldhack y souldhacko?

Recuerda que se están escribiendo artículos recientemente en el blog, Souldhacko


Siguenos en Facebook!

Recent Posts

Cuadro ultimos tweets
Para todos los usuarios de twitter que tienes una web acargo en esencial...

Abril 14, 2012

 
Botones compartir articulos
Cuando un articulo es satisfactorio, o simplemente era lo que estabamos...

Febrero 18, 2012

 
Usar/Utilizar jQuery
Bueno en este tutorial explico como instalar y usar jquery ya sea en un diseño profecional...

Noviembre 13, 2011

 
Cambiar botones a Ice Blue
En este mi mas reciente video subido explico como cambiar los botones de los diseños...

Mayo 3, 2012

 

Chat

Los comentarios...

Los comentarios...

Mi video mas reciente

=> ¿Desea una página web gratis? Pues, haz clic aquí! <=