Crear un widget de suscripciones para mi blog de blogger


Widgets Blogger - Quien dijo que no se podía hacer un lindo widget de suscripciones para utilizarlo en su blog de Blogger. Esta vez ustedes no necesitaran ingresar este código en su caja HTML de su blog, ya que a veces puede ser tan tedioso y tan molestoso para muchos Bloggers, lo único que necesitaran hacer es copiar y pegarlo en un widget y ubicarlo donde ustedes quieran. El widget de suscripciones es realmente hermoso, en la caja de suscripciones ustedes podrán poner las redes sociales más conocidas como Twitter, Facebook, Google+ y un RSS de feedburner.

Bueno lo que tendrán que hacer es solo cambiar algunas cosas nada más y lo podrán utilizar en su blog de Blogger, a continuación les voy a explicar paso a paso, para que ustedes no se confundan.

Pueden ver su demostración en el siguiente blog de demos

Instrucciones

Un clic en Diseño


Un clic en "Añadir un gadget"


Seleccione el widget que dice HTML/Javascript, abralo


Copie el siguiente código dentro de su nuevo widget


<style type="text/css">
.adb-widget{width:288px;float:left;margin:0 0 2px;padding:0 5px;}
.adb-widget .count{margin:0px;padding:10px 0px 0px 0;}
.adb-widget .subicons{background: url(http://1.bp.blogspot.com/--XyTqUrypY8/T1YjUGN9ZbI/AAAAAAAAFuo/mttDGvPpcDU/s1600/batas.png) repeat-x scroll bottom;margin:0px 0 0px 0;float:left;width:288px;font-family:Helvetica, Arial;font-size:12px;}.adb-widget .subicons a{text-decoration:none;color:#333333;}.adb-widget .subicons a:hover{text-decoration:underline;color:#333333;}.adb-widget .subicons .rssicon{background:url(http://4.bp.blogspot.com/-x4EHRDCWjwg/Tz-rZV77-oI/AAAAAAAACo4/7rf_iOfi0ew/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px 5px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 28px;margin:0 0 0 5px;}.adb-widget .subicons .googleicon{background:url(http://4.bp.blogspot.com/-x4EHRDCWjwg/Tz-rZV77-oI/AAAAAAAACo4/7rf_iOfi0ew/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -37px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 28px;margin:0 0 0 5px;}.adb-widget .subicons .fbicon{background:url(http://4.bp.blogspot.com/-x4EHRDCWjwg/Tz-rZV77-oI/AAAAAAAACo4/7rf_iOfi0ew/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -79px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 28px;margin:0 0 0 5px;}.adb-widget .subicons .twittericon{background:url(http://4.bp.blogspot.com/-x4EHRDCWjwg/Tz-rZV77-oI/AAAAAAAACo4/7rf_iOfi0ew/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -121px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 7px 0px 28px;margin:0 0 0 5px;}.adb-widget .emailsub{border-bottom:0px solid #e6e6e6;padding:15px 0 0px 0;float:left;width:100%;font-family:Helvetica, Arial;}.adb-widget .emailsub .emailicon{background:url(http://4.bp.blogspot.com/-uxEWXE85w68/UEbs8WvmppI/AAAAAAAAAlI/VpghuWXa1PU/s1600/email.jpg) no-repeat 0 2px;float:left;padding:0px 20px 0px 50px;margin:0 5px;width:288px;line-height:20px;vertical-align:middle;font-size:14px;color:#333;}.adb-widget .emailsub .emailupdatesform{margin:15px 5px 5px 5px;width:288px;float:left;}.adb-widget .emailsub .emailupdatesform input.emailupdatesinput{background:#fff !important;float:left;border:1px solid #afafaf;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.adb-widget .emailsub .emailupdatesform input.joinemailupdates{/*linear-gradient*/background:-webkit-gradient(linear,left top,left bottom,color-stop(#b4c5fa,0),color-stop(#0f46fa,1));background:-webkit-linear-gradient(top,#b4c5fa 0%,#0f46fa 100%);background:-moz-linear-gradient(top,#b4c5fa 0%,#0f46fa 100%);background:-o-linear-gradient(top,#b4c5fa 0%,#0f46fa 100%);background:linear-gradient(top,#b4c5fa 0%,#0f46fa 100%);background:-webkit-gradient(linear,left top,left bottom,from(#567dfc),to(#0f46fa));border:1px solid #1143a8;text-transform:none;font:bold 12px arial;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;}
</style>

<div class="adb-widget">
<div class="subicons">
<div class="rssicon">&nbsp;<a rel="nofollow" href="http://feeds.feedburner.com/ForoAyudaDeBlogger" target="_blank">  RSS</a></div><div class="googleicon">&nbsp;<a href="https://plus.google.com/114283163993086871162" rel="author" target="_blank"> G+</a></div><div class="fbicon"> &nbsp;<a href="http://www.facebook.com/ayudadeblogger" target="_blank" rel="nofollow">FB</a></div><div class="twittericon">&nbsp;<a href="https://www.twitter.com/ayudadeblogger" target="_blank" rel="nofollow">Twitter</a></div></div><div class="emailsub"><div class="emailicon"><p style=" width:240px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial;  padding-right:5px; margin:0;">Si te gusto este articulo, suscribete y recibelo en tu bandeja de entrada</p>
</div>
<div class="emailupdatesform"><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="emailupdatesinput" name="email" value="Ingresa tu email..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Ingresa tu email...&#39;;}" onfocus="if (this.value == &#39;Ingresa tu email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="ForoAyudaDeBlogger" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form><div class="count"><a rel="nofollow" href="http://feeds.feedburner.com/ForoAyudaDeBlogger"><img style="border:0" alt="" src="http://feeds.feedburner.com/%7Efc/ForoAyudaDeBlogger?bg=aeaeae&amp;fg=000&amp;anim=1" height="26" width="88" />
</a>
</div>
</div>
</div>
</div>


Realice estos cambios:

Cambie el nombre de su feedburner de suscripciones en, ForoAyudaDeBlogger

Cambie la URL google +, https://plus.google.com/114283163993086871162, por el link de su perfil de Google+.

Cambie el link http://www.facebook.com/ayudadeblogger por la URL de su página de Facebook.

Cambie ayudadeblogger por el nombre de usuario que usted utiliza en su página de Twitter.

Guarde su widget y listo ya tiene su nueva y renovada caja de suscripciones con las mejores redes sociales a su disposición.

¿Necesitas ayuda?

Cualquier pregunta no dude en hacérmelo saber.

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

11 comentarios:

  1. Me sirvio de mucha ayuda tu aporte web master , saludos..

    ResponderEliminar
  2. Hola Paolo Montero, me da gusto que te haya servido de mucha ayuda mi publicacion sobre como crear un widget se suscripciones, recuerda que estoy para ayudarte.
    Saludos.

    ResponderEliminar
  3. hola, mi pregunta seria como podria poner solo la parte del sobre y para escribir el correo. Los botones de facebook, google y demas no los quiero.

    Un saludo y gracias

    ResponderEliminar
  4. Hola Mrk. Borja, ok te ayudo con el codigo, toca borrar algunas partes nada mas, te ayudo con el codigo por interno, escribeme a: ayudadeblogger@gmail.com
    A penas me envies el email yo te reenvio con el codigo que deveras poner en tu widget.
    Saludos..

    ResponderEliminar
  5. Espero tus comentarios Luis Chávez, te envíe un email :)

    ResponderEliminar
  6. Hola Daniel Bautista A.
    Con Mucho gusto te voy ayudar, ya te envie a tu correo el archivo de la plantilla. Cualquier pregunta no dudes en hacermelo saber y con mucho gusto te ayudare.
    Saludos

    ResponderEliminar
  7. Gracias por su ayuda un favor el codigo funciona correctamente pero cuando quiero ingresar un email
    en el cuadro de texto al costado del boton suscribete no me acepta hay algun paso adicional que tengo que hacer .
    De antemano gracias.

    ResponderEliminar
  8. Hola, Luis, he comprobado lo que tu me estas diciendo, y me he dirigido a mi blog de pruebas, y el codigo funciona correctamente, talvez algo estas haciendo mal. Te aconsejo que borres tu codigo y vuelvas a insertar nuevamente el codigo siguiendo las instrucciones que se encuentran en mi blog.
    Cualquier pregunta no dudes en hacermelo saber.
    Saludos....

    ResponderEliminar
  9. Hola lo copie tal cual y funciono excelente, quedo muy bonito, incluso le pude quitar el icono de Google+. Muchas gracias por compartir estos códigos son de gran ayuda, Saludos!

    ResponderEliminar
  10. Hola que tal, gracias por la información :)
    Una pregunta, ¿a donde llegan todos los correos? ¿cómo puedo descargar la base de datos?
    muchas gracias de nuevo

    ResponderEliminar
    Respuestas
    1. Hola, los artículos llegan directamente a tu bandeja de entrada de cualquier correo electrónico,

      Eliminar