Botones Sociales en la página de incio, este codigo va a estar muy utilizado si lo que deseas es dar una diferente bienvenida a tus visitantes en tu blog, web.
Caracteristicas:
- Tus visitantes pueden distraerse mientras va cargando tu web.
- Mientras se distraen tienen la opción de elegir si dan like, o te siguen en las reds sociales.
- El diseño lleva una bonita presentación con varias interfaces que genera curiosidad al usuario.
Eso es todo esperó que les haya sido de mucha utilidad
El codigo se encuentra abajo, tan solo tienes que copiar e insertarlo en un
gadget HTML/JavaScript de tu plantilla Blogger, para más información comenta tus dudas y contentos te mandaremos a la mierda, perdón quise decir te ayudaremos en tus inquietudes.
<div class="eehucoder kshucoderr-facebook" id="obenimmil"></div><div class="ouihucoder saym1rayt hucoder-facebook"><div id="faceic" style="position:absolute;top:0px;right:0px;width:100%;height:2000px;background-color:#44619d;text-align:center;"><center><a onfocus="this.blur();" href="javascript:void(0)" style="display:block;width:180px;height:240px;background:transparent url(http://i.imgur.com/pK185vl.png) no-repeat top left;margin-top:115px;"></a></center></div><center><a style="display:block;margin-top:150px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Ingresa y Regalanos un,</a><a style="display:block;margin-top:15px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">me gusta en facebook?</a><br/><br/><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogDivCoM%2F1526749350873425%3Fref%3Dbookmarks&width&layout=standard&action=like&show_faces=false&share=false&height=35&appId=225635514312617" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowtransparency="true"></iframe><a style="vertical-align:top;display:inline-block;width:90px;height:19px;background-color:#eceef5;-webkit-border-radius: 6px;border-radius: 6px;border:1px solid #6279ad;line-height:18px;font-family:Tahoma, Arial, sans-serif;font-size:11px;color:#3b5998;font-weight:normal;padding-right:8px;text-decoration:none;" class="gecgec" href="javascript:void(0);"><img src="" style="vertical-align:-4px;padding:0px;margin:0px;border:none;float:left;background-color:transparent;" />Cancelar</a></center></div><div class="uoihucoder saym2rayt hucoder-gopluas"><div id="plusic" style="position:absolute;top:0px;right:0px;width:100%;height:2000px;background-color:#cb263f;text-align:center;"><center><a onfocus="this.blur();" href="javascript:void(0)" style="display:block;width:200px;height:240px;background:transparent url(http://i.imgur.com/SYueIqW.png) no-repeat top left;margin-top:110px;"></a></center></div><center><a style="display:block;margin-top:150px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Ingresa y Regalanos un,</a><a style="display:block;margin-top:15px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">google+ 1 en google ?</a><br/><br/><div class="g-plusone" data-annotation="inline" data-width="140"></div><script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script><a style="vertical-align:top;display:inline-block;width:90px;height:23px;background-color:#eee;-webkit-border-radius: 4px;border-radius: 4px;border:1px solid #fff;line-height:23px;font-family:Tahoma, Arial, sans-serif;font-size:12px;color:#cb263f;font-weight:bold;padding-right:8px;text-decoration:none;" class="gecgec" href="javascript:void(0);">Cancelar</a></center></div><div class="iuohulcoder saym3rayt hucoder-twitterr"><div id="twitic" style="position:absolute;top:0px;right:0px;width:100%;height:2000px;background-color:#55acee;text-align:center;"><center><a onfocus="this.blur();" href="javascript:void(0)" style="display:block;width:200px;height:240px;background:transparent url(http://i.imgur.com/D4JrAjP.png) no-repeat top left;margin-top:105px;"></a></center></div><center><a style="display:block;margin-top:150px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Ingresa y forma parte de,</a><a style="display:block;margin-top:15px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">nuestros seguidores en Twitter ?</a><br/><br/><a href="https://twitter.com/Frec_Latina" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow us</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><a style="vertical-align:top;display:inline-block;width:90px;height:19px;background-color:#f8f8f8;-webkit-border-radius: 3px;border-radius: 3px;border:1px solid #ccc;line-height:18px;font-family:Helvetica, Arial, sans-serif;font-size:11px;color:#444;font-weight:bold;padding-right:8px;text-decoration:none;" class="gecgec" href="javascript:void(0);">Cancelar</a></center></div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script>$(".gecgec").click(function(){$(".saym1rayt").animate({top:"-100%"},1100);$(".saym3rayt").animate({top:"-100%"},600);$(".saym2rayt").animate({top:"-100%"},1700,function(){$(".saym1rayt").hide();$(".saym2rayt").hide();$(".saym3rayt").hide()})});$(".saym1rayt").click(function(){$("#faceic").fadeOut(200);$("#plusic").fadeIn(200);$("#twitic").fadeIn(200);$(this).animate({width:"50%"},200);$(".saym2rayt").animate({width:"25%",left:"50%"},200);$(".saym3rayt").animate({width:"25%",left:"75%"},200);$("#obenimmil").fadeOut(400)});$(".saym2rayt").click(function(){$("#faceic").fadeIn(200);$("#plusic").fadeOut(200);$("#twitic").fadeIn(200);$(this).animate({width:"56%",left:"22%"},200);$(".saym1rayt").animate({width:"22%"},200);$(".saym3rayt").animate({width:"22%",left:"78%"},200);$("#obenimmil").fadeOut(400)});$(".saym3rayt").click(function(){$("#faceic").fadeIn(200);$("#plusic").fadeIn(200);$("#twitic").fadeOut(200);$(this).animate({width:"50%",left:"50%"},200);$(".saym1rayt").animate({width:"25%"},200);$(".saym2rayt").animate({width:"25%",left:"25%"},200);$("#obenimmil").fadeOut(400)})</script> <style type=text/css>div.eehucoder { position:fixed; text-align:center; z-index:99990; } div. ksahucoderr-facebook { background-color:transparent!important; height:75px; left:0; overflow:hidden; top:10px; width:100%; } div. kshucoderr-facebook { _bottom:auto; _top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight-52+"px") ); } div.hucoder-facebook { _bottom:auto; _top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight-52+"px") ); background-color:#44619d; cursor:pointer; height:100%; left:0; overflow:hidden; top:0; width:32%; } div.hucoder-twitterr { _bottom:auto; _top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight-52+"px") ); background-color:#55acee; cursor:pointer; height:100%; left:68%; overflow:hidden; top:0; width:32%; } div.hucoder-gopluas { background-color:#c9243d; cursor:pointer; height:100%; left:32%; overflow:hidden; top:0; width:36%; _bottom:auto; _top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight-52+"px") ); } div.ouihucoder,div.iuohulcoder,div.uoihucoder { position:fixed; text-align:center; z-index:99900; } </style><style type=text/css>div.eehucoder,</style><style type=text/css>div.ouihucoder,</style><style type=text/css>div.iuohulcoder,div.uoihucoder { _position:absolute; }
</style>
Cambiar los enlaces de el "boton me gusta y el de twitter" por los de ustedes.
