Box flutuante do Facebook para Blogger

Olá blogueiros, hoje iremos aprender como adicionar uma caixa de fãs do Facebook com efeito expansível em seu blog. Essa box possui um efeito bem interessante que faz aparecer um botão do Facebook fixo do lado direito, e quando o leitor passa o mouse, ela se expande, aparecendo a caixa de fãs padrão da rede social. Tudo isso usando o framework Jquery.

• Clique aqui para ver uma demonstração.

Vamos ao tutorial:

1° passo: Acesse o painel do Blogger, escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar HTML".

2°passo: Agora usando o Ctrl F, procure por:
</head>
3° passo: E acima dele adicione o seguinte código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>
4° passo: Clique em "Salvar modelo" e feche a edição de HTML.

5° passo: Agora selecione a guia "Layout", clique em "Adicionar gadget" e escolha a opção "HTML/JavaScript".

6° passo: Deixe a opção "Título" em branco e cole o seguinte código na caixa do gadget:
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".box-flutuante-facebook").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.box-flutuante-facebook{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge05P2t5zjQjTNAlngRP8toMXcc2tAIXumYXzvyrqlO5xpiN388t93JpNruI3VzD4fXpvyjHWCZJf0FvGf-E0cJtnZq-no9dhv6FVtiZkWhSH4oK0ohWiS7a1JgdfTLGNdTGOuPRvRHc0/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.box-flutuante-facebook div{border:none;position:relative;display:block;}
.box-flutuante-facebook span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.box-flutuante-facebook span a{color: #808080;text-decoration:none;}
.box-flutuante-facebook span a:hover{text-decoration:underline;}
</style>
<div class="box-flutuante-facebook" style="">
<div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=URL-DA-SUA-PÁGINA-DO-FACEBOOK&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe>
</div>
</div>
Não se esqueça de alterar o texto em laranja pelo URL da sua página do Facebook.

7° passo: Clique em "Salvar".

Resultado final:

E você, o que achou do gadget?

Gostou? Compartilhe:

Tweet