Algumas pessoas pediram e hoje vou mostrar como colocar uma caixa para que seus visitantes possam curtir sua página no Facebook em um box flutuante que fica na lateral direito do seu blog no Blogger.
Esse box 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 o box é mostrado.
Vale lembrar que primeiro é preciso que você tenha uma Fan Page para o seu blog para poder colocar esse box flutuante.
Box flutuante do Facebook
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:
|
1
|
<head>
|
|
1
|
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
|
4º Passo: Agora copie e cole o código abaixo em algum local e na linha destacada em amarelo substitua o texto “EspacoBlog” pelo nome de usuário da sua Fan Page:
|
1
2
3
4
|
<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/AVvXsEj8_gYqpyg0krW2VgePRS3qDDi68zP8Dut8mVz83lHOsMolubiTYwriwoo735KWUFC33IBWoqFXJQgjgu4Df6IqBiSWeNTgWrYA1oWHY9D3Mks8lQREWiZw6exe8Hw2gENzyGhQj9jZTDIO/") 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%2FEspacoBlog&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>
</div>
|
