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..
<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..
<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..
.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.
+rep muy buen tutorial
joooo, no se que pasa , pero me sale muy mal 
[Imagen: 838Captura.png]
por se acaso os dejo mi codigo
[Imagen: 838Captura.png]
por se acaso os dejo mi codigo
Spoiler:
Agregastes el codigo css en global.css? subiste la imagen?
Asegurate que pegaste el codigo css y subiste la imagen donde corresponde, despues cambia tu codigo por este
Asegurate que pegaste el codigo css y subiste la imagen donde corresponde, despues cambia tu codigo por este
<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
{$stylesheets}{$avvisospiti}
<script type="text/javascript">
<!--
var cookieDomain = "{$mybb->settings['cookiedomain']}";
var cookiePath = "{$mybb->settings['cookiepath']}";
var cookiePrefix = "{$mybb->settings['cookieprefix']}";
var deleteevent_confirm = "{$lang->deleteevent_confirm}";
var removeattach_confirm = "{$lang->removeattach_confirm}";
var loading_text = '{$lang->ajax_loading}';
var saving_changes = '{$lang->saving_changes}';
var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
var my_post_key = "{$mybb->post_code}";
var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}
<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>
<div class="s_likebox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FSKIDROWES%2F233813636704095&width=230&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=326580354064346" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:258px;" allowTransparency="true"></iframe></div></span></div></div>
Tengo un problema, la imagen aparece donde tiene que aparecer. pege le codigo donde pusistes que aya que pegarlo. pero al hacercarle el click sale todo bien la imagen de costado pero se ve blanco no se ve el like box.
www.Force-Gamers.net fijate que lo tengo puesto.
www.Force-Gamers.net fijate que lo tengo puesto.
Tengo un problema, la imagen aparece donde tiene que aparecer. pege le codigo donde pusistes que aya que pegarlo. pero al hacercarle el click sale todo bien la imagen de costado pero se ve blanco no se ve el like box.
http://www.Force-Gamers.net fijate que lo tengo puesto.
http://www.Force-Gamers.net fijate que lo tengo puesto.