Desde que actualice la imagen de Cardozo699, uno de los trucos mas pedidos por los lectores ha sido el de los Fanbox de Facebook, Twitter y Google plus que se ven en la parte lateral del Blog, así que hoy me he decidido a compartirlo con todos ustedes.
Este truco es muy fácil de añadir, y lo mejor es que para el efecto deslizante los fanbox y de Facebook y Google Plus usan CSS y no librerías como jQuery que sobrecarguen el blog.
Vista previa del truco (cuando esta desplegado)
Vista previa del truco (cuando esta plegado)
Para añadir este truco a tu blog, solo tienes que ir a Diseño, Añadir Gadget, HTML/JavaScript y pegar lo siguiente:
<style>
#flotante1 {
position:fixed;
top:100px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1002;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante2 {
position:fixed;
top:240px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1003;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante3 {
position:fixed;
top:380px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante1:hover, #flotante2:hover, #flotante3:hover {
right:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
div.likeboxwrap {
margin-top:-5px;
margin-left:-45px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
}
</style>
<!-- Primera pestaña -->
<div id="flotante1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8DoADtnH-rSl6PdqBGZHI429mw4inHgmKii_8Pay0dBHlMUeDKLbPZdeyuWp_EdIVvithfp9o4l41Ln4Ddu4TMVcMDBsy2uORihCk5oIt4JvFx6eTeA5m-yXBnFw7eUAHkurGhf1fZbs/" style="float: left;" />
<div style="background: #3c5a98; border-radius: 0px 0px 0px 10px; height: 325px; margin-left: 38px; padding: 8px 5px 0pt 50px;">
<div class="likeboxwrap">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F
nombre-de-la-página-de-facebook&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350" style="border: none; height: 325px; overflow: hidden; width: 240px;"></iframe>
</div>
</div>
</div>
<!-- Segunda pestaña -->
<div id="flotante2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMaC9qD_oE68paJJYPs4YEA2WVHDYRt_AoY8krw2CmGmvbd7na38IJ9WDXEkvyz3Tp5mXcaN0dFWOZvsyqweN8x62wIhrH37R2OfUe-8an6CIdwnyiNxOH4GlU9OD6ytrrnA9djNyWolQ/s159/goo_tab.png" style="float: left;" />
<div style="background: #9A9FA8; border-radius: 0px 0px 0px 10px; height: 325px; margin-left: 38px; padding: 8px 5px 0pt 50px;">
<div class="likeboxwrap" style="height: 310px !important; padding-left: 20px; padding-top: 15px;">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/
XXXXXXXXXXXX" data-source="blogger:blog:followers" data-width="240">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'es'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
Ahora reemplaza lo que esta en
azul, en el caso de facebook donde deci nombre-de-la-pagina-de-facebook reemplazalo por el nombre de tu pagina en facebook, lo mismo co el usuario de Twitter, lo que cambia es la parte de Google Plus donde dice XXXXXXX la cambiar por tu ID de G+, esta la puedes hallar en la URL de tu perfil o pagina en G+, en mi caso la URL de mi perfil es:
https://plus.google.com/u/0/108279901327219911482/posts
Donde
108279901327219911482 es la ID en G+.
Ahora solo queda que guardes lo cambios.
Espero que les haya servido el tutorial, y sigan visitando Cardozo699 ;)
ACTUALIZACION
Si en el Fanbox de Facebook te sale algún error, es posible que se deba a que no tienes una URL peronalizada en tu pagina de Facebook, en este casos deberar carbiar esta parte:
http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook
Por esta otra:
http%3A%2F%2Fwww.facebook.com%2Fpages%2Fnombre-de-la-página-de-facebook%2FXXXXXXXXXXXXXXX
Ahi además de poner el nombre de tu pagina de facebook donde se indica, deberás añadir en las XXX una serie de numeros que aparecen al final de la URL de tu pagina de Facebook.
Saludos.
