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;zindex: 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-curtirflutuante span a{color: #808080;text-decoration:none;}.box-curtir-flutuante span a:hover{textdecoration: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.