Facebook Expansível do Lado Direito do Blog

Neste post falarei aqui no Dicashot para vocês como vocês podem estar colocando no blogger uma box expansível do facebook que automaticamente se abre ao passar o mouse por cima. Na figura ao lado você pode ver como ela fica quando está fechada. Veja na figura um pouco abaixo como ela fica quando está com a aba aberta.
Geralmente não se vê muitos destes gadgets em blogs, mas, como vocês podem ver, é possível colocá-lo no blogger.

                            Seguir @DicashotOficial

A algum tempo escrevi um post ensinando a colocar redes sociais expansíveis do lado esquerdo do blogger; caso você ainda não tenha lido este post leia agora clicando neste: Menu Expansível de Redes Sociais

Inserindo o código HTML

1° passo: Acesse o Painel do Blogger, escolha o blog e selecione a opção "Design" e clique em "Editar HTML".

2°passo: Agora usando o Ctrl+F, procure por:

<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 "Design", clique em "Adicionar gadget" e escolha a opção "HTML/JavaScript".

6° passo: Deixe sem "Título" 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/AVvXsEg7z8HR_dAL8DmquwH-DMDUg3HAUH0vLIGS32holpmRH1bFSBFnkOAQbPTGBYsCBcR-t8vL2u_D0CXeAYiMDbnYP4X0tC0-hFW6Km65ju8Dcu3UQk2DSCh_MR5T0eSqGUwEsm1SDapxt-Q/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>

7° passo: SUBSTITUA a URL destacada de vermelho no código pela URL da sua página no Facebook.

Se inscreva e receba nossas atualizações por e-mail: