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&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#F5EBF5;" allowtransparency="true"></iframe><span> </span> </div> </div>
0 Comentários