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.



Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: