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:
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&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>
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:
amei a tutorial,bem simples mais com resultado perfeito
beijos
http://lolamantovani.blogspot.com.br/
Adorei o tuto! Acho que vou por no meu blog ^^ mas com os devidos créditos!
Beijoos
Mah
Spazio-teen.blogspot.com
Que tutorial bom!
Eu fiz lá no blog tá ><
Kissus~~> http://macherieoficial.blogspot.com.br/
Ahhh!Tava procurando esse tuto !
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/
É mt massa esse tutorial !!
BEIJÃO, IANA PAULINHA
http://ianapaulinhaaaa.blogspot.com.br/
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
Obaa...Tvaa louca por esse tuto,vou tentar no meu blog!
Seguindo aqui,pode retribuir?
http://coisasdagiovanna.blogspot.com.br/
Amei o tutorial! É ótimo porque ocupa pouco espaço *-*
Beijo
candygirl-blog.blogspot.com
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
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!
Amei esse efeito super util
Se você poder deixar a sua marquinha lá no meu bloguito ficarei muito feliz!
--> CLICA?MundoFantásticoFeminino
Ai que legal, vou fazer no meu :)
http://www.byjessicarodrigues.com/
Beijos;*
Era o que eu estava procurando!
Bezos~~> http://smileecherry.blogspot.com/
amei esse tutorial!!!
é bem ótimo!
candyces.blogspot.com
é um efeito muito lindo *3*
E seu blog também é lindo, estou seguindo *3*
Visita? Lazy Girl
Bem legal o efeito.
Beijo, Lili.
Princesa Imperfeita
Postar um comentário