Widgets y Plugins para Blogger


¿Cómo insertar un widget estático de Facebook y Twitter?


¿Insertar un código en mi página web para que se muestre un widget estático y así compartir Facebook y Twitter? ¿Mostrar un widget estático para compartir mí página de Facebook y Twitter y así se puedan suscribir a mis paginas? ¿Necesito un widget estático para que se suscriban a mis cuentas de Facebook y Twitter? Algunas de las preguntas que llegan a mi cuenta de correo electrónico, bueno voy a compartir un gran truco que servirá para cualquier tipo de página web, sea Blogger, Wordpress, páginas web, blogs, etc. Utilizaremos un código muy sencillo, el cual no le creara ningún conflicto con su HTML, al igual la carga es muy ligera y simple. Lo que vamos hacer es copiar un código y realizar dos simples cambios.

¿Cómo insertar un widget estático de Facebook y Twitter?

Pueden ver su demostración en la siguiente página web, el widget estático se abrirá cuando vayan hacia bajo de la página web de forma automática. Lo mismo cuando suban hacia la primera posición de la página web se desaparecerá el widget estático. También tiene la opción de una “X” para que ya no se muestre.

DEMO

¡Les gusto verdad!

Vamos a trabajar

Para Blogger

1 Ir a Blogger

2 Da un clic en “Diseño

¿Cómo insertar un widget estático de Facebook y Twitter?

3 Abre  “Añadir un gadget

¿Cómo insertar un widget estático de Facebook y Twitter?

4 Busca el widget que dice “HTML/Javascript” ábrelo

¿Cómo insertar un widget estático de Facebook y Twitter?

Inserta el siguiente código en su interior

<div class="widget-content">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> &nbsp; <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#IGsocialslide").show("slow");else $("#IGsocialslide").hide("slow");});function closeIGsocialslide(){$('#IGsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>   <style type="text/css">  #IGsocialslide{  background:black url(http://2.bp.blogspot.com/-2X5yb7ehpzU/UZpa5cmLjfI/AAAAAAAAALI/zEVXUhdjWfM/s1600/NBT_Green.png) left top repeat-x;  border-radius:9px;  -moz-border-radius:8px;  -webkit-border-radius:8px;  -moz-box-shadow:inset 0 0 4px #333;  -webkit-box-shadow:inset 0 0 4px #333;  box-shadow:inner 0 0 3px #333;  padding:12px 14px 12px 14px;  width:300px;  position:fixed;  bottom:13px;  left:2px;  display:none;  z-index:3;  height:65px;}  </style>    <div style="display: block;" id="IGsocialslide"> <a style="position:absolute;top:14px;right:10px;color:#D8C9C9;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeIGsocialslide();">X</a> <span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #868686;color:#F8F0F0;">No te olvides de Suscribirte!</span><br />   <div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com/Juegosenlineajuegosgratis&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true" frameborder="0"></iframe></div>   <div style="float:left; margin:15px;"><iframe style="width: 160px; height: 20px;" data-twttr-rendered="true" title="Twitter Follow Button" class="twitter-follow-button twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.b8521baa6750e75c2cbc4369801f822e.en.html#_=1423240360213&amp;dnt=false&amp;id=twitter-widget-1&amp;lang=en&amp;screen_name=tujuegoenlinea&amp;show_count=true&amp;show_screen_name=false&amp;size=m" allowtransparency="true" scrolling="no" id="twitter-widget-1" frameborder="0"></iframe> <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></div> </div>   <div class="clear"></div> 
</div>


Realiza estos dos cambios:

Cambia donde dice www.facebook.com/Juegosenlineajuegosgratis por la dirección URL de tu página de Facebook

Igual, borra donde dice tujuegoenlinea por el nombre tu página de Twitter

Eso es todo

Nota: Si ya utilizas en tu blog un http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js  ya no es necesario poner este código, ya que ocasionaría conflictos. Y si no utilizas ningún Jquery inserta todo el código tal como lo muestro.

5 Da un clic en “Guardar” y ubica tu nuevo widget estático donde tú quieras

¿Cómo insertar el widget estático en una página web o blog que no sea Blogger?

Copia el siguiente código antes del cierre </body> de tu página web o blog

<div class="widget-content">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> &nbsp; <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#IGsocialslide").show("slow");else $("#IGsocialslide").hide("slow");});function closeIGsocialslide(){$('#IGsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>   <style type="text/css">  #IGsocialslide{  background:black url(http://2.bp.blogspot.com/-2X5yb7ehpzU/UZpa5cmLjfI/AAAAAAAAALI/zEVXUhdjWfM/s1600/NBT_Green.png) left top repeat-x;  border-radius:9px;  -moz-border-radius:8px;  -webkit-border-radius:8px;  -moz-box-shadow:inset 0 0 4px #333;  -webkit-box-shadow:inset 0 0 4px #333;  box-shadow:inner 0 0 3px #333;  padding:12px 14px 12px 14px;  width:300px;  position:fixed;  bottom:13px;  left:2px;  display:none;  z-index:3;  height:65px;}  </style>    <div style="display: block;" id="IGsocialslide"> <a style="position:absolute;top:14px;right:10px;color:#D8C9C9;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeIGsocialslide();">X</a> <span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #868686;color:#F8F0F0;">No te olvides de Suscribirte!</span><br />   <div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com/Juegosenlineajuegosgratis&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true" frameborder="0"></iframe></div>   <div style="float:left; margin:15px;"><iframe style="width: 160px; height: 20px;" data-twttr-rendered="true" title="Twitter Follow Button" class="twitter-follow-button twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.b8521baa6750e75c2cbc4369801f822e.en.html#_=1423240360213&amp;dnt=false&amp;id=twitter-widget-1&amp;lang=en&amp;screen_name=tujuegoenlinea&amp;show_count=true&amp;show_screen_name=false&amp;size=m" allowtransparency="true" scrolling="no" id="twitter-widget-1" frameborder="0"></iframe> <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></div> </div>   <div class="clear"></div> 
</div>


Realiza estos dos cambios:

Cambia donde dice www.facebook.com/Juegosenlineajuegosgratis por la dirección URL de tu página de Facebook

Igual, borra donde dice tujuegoenlinea por el nombre tu página de Twitter

Eso es todo

Guárdalo

Nota: Si ya utilizas en tu página web un http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js  ya no es necesario poner este código, ya que ocasionaría conflictos. Y si no utilizas ningún Jquery inserta todo el código tal como lo muestro.

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber


Enviar por correo
  1. Hola, magnífico, pero tengo una duda, ¿como puedo cambiar el fondo verde por otro color?. Gracias

    ResponderEliminar
    Respuestas
    1. Hola Temarium, con respecto a su pregunta, la siguiente dirección URL es la imagen de fondo verde:

      http://2.bp.blogspot.com/-2X5yb7ehpzU/UZpa5cmLjfI/AAAAAAAAALI/zEVXUhdjWfM/s1600/NBT_Green.png

      Cambie dicha dirección URL por una nueva imagen de fondo, recuerde que debe tener el mismo tamaño.

      Saludos.

      Eliminar

Discusión: