Widget para blogger Popout 4 en 1


Existen cientos de widgets para blogger, pero solo los mejores widgets para blogger sobre salen en el mundo de Blogger. Blogger es una plataforma en la cual podemos insertar cientos de widgets y realizar los mejores trucos para blogger. Es muy fácil de implementar los códigos en Blogger. Hoy compartiré con ustedes un truco muy simple, se trata de un widget para blogger llamado 4 en 1, ya que es un popout que se despliega cuando pasa el cursor en cada uno de ellos, y se habilita las redes sociales mas importantes, como Facebook, Twitter, Google + y también aparecerá una caja de suscripciones para que los usuarios que visiten su blog puedan suscribirse a sus nuevas actualizaciones. La implementación de los códigos es muy fácil, solo deben seguir este tutorial tal como lo muestro y podrán disponer de este grandioso popout para que lo muestren en su blog de blogger y así los usuarios puedan suscribirse mediante estas grandiosas cajas de suscripciones.

widget para blogger

gif


A continuación mire su demostración en mi blog de demos


Te gusto! Verdad, vamos a trabajar

1 Ir a Blogger

2 Da un clic en “Plantilla

Widget para blogger

3 Ahora debes dar un clic en “Editar HTML”, también debes presionar en la parte superior izquierda la casilla que dice “Expandir plantillas de artilugios

Widget para blogger
Widget para blogger

4 Presiona la tecla “F3” de tu teclado para que puedas buscar el siguiente código

Busca este código </head> y arriba de el inserta las siguientes líneas de código

<link href='https://blognpctricks.googlecode.com/svn/css/4in1widgetv2.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://apis.google.com/js/plusone.js&apos; type=&apos;text/javascript' type='text/javascript'/>
<script src='http://yourjavascript.com/1073331024/fanbox-init.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
 jQuery(&quot;#facebook_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#facebook_right&quot;).stop(true,false).animate({right: -200}, 500); });    jQuery(&quot;#twitter_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#twitter_right&quot;).stop(true,false).animate({right: -250}, 500); });     jQuery(&quot;#google_plus_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#google_plus_right&quot;).stop(true,false).animate({right: -154}, 500); });    jQuery(&quot;#feedburner_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#feedburner_right&quot;).stop(true,false).animate({right: -303}, 500); });    });
</script>

5 Da un clic en “Guardar plantilla

Widget para blogger

6 Dirígete a “Diseño

Widget para blogger

7 Da un clic donde dice “Añadir un gadget” y se abrirá una ventana en la cual deberás buscar el widget que dice “HTML/Javascript” e inserta el siguiente código, realizando algunos cambios.

Widget para blogger
Widget para blogger

<div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src=" http://4.bp.blogspot.com/-j1tHJK2zl7M/UVdF4jNyLmI/AAAAAAAACsQ/-5OG8nqIx_M/s1600/ayudadeblogger.PNG" alt="" /><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017&amp;locale=en_gb&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356"   scrolling="no"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src=" http://4.bp.blogspot.com/-Hsq4WWeA8ug/UVdGAgzZT5I/AAAAAAAACsY/HMHCOS_TMBA/s1600/ayudadeblogger.PNG" /><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("ayudadeblogger");</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div"><img id="google_plus_right_img" src=" http://2.bp.blogspot.com/-937sRe4p_0o/UVdGFjBCJ3I/AAAAAAAACsg/OIrc6NJxAWM/s1600/ayudadeblogger.PNG" /><div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div></div></div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div"><center><h4 style="color:#f66303;">Recibe mis actualizaciones en tu email:</h4><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ForoAyudaDeBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;enter your email here...&#39;;}" onfocus="if (this.value == &#39;enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="ForoAyudaDeBlogger" name="uri" type="hidden" /><input value="submit" class="submitbutton" type="submit" /></form></center><img id="feedburner_right_img" src=" http://3.bp.blogspot.com/-mQXZbakUqCY/UVdGOg0FNJI/AAAAAAAACso/y18IgSDN-y8/s1600/ayudadeblogger.PNG" /></div></div></div></div>

Realiza estos cambios:

Borra el link que esta marcado de color azul y pon el link perteneciente de tu Fanpage de Facebook

http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017

También debes borrar el nombre que esta marcado de color rojo y sustitúyelo por el nombre de tu página de Twitter, solo el nombre y no el link.

ayudadeblogger

Y por ultimo, deberás borrar los dos nombres que están marcados de color verde por el nombre de tu pagina de FeedBurner, recuerda, solo pon tal como lo digo y no vayas a poner el link de tu FeedBurner, solo es el nombre nada mas.

ForoAyudaDeBlogger

Ahora dale un clic en Guardar y ubica el widget donde tú quieras.

Revisa tu blog y mira tu nuevo cambio

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos.

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

7 comentarios:

  1. Hola Luis, este truco es fantástico. Lo utilicé en la plantilla Tiempos Modernos, pero al modificar el archivo para agregar el widgets por Java, y guardarlo, el resultado fue que el carrusel salía triplicado. El error es mio, de interpretación con el nombre que hay que poner de FeedBourner, o hay algo que revisar en el widgets. Cuando puedas, mejora la explicación porque en la parte final hay cierta confusión, según mi interpretación.

    ResponderEliminar
    Respuestas
    1. Hola Juan, por ejemplo el link de mi feedburner es este;
      http://feeds.feedburner.com/ForoAyudaDeBlogger
      Ves que lleva el nombre al final y dice ForoAyudaDeBlogger, asi es como va aparecer en tu feedburner pero con el nombre que le hayas asignado...
      Cualquier pregunta estoy para ayudarte saludos..

      Eliminar
  2. Gracias Luis de nuevo por tu disposición a la ayuda para agregar nuevos productos a la plantilla. Como otras veces, tus tutoriales me han ayudado a conseguir los objetivos, seguiremos intentando, y si te necesito, te lo haré saber. Saludos.

    ResponderEliminar
  3. Muchas gracias, lo acabo de poner en mi blog ♥ aunque tal vez tenga que hacerle unos arreglos ya que el estilo de mi blog es algo oscuro, de todas maneras gracias, funciona genial n.n

    ResponderEliminar
  4. De nuevo por aca molestando, cambie el look de los botones, pero no logro cambiar el color de las cajas porque el codigo no trae esa opcion, nisiquiera en el de fb para cambiar la caja de light a dark :(

    Ayuda!!Ayuda! Me gustaria poner las cajas oscuras o transparentes, & los links en #B10000

    ResponderEliminar
    Respuestas
    1. Hola, te enviarwe un nuevo codigo en estos dias. Esperalo para que puedas colocarlo en dark..
      Saludos.

      Eliminar