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>

Odnei Sales
Odnei Sales

This is a short biography of the post author. Maecenas nec odio et ante tincidunt tempus donec vitae sapien ut libero venenatis faucibus nullam quis ante maecenas nec odio et ante tincidunt tempus donec.

Nenhum comentário:

Postar um comentário