BOX FLUTUANTE PARA FACEBOOK E TWITTER COM JQUERY

Uma ótima forma de aumentar as visitas do seu site ou blog, é criando uma página no facebook.

Melhor ainda é proporcionar aos seus visitantes uma like box em grande estilo. Para quem não sabe, like box é um plugin social para páginas do facebook, onde seus visitantes podem curtir sua página, divulgando seu conteúdo.

Hoje vamos mostrar como criar uma like box flutuante para a plataforma blogger, para isto vamos usar o plugin jquery.

1- Instalando o plugin no blogger

Faça login no blogger, clique em Design/Editar HTML, e pressione as teclas Ctrl+F, em seguida procure por </head>

Copie e cole o seguinte código logo acima:

<script src='https://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'/>

Devendo ficar assim:

Agora clique em Salvar modelo. Pronto, Jquery instalado!

2- Clique em Design/Adicionar um Gadget, escolha o opção HTML/Javascript, agora copie e cole 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><br /> <style type="text/css"> .box-curtir-flutuante{background: url("https://lh6.googleusercontent.com/-ifgDqZQMUCs/TzrA46yEwyI/AAAAAAAACh0/krzLEdM-rXA/s150/Face.jpg") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;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: 12px;font: 8px "lucida grande",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="https://www.facebook.com/plugins/likebox.php?href=COLOQUE AQUI A URL DA SUA PÁGINA DO FACEBOOK&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>

Lembre-se de não acrescentar título ao gadget, e colocar a url da sua página do facebook no local indicado, devendo ficar assim:

Salve, e pronto! Para ver como vai ficar, basta passar o mouse do seu lado direito, onde está escrito facebook. Gostou? Então aproveite e curta nossa página ; )

Se você preferir o twitter ao invés do facebook, basta repetir o passo 1, e substituir o código a ser colado no gadget no passo 2 por este:

<script type="text/javascript"> //<!-- $(document).ready(function() {$(".box-twitter-flutuante").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script><br /> <style type="text/css"> .box-twitter-flutuante{background: url("httpss://lh5.googleusercontent.com/-y3eDjSttq6c/Tzzq840t7BI/AAAAAAAACiM/XJTSjjNJVV8/s159/a.jpg") no-repeat scroll left center transparent !important;display: block;float: right;height: 159px;padding: 0 5px 0 45px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .box-twitter-flutuante div{border:none;position:relative;display:block;} .box-twitter-flutuante span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .box-twitter-flutuante span a{color: #808080;text-decoration:none;} .box-twitter-flutuante span a:hover{text-decoration:underline;} </style><div class="box-twitter-flutuante" style=""><div> <center><a title="Seguir" href="COLOQUE AQUI A URL DA SUA PÁGINA DO TWITTER"><img style="margin: 0px 4px 4px 0px" src="https://lh3.googleusercontent.com/-qWeaHHztc_M/TzvRqztgZWI/AAAAAAAACiE/3CvbXGGRmwo/s245/untitled.png" /></a></center></div></div>

Lembre-se de colocar a url do seu twitter no local indicado, Duas ótimas opções para encrementar ainda mais seu blog.