Facebook LikeBox Flutuante Para Blogger

Eu encontrei um script on-line que adiciona um botão flutuante do Facebook para o lado direito de seus blogs ou sites. O botão ao clicar em slides para a esquerda revelando um Facebook Like Box.

 É um excelente controle deslizante codificado que oculta o Likebox dentro de um contêiner e revela-lo apenas quando os visitantes paira o cursor sobre o botão flutuante. Uma versão de wordpress do widget também será compartilhada hoje inshAllah. Você pode usar o mesmo código para adicioná-lo aos seus sites ou qualquer página da Web que você possa ter. Então vamos adicionar esta Cool Floating Like Box para seus blogs blogger. 

UPDATE: Encontre a versão Wordpress aqui 

Demonstração

Adicione o Likebox flutuante ao Blogger
1. Ir para o Blogger> Layout> PageElements
2. Clique em "Adicionar um Gadget"
3. Escolher Widget HTML/JavaScript
4. Cole o seguinte código dentro dele,

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvzNEJNP4rEl1GOLNyFqEKNgRcmLUYsHmS-CmqYo-qVDFOrCIM2WNDWsYve93HZkPUQLw5ImCcXDlJWmF4pGSI3RIxW2wJ7Mto1Db5fxfy-H6KzQizjzHGbMcvr5kLrErnEko2vXvKXfW/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FSEUID&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://marcosfranciscodesouza.blogspot.com.br/">Canal Marcos Francisco</a></span></div></div>
 
Se você ainda não criou um nome de usuário do Facebook para marcar sua página de fãs, crie em segundos, clicando neste link. Depois de criar um nome de usuário, substitua SEUID com seu nome de usuário recém-criado 

5. Salve seu widget 
6. Agora vá para Modelo> Editar HTML 
7. Procure </head> e logo acima coloque o seguinte código JQuery, (você pode ignorar esta etapa se o Jquery Link já tiver sido adicionado no seu modelo)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
 
8. Salvar o seu modelo e você está pronto! 

Visite seus Blogs para vê-lo flutuando no lado direito de sua página da web. Espero que este widget ajude você a aumentar o número de seus leitores do Facebook. O código do widget foi criado por Harish e compartilhado novamente no MBT. 

Precisa de ajuda?
Se você deseja alterar a largura ou altura do Likebox ou fazer as alterações de imagem, deixe seu comentário abaixo.