Gadget de Facebook estático para blog

Facebook estática Pop Out Like Box Com Jquery para Blogger, esse é muito legal com jQuery  e efeito hover, quando os visitantes passa o curso do mouse sobre a imagem do  Facebook a caixa sai deslizando para a esquerda.

                                             - Demonstração -

Muito fácil à instalação dele

Então vamos La

1. Entre no painel do blogger -> Layout -> Adicionar um gadget ->HTML/JavaScript

2. Em seguida, cole esse codigo:

 <style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("facebook").stop(true,false).animate({right: -303}, 500); });    });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyF7tVv9Ffu2yfdKiuLMFQgv82ycq8D06zqVKqABI6yReEfTWvLMeZBAWfs7AfIpyDJhi17Lx1nPLn-b2IIRGiqv3NxwYNshcLUye5qMMTVFS7xV0ZIN-G19GN5BgzWDnoGEYgPGzaHLk/s1600/helperblogger.com-facebook-icon.png" alt="" /><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fportalnt&&amp;width=200&amp;height=348&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:348px;" allowtransparency="true"></iframe></div></div></div>

 Faça as Modificações pedidas no nome em azul, Coloque o nome do seu face.

Pronto esta feito, Com esse um melhor uso da redes-social e tirar o máximo de proveito. 

 :)