Caixa flutuante do Facebook

Essa caixa flutuante além de ser flutuante, ou seja, ele vai seguindo o visitante quando ele rola a página do seu blog para baixo ele não ocupado muito espaço no seu blog. Ficará apenas uma texto escrito “Facebook” na lateral e quando o visitante passa o ponteiro do mouse sobre ele a caixa é mostrada.

É preciso que você tenha uma Fan Page para o seu blog para poder colocar essa caixa flutuante.

1º Passo: Entre no painel do seu Blogger clique em “Modelo” e depois em “Editar HTML“:

2º Passo: Clique levemente sobre o código do seu template e aperte CTRL + F e procure por:

<head>

3º Passo: E abaixo do código acima cole o seguinte código:

4º Passo: Agora copie e cole o código abaixo em algum local e na linha destacada em amarelo substitua o texto “Compactado” pelo nome de usuário da sua Fan Page:

<script
type="text/javascript"> /*<![CDATA[*/
jQuery(document).ready(function()
{jQuery(".theblogwidgets").hover(function()
{jQuery(this).stop().animate({right: "0"}, "medium");}, function()
{jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/ </script> <style type="text/css">
.theblogwidgets{background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg4nyuvwkntCMB7kKT51JFL3rZWd5uCh1cilkUzysSalURcAp32KlIAC9PIPbas39HS2P_5z2ACmLjXYedEkmTyeUP_4KLSLQThc5lSDqyJpwLQmv1_oQQW_vZV0A6GHbHVbc8MOwZkIhv/")
no-repeat scroll left center transparent !important; float:
right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:
99999;position:fixed;right:-250px;top:20%;} .theblogwidgets div{
padding: 0; margin-right:-8px; border:4px solid #3b5998;
background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida
grande",tahoma,verdana,arial,sans-serif;position: absolute;right:
6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color:
gray;text-decoration:none;} .theblogwidgets span
a:hover{text-decoration:underline;} } </style><div
class="theblogwidgets" style="">
<div>
<iframe
src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FCompactado&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270"
scrolling="no" frameborder="0" scrolling="no" style="border: white;
overflow: hidden; height: 270px; width:
245px;background:#fafafa;color:000;"></iframe></div>


5º Passo: Após fazer essa modificação basta colocar esse código já modificado em um Gadget no seu Blogger.

Este post foi escrito por: Matheus Ribeiro

Sou especialista em blogs e sites desde 2010, tento trazer conteúdos que os leitores procuram na internet.

Postado por Matheus

Caixa flutuante do Facebook

Este post foi escrito por: Matheus Ribeiro

Proxima

Postagem mais recente

Previous

Postagem mais antiga