Box Expansível do Facebook com Efeito Jquery para

Blogger

Irei mostrar agora como adicionar uma box expansível do Facebook para blogs do Blogger. Esse box foi

criado com Jquery para torna-lo mais elegante e de visual clean. A função desse box é a seguinte, ao ser

adicionado o widget, aparecerá um botão do Facebook flutuando no canto lateral do seu blog, e quando a

seta do mouse passar sobre o botão, o box irá se expandir e aparecerá a caixa de curtir do Facebook,

Veja

a Demostração Clicando Aqui:

Como instalar o widget

1 – Vá ao Painel de Controle de seu Blog e clique em Modelo. 2 – Clique em Editar HTML =>Prosseguir => marque a caixa Expandir modelos de widgets. 3 – Para a ajudar a encontrar o trecho de código click em F3 e procure por:

</head> 4 – Após encontrar este trecho coloque imediatamente o seguinte código acima:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js”

type=”text/javascript”></script> 5 – Após adicionar esse trecho de código salve e vá ao layout do blog e click em adicionar um Gadget =>HTML/JavaScript e coloque o seguinte código:

<script type="text/javascript">//<!--$(document).ready(function() {$(".box-curtir-flutuante").hover(function()

{$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"},

"medium");}, 500);});//--></script><style type="text/css">.box-curtir-flutuante{background:

url("http://3.bp.blogspot.com/-

VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png") no-repeat scroll left

center transparent !important;display: block;float: right;height: 350px;padding: 0 5px 0 40px;width: 245px;z-

index: 99999;position:fixed;right:-250px;top:20%;}.box-curtir-flutuante

div{border:none;position:relative;display:block;}.box-curtir-flutuante span{bottom: 10px;font: 10px

tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.box-curtir-

flutuante span a{color: #808080;text-decoration:none;}.box-curtir-flutuante span a:hover{text-

decoration:underline;}</style><div class="box-curtir-flutuante" style=""><div><iframe

src="//www.facebook.com/plugins/likebox.php?href=SUA URL DO

FACEBOOK&amp;width=251&amp;height=350&amp;colorscheme=light&amp;show_faces=true&amp;bor

der_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399"

scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:350px;

background:#fff;" allowtransparency="true"></iframe></div></div>

6 – Após adicionar o código substitua o trecho SUA URL DO FACEBOOK por sua url do facebook e salve

e confira se ocorreu tudo certo, em meus blogs do blogger está funcionando tudo corretamente, caso

aconteça algo de errado tire suas duvidas através de comentário.