Lo que van a lograr con este tutorial es que al pasar el mouse sobre la imagen se va desplazar nuestra página de facebook.
Lo primero que vamos hacer es pegar el jquery en la plantilla headerinclude, que se encuentra en ACP - Estilos y plantillas - Plantillas - tu theme - Plantillas sin grupo..
Ahora debajo del código que pegaron anteriormente agregan el HTML junto con el código que generaron de su página de facebook..
Despues agregan el código css en su global.css, para los que no saben se encuentra en ACP - Estilos y plantillas - Estilo - Tu theme y editan global.css en modo avanzado..
Por último suben el adjunto dentro de la carpeta images por FTP
Una demo: Foro prueba
PD: Los códigos son sacados de la búsqueda en google.
Lo primero que vamos hacer es pegar el jquery en la plantilla headerinclude, que se encuentra en ACP - Estilos y plantillas - Plantillas - tu theme - Plantillas sin grupo..
Código PHP:
<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>
Ahora debajo del código que pegaron anteriormente agregan el HTML junto con el código que generaron de su página de facebook..
Código PHP:
<div class="s_likebox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'> Aqui pon el código de tu likebox de facebook</div></span></div></div>
Despues agregan el código css en su global.css, para los que no saben se encuentra en ACP - Estilos y plantillas - Estilo - Tu theme y editan global.css en modo avanzado..
Código PHP:
.s_likebox {
float:right;
width:288px;
height:345px;
background: url(images/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;
background: #fff;
width:238px;
height:325px;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}
Por último suben el adjunto dentro de la carpeta images por FTP
Una demo: Foro prueba
PD: Los códigos son sacados de la búsqueda en google.