add

Crear un widget de suscripciones para mi blog de 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. 

Crear un widget de suscripciones para mi blog de blogger

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


1 Ir a Blogger.com

2 Ir a Diseño

Crear un widget de suscripciones para mi blog de blogger


3 Abrir añadir un gadget

Crear un widget de suscripciones para mi blog de blogger

4 Encontrar el widget HTM/Javascipt, tal como se muestra en la imagen a continuación.

Crear un widget de suscripciones para mi blog de blogger

5 Copie el siguiente código dentro de su nuevo widget

<!—Suscripciones by www.ayudadeblogger.com-Start->
<style type="text/css">.maskolis{width:288px;float:left;margin:0 0 2px;padding:0 5px;}
.maskolis .count{margin:0px;padding:10px 0px 0px 0;}
.maskolis .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;}.maskolis .subicons a{text-decoration:none;color:#333333;}.maskolis .subicons a:hover{text-decoration:underline;color:#333333;}.maskolis .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;}.maskolis .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;}.maskolis .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;}.maskolis .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;}.maskolis .emailsub{border-bottom:0px solid #e6e6e6;padding:15px 0 0px 0;float:left;width:100%;font-family:Helvetica, Arial;}.maskolis .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;}.maskolis .emailsub .emailupdatesform{margin:15px 5px 5px 5px;width:288px;float:left;}.maskolis .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;}.maskolis .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="maskolis"><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>
<!—Suscripciones by www.ayudadeblogger.com-->

Realice estos cambios

1 El texto que está marcado de color Amarillo es el código de enlace de su feedburner de suscripciones, cámbielo por el suyo. ForoAyudaDeBlogger

2 El texto que está marcado de color verde es el perfil que usted utiliza para su google +, https://plus.google.com/114283163993086871162, cambie todo el texto que está marcado por el link de su perfil de google +.

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

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

5 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.


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

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios