Viendo el interés con el que andamos en estos días por "enchular" los blogs, quiero enseñarles algo que aprendí en la noche de ayer: Cómo poner el Fan Box flotante y con efecto deslizante de Facebook en el blog, tal como lo ven a los lados.
Pues bien, hay que seguir varios pasos, pero si lo hacen bien a la primera les sale.
Lo primero es que su blog tenga portal en Facebook y cuenta en Twitter...quien no sepa me lo dice en un comentario y lo explico.
Si ya lo tienen, viene lo siguiente...
En la página de edición de su blog, buscan el apartado que dice plantilla y les aparecerá algo así:
Luego deberán dar clic al botón que dice
Edición de HTML y aparecerá lo siguiente:
Le dan clic en CONTINUAR y aparecerá el código HTML de la plantilla de su blog, tal como la tienen.
Entonces procedemos a insertar el código:
Buscamos la etiqueta
</head> (oprimiendo Ctrl F y luego escribiendo
</head>) y justo antes de esto pegamos el siguiente script:
<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(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>
Luego buscamos la siguiente etiqueta
]]></b:skin> y antes de ella agregamos lo siguiente:
.slide_likebox {
float:right;
width:288px;
height:345px;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwGtDkOF3w_da_dENUxsvSCDXLMm1Pv75cHFcxqPGl8c57CpBlYwegUndjP7iVyWLY6aQSAG5XaIGfnvbqafo2netOxhk3k6lSXpC-8hQvwLIEy0rjHPV33jWE4ETst63KK9m_TPY6zA/)
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}
Luego le dan
Guardar plantilla. (Si dan clic a vista previa y se ve mal, no se preocupen)
Ahora vamos al apartado diseño
Allí le dan clic a añadir un gadget, buscan HTML/Javascript, pegán lo siguiente y cambian las letras rojas por su dirección de su página en Facebook:
<div class="slide_likebox"> <div style="color: rgb(255, 255,
255); padding: 8px 5px 0pt 50px;"><span><div
class='likeboxwrap'><iframe
src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F
dirección-de-la-página-de-facebook&width=238&colorscheme=light&connections=15&stream=false&header=false&height=350"
scrolling="no" frameborder="0" style="border:none; overflow:hidden;
width:228px; height:320px;"
allowtransparency="true"></iframe></div></span></div></div>
Con esto, ya tendrán su fanbox flotante de Facebook en su página.
Para Twitter, pegan el siguiente codigo antes de </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
//]]>
</script>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox_t").hover(function(){
jQuery(".slide_likebox_t").stop(true, false).animate({left:"0"},"medium");
},function(){
jQuery(".slide_likebox_t").stop(true, false).animate({left:"-250"},"medium");
},500);
return false;
});
</script>
Luego, antes de
]]></b:skin> pegas:
.slide_likebox_t {
float:right;
width:288px;
height:345px;
background: url(http://3.bp.blogspot.com/-QXRO7hJ8j5I/TmF7Wg1GEPI/AAAAAAAAACY/3kN8pabukgg/s1600/twit.png) no-repeat !important;
display:block;
left:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap_t {
margin-top:2px;
margin-left:-45px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap_t iframe {margin:-1px}
Y en diseño abren un nuevo gadget HTML/Javascript y pegán:
<div class='slide_likebox_t'> <div style='color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;'><span><div class='likeboxwrap_t'>
<div id='twitterfanbox'>
<script type="text/javascript">fanbox_init("
usuario");</script></div>
</div>
<style>
.FB_SERVER_IFRAME {
width: 240px !important; /* Ancho */
height: 350px !important; /* Alto */
}
</style>
</span></div></div>
A partir de este 15 de diciembre está disponible para todos los usuarios de la red social más popular del mundo el esperado Timeline, o los nuevos perfiles, anunciado hace ya 3 meses, que a mi juicio no es más la posibilidad de conocer el pasado"ilustrado" de tus contactos.
