Como adicionar um box estático "Curtir" pop-up do Facebook com efeito hover

BLOG DO ODNEY SALES
Veja na figura abaixo como vai ficar a sua página estática do box curtir do Facebook que funciona em efeito hover, é super elegante e funciona em qualquer template sem problemas. O código já está pronto em jQuery é só adicionar ao corpo e html do seu blog e fazer as alterações de sua preferência.



Antes veja o tutorial como adicionar um gadget no blogger: 



Vamos lá! Copie e cole o código abaixo e siga as instruções do tutorial acima para adicionar um gadget:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> > <style type="text/css">.mdfbplikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.mdfbplikebox span a{color: #808080;text-decoration:none;}.mdfbplikebox span a:hover{text-decoration:underline;}#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;} .fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrhTd4_GMsDEF5A8YHR4irEVcrRyd7FQWIA7tvAIM-F9lfGn7BNi8O_pJqf1mkZb_Vx2rZCie-zey-H6BFhiPpNPRO-X5QpD6AnPlkErLHERhieJsqssa9JLXPatL_42lGIlhGCBvn7Il/s1600/md_vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: px;-webkit-border-bottom-left-radius: px;-moz-border-radius-topleft: px;-moz-border-radius-bottomleft: px;border-top-left-radius: px;border-bottom-left-radius: px;} /*]]>*/ </style> <script type="text/javascript"> /*<![CDATA[*/ (function(md){ md(document).ready(function(){ var $dur = "medium"; // DURAÇÃO DA ANIMAÇÃO md("#fbplikebox").css({right: -250, "top" : 100 }) md("#fbplikebox").hover(function () { md(this).stop().animate({ right: 0 }, $dur); }, function () { md(this).stop().animate({ right: -250 }, $dur); }); md("#fbplikebox").show(); }); })(jQuery); /*]]>*/ </script> <div class="mdfbplikebox"> <div id="fbplikebox" style="display:none;"> <div class="fbplbadge"></div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/odneysalespoesias&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#F5EBF5;" allowtransparency="true"></iframe><span> </span> </div> </div>

Postar um comentário

0 Comentários