Efeito Jquery na Caixa de Fãs do Facebook

Tumblr_m8bqeybcgy1qf4k86o1_500_large

Hooy meninas,

Espero que esteja tudo bem com vocês ^^. Me perguntaram como eu coloquei esse feito do lado da tela,essa caixinha do facebook.Então eu vou ensinar como eu fiz.Esse tutorial eu aprendi no Girls Online e desculpe a demora para postar é que estava esperando a autorização da Tais pra postar.

O efeito é esse:
Vá do HTML do seu blog(design>editar HTML) dê CTRL + F e procure por   </head>

e acima dessa tag cole o seguinte código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

 Salve e agora você cole o seguinte código em gadget de HTML JavaScript.


<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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaHOnIwjsoH3NSK_N-LAhAvdYrox2tjG1yGi8G4XL5BLGhtjwVam_pWjcUDuA1bolNvt5JOe_Nv0W07KUfWZilkjluLh-HuNAb8KxhEzcwxnCIjTE8uwZVijPPv5hmdXkEWX8jANdA3wk/s1600/facebook.png") 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="http://www.facebook.com/plugins/likebox.php?href=Cole aqui o URL da sua página no Facebook&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>

Você cola o URL da sua página no local indicado e salva.

Salve e pronto.Gostaram?Beijos e fiquem com Deus ^^


17 comentários:

Tayane Ribeiro disse...

amei a tutorial,bem simples mais com resultado perfeito
beijos
http://lolamantovani.blogspot.com.br/

Mah disse...

Adorei o tuto! Acho que vou por no meu blog ^^ mas com os devidos créditos!

Beijoos
Mah
Spazio-teen.blogspot.com

luce . disse...

Que tutorial bom!
Eu fiz lá no blog tá ><

Kissus~~> http://macherieoficial.blogspot.com.br/

Malu { Jelly } disse...

Ahhh!Tava procurando esse tuto !

Ana Paula Santos disse...

Muitos blogs estão útilizando , bem pratico , gostei do tutorial e do blog , muito fofo. E já curti sua fã page *-* , beijinhos flor.

http://adolescentesdooposto.blogspot.com.br/

Anônimo disse...

É mt massa esse tutorial !!


BEIJÃO, IANA PAULINHA
http://ianapaulinhaaaa.blogspot.com.br/

Ivy Silva disse...

muito legal esse tutorial, mas não uso nem o comum no meu blog rsrs. Já tentei criar uma fan-page pro meu blog, mas nao deu mt certo..
Kiss,
www.coisasdemenina-vicky.blogspot.com

Giovanna disse...

Obaa...Tvaa louca por esse tuto,vou tentar no meu blog!

Seguindo aqui,pode retribuir?
http://coisasdagiovanna.blogspot.com.br/

Ingrid ~ disse...

Amei o tutorial! É ótimo porque ocupa pouco espaço *-*
Beijo
candygirl-blog.blogspot.com

Unknown disse...

Efeito muito legal e aliás eu coloquei no meu blog!! Adorei o seu blog e ele já ganhou mais uma leitora rsrs
Seguindo se tiver como retribui?
Bjs --> www.beleza-e-make.blogspot.com

Taís disse...

Eu gosto muito desse efeito, mas é uma pena que se usamos ele não podemos personalizar barra de rolagem, e eu sou louca por uma barrinha personalizada *_* Beijos.

>> Girls Online!

Natália disse...

Amei esse efeito super util
Se você poder deixar a sua marquinha lá no meu bloguito ficarei muito feliz!
--> CLICA?MundoFantásticoFeminino

Jéssica Rodrigues disse...

Ai que legal, vou fazer no meu :)

http://www.byjessicarodrigues.com/

Beijos;*

Josi Flores disse...

Era o que eu estava procurando!
Bezos~~> http://smileecherry.blogspot.com/

Bafos da Blogsfera disse...

amei esse tutorial!!!
é bem ótimo!
candyces.blogspot.com

Isabela disse...

é um efeito muito lindo *3*
E seu blog também é lindo, estou seguindo *3*
Visita? Lazy Girl

! Lili ! disse...

Bem legal o efeito.
Beijo, Lili.
Princesa Imperfeita