Widget de suscripciones para blogger

Tener un widget de suscripciones para tu blog de Blogger, hace que la gente se suscriba a tu blog por medio de este espectacular widget. 

El widget de suscripciones que les voy a enseñar como insertarlo en su blog de Blogger tiene las siguientes características:

- Caja de su pagina de Google+
- Caja FanPage de Facebook
- Icono de recomendar su pagina web en Google+
- Follow de Twitter
- Icono de Rss
- Icono de Twitter
- Icono de Facebook
- Y por ultimo la caja de suscripciones de su blog de Blogger

Widget de suscripciones para blogger

Este widget de suscripciones se encuentra ubicado en el sidebar de un blog, en el cual podrás ver su funcionamiento. 

Con este widget los usuarios de la red podrán suscribirse y obtener todos los días las nuevas actualizaciones de tu blog de Blogger, siempre y cuando vayas publicando nuevos temas. El widget de suscripciones lleva el nombre de "Suscríbete"


Te encanto verdad! 

Bueno ahora vamos a trabajar

1 Ir a Blogger.com

2 Un clic en diseño

Widget de suscripciones para blogger

3 Abre un nuevo widget “HTML/Javascript” 

Widget de suscripciones para blogger

Ingrese las siguientes lineas de código en su interior

<style type="text/css">
/*<!CDATA[*/
#adb-mashable{width:300px;margin:auto;padding:0;}
.adb-googleplus {height: 62px;}
.adb-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.adb-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.adb-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.adb-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.adb-twitter a.twitter-follow-button {display: block;}
.adb-twitter iframe {margin: 9px 11px;}
.adb-sociallinks {background-color: #d8e6eb;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 10px 11px;overflow: hidden;}
.adb-sociallinks a {text-shadow: 1px 1px white;}
.adb-sociallinks .adb-social {list-style: none;overflow: hidden;margin: 0 !important;padding: 0 !important;}
.adb-sociallinks .adb-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV97CSdONONre79C7uaU3Jf-R7dL5g-kHOy4KFzCyRePQbIdd8vzZyW0orT3EINazVxJ5yWMiRgc3D1Ybvo0zHAcFd7Ff7TNM9Ofa64TTBmfjnFgt108Et00x-4L9RtGZoe0PMWP8kDD22/s1600/w2b_socialsprite.png) no-repeat;font-size: 12px;}
.adb-sociallinks .adb-social li a {display: block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
.adb-sociallinks .adb-social li a:hover {text-decoration: underline;}
.adb-sociallinks .adb-social li.rss {background-position: 0 -240px !important;}
.adb-sociallinks .adb-social li.twitter {background-position: 0 -150px !important;}
.adb-sociallinks .adb-social li.facebook {background-position: 0 -450px !important;}
.adb-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.adb-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.adb-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.adb-emailbox input.emailu:focus {color: #333;}
.adb-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.adb-emailbox input.submitu:hover {text-decoration: none;}
.adbBlue{border:1px solid #397CBA;text-shadow: 1px 1px 0 #3A7AB2;background: #60abf8;background: -moz-linear-gradient(top, #60abf8 0%, #4082c4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#60abf8), color-stop(100%,#4082c4));background: -webkit-linear-gradient(top, #60abf8 0%,#4082c4 100%);background: -o-linear-gradient(top, #60abf8 0%,#4082c4 100%);background: -ms-linear-gradient(top, #60abf8 0%,#4082c4 100%);background: linear-gradient(top, #60abf8 0%,#4082c4 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60abf8', endColorstr='#4082c4',GradientType=0 );}
.adbBlue:hover{background: #9ccefc;background: -moz-linear-gradient(top, #9ccefc 0%, #5087bf 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ccefc), color-stop(100%,#5087bf));background: -webkit-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background: -o-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background: -ms-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background: linear-gradient(top, #9ccefc 0%,#5087bf 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ccefc', endColorstr='#5087bf',GradientType=0 );}.adb-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.adb-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>
    <div id="adb-mashable">
            <div class="adb-googleplus">
                <script type="text/javascript">
                        /*<![CDATA[*/
                        window.___gcfg = {lang: 'en'};
                        (function(){
                            var po = document.createElement("script");
                            po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
                            var s = document.getElementsByTagName("script")[0];
                            s.parentNode.insertBefore(po, s);
                        })();
                        /*]]>*/
                </script>
                <div class="g-plus" data-href="https://plus.google.com/105165843323659030487" data-width="300" data-height="69" data-theme="light"></div>
            </div>
<br />
<br />
            <div class="adb-facebook">
                <div class="fb-page" data-href="https://www.facebook.com/saludvidadiaria" data-width="298" data-height="100" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/saludvidadiaria"><a href="https://www.facebook.com/saludvidadiaria">Salud</a></blockquote></div></div>
            </div>
            <div class="adb-gplusone">
                <script type="text/javascript">/*<![CDATA[*/
                  (function() {
                        var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
                        po.src = "https://apis.google.com/js/plusone.js";
                        var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
                  })();/*]]>*/
                </script>
                <div class="g-plusone" data-size="medium" data-href="http://www.saludvidasana.com/"></div>
                <span>Recomiendame en Google</span>
            </div>
            <div class="adb-twitter">
                <a href="https://twitter.com/saludvidadiaria" class="twitter-follow-button" data-show-count="true">Follow @saludvidadiaria</a>
                <script type="text/javascript">/*<![CDATA[*/!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 class="adb-sociallinks">
                <ul class="adb-social">
                        <li class="rss"><a href="http://feeds.feedburner.com/saludvidasana">RSS</a></li>
                        <li class="twitter"><a href="https://www.twitter.com/saludvidadiaria">Twitter</a></li>
                        <li class="facebook"><a href="https://www.facebook.com/saludvidadiaria">Facebook</a></li>
                </ul>
            </div>
            <div class="adb-emailbox">
                <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=saludvidasana', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
                        <table width="100%">
                            <tr>
                                   <td>
                                       <input class="emailu" name="email" placeholder="Ingrese su email" type="text"/>
                                   </td>
                                   <td width="64px">
                                       <input class="submitu adbBlue" type="submit" value="Suscríbete"/>
                                   </td>
                            </tr>
                        </table>
                        <input name="uri" type="hidden" value="saludvidasana"/>
                        <input name="loc" type="hidden" value="es_ES"/>
                </form>
            </div>
                </div>

Realiza estos cambios:

- Remplaza todas las direcciones URLs que están marcadas de color azul, por sus perfiles sociales

- Ademas, cambia las dirección URL que esta marcado de color purpura por la dirección URL de su cuenta de Twitter, como también el nombre que esta marcado de color purpura

- Y por ultimo encontraras dos nombres marcados de color rojo saludvidasana el cual deberás cambiarlo por el nombre de tu feedburner de suscripciones.

Eso es todo, ahora es momento de dar un clic en guardar y ubica tu widget de suscripciones donde mejor te convenga.

¿Necesitas ayuda?

Espero haber sido lo mas explicativo posible, recuerda, cualquier pregunta no dudes 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

18 comentarios:

  1. muchísimas gracias por el tutorial!!
    Solo me surgió una duda: en mi blog, en la parte superior del widget aparece "We're on" en vez de "mi nombre en" (que en tu blog aparece Luis Chavez en) y "follow" en vez de "añadir a círculos"
    Como puedo solucionarlo?

    P.d: No pongo el enlace a mi blog, debido a que es un blog comercial y no quisiera ser vista como spammer...

    Desde ya, muchas gracias..
    Carolina...

    ResponderEliminar
  2. Hola, no te aparece tu nombre por que tal vez es muy largo, entre tu nombre y tu apellido debes de tener 11 a 12 caracteres solo asi aparecera el nombre en tu caja de suscriptores para blogger, y sobre la otra pregunta no es posible cambiar add to circles, ya que biene directamente de la app de google.
    Saludos.

    ResponderEliminar
  3. Hola a la hora de hacer la suscripción veia email, me dice: La alimentación no tiene suscripciones por correo electrónico habilitada. Me he ido a la pagina de mi feed para habilitarla pero me da un codigo html para hacerlo. ¿Pero donde lo pongo?

    ResponderEliminar
  4. Son errores comunes de configuracion, enviame un mensaje directo a: ayudadeblogger@gmail.com y agregame al chat, para poder guiarte y identificate con este mensaje, solo asi te podre ayudar.
    Saludos.

    ResponderEliminar
  5. Muy útil para mi que recién empiezo con un blog, Gracias!

    ResponderEliminar
  6. Luis yo acabo de instalarlo en mi blog pero no sé porqué el botón de facebook me queda encima del de Google+. Qué puedo hacer para solucionarlo?
    Saludos!!

    ResponderEliminar
    Respuestas
    1. Hola, es por que google actualizo su script a un tamaño diferente, asi que por el momento dejalo asi..
      Saludos.

      Eliminar
  7. Buenas tardes Luis, tengo el mismo problema con la caja de redes sociales que ARIELA GUERRA, ya pudiste solucionarlo? Por favor ayudame, estoy en face de relanzamiento de mi blog y quiero que todo se vea y este bien, Saludos y Gracias por el pots.

    ResponderEliminar
    Respuestas
    1. Hola, Ernesto, con respecto a su pregunta, he actualizado este tutorial, ahora si vuelva a copiar el código y seguir los pasos

      Quedo atento a su respuesta sobre este tema. Cuénteme como le fue!

      Saludos

      Eliminar
  8. Hola, Luis, Disculpa la tardanza, hoy apenas vi tu respuesta y cuasualmente viendo uno de tus tutoriales, probe el codigo esta solucionado el problema pero ahora tengo otro, el facebook no muestra los me gusta y el mesnsaje predenterminado Ejemplo: "A 500 personas les gusta esto", lo unico que sale en su lugar es un fondo blanco y con la palabra salud llevando a la pagina demo donde tu presentaste la caja que si quedo bien, Gracias y de nuevo perdon el retraso no creas que eh debajo de mejorar mi blog al contrario me tarde en responder por que estaba mejorandolo en otros aspecto. Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Ernesto, tal vez en su blog de Blogger le haga falta un código script para que se muestre la caja de la FanPage de Facebook.

      Además, cambie donde dice Salud por el nombre de su Fanpage

      También remita la dirección URL de su blog de Blogger para poder ingresar y ver que código le hace falta para que se habilite la caja de su FanPage

      Saludos

      Eliminar
  9. Hola Luis, Este no es mi Blog solo es uno que uso para probar codigos y entre otras cosas, http://mistutorialesblogs.blogspot.com, No te preocupes que uso la misma plantilla en mi mismo blog, y la caja de redes sociales se ve en el blog que si uso, Saludos y gracias Luis.

    ResponderEliminar
    Respuestas
    1. Hola, gracias por remitir la dirección URL de su blog de Blogger, para solventar este inconveniente, el código que le hace falta se encuentra detallado en el siguiente tutorial:

      http://www.ayudadeblogger.com/2015/05/como-insertar-el-nuevo-plugin-pagina-social-de-facebook-en-mi-blog-de-blogger.html

      Al abrir dicho tutorial solo ingrese el codigo que se encuentra estipulado en el paso 2. El cual dice:

      Busca este código

      < body >

      He ingrese script de Facebook que se encuentra en dicho tutorial,

      Con ese código se solventara su inconveniente

      Saludos.

      Eliminar
    2. Hola Luis, La verdad me ah servido, aunque la imagen del facebook se monta un poco encima de la de google+, pero esta bien, gracias Luis, eres un gran programador ya que fuiste el unico que pudo ayudarme con la caja los demas no pudieron.

      Hablando de otra cosa, No se si este seria el canal correcto para hacer la siguiente pregunta pero habras escrito un articulo donde hables sobre: Como hacer para que un Item del Menu, se quede selecionado de un color diferente al menu, en la pagina actual donde se encuentre el visitante?

      Eliminar
    3. Hola, es bueno saber que le ha funcionado este truco de Blogger, con respecto a su otra pregunta, en su momento realizare un tutorial sobre lo que usted indico, le recomiendo suscribirse al canal de Youtube en el cual publicare cientos de tutoriales.

      Saludos.

      Eliminar
  10. Gracias Luis, visite tu canal y me agrada, me voy a suscribir se ve que haz hecho un buen trabajo con ellos, ummm que raro que tengas tan pocos suscriptores no deberia, deberias tener muchos el canal no esta nada mal, aplicale algo de SEO, y si si existe el SEO para youtube jeje, cualquier cosa avisame y te los paso, Saludos y gracias :)

    ResponderEliminar
    Respuestas
    1. Hola Ganancias, gracias por su sugerencia

      Saludos.

      Eliminar
    2. Hola Luis, estamos a la orden, por favor recuerda avisarme cuando tendras listo el tutorial de: "Como hacer para que un Item del Menu, se quede selecionado de un color diferente al menu, en la pagina actual donde se encuentre el visitante?", De verdad me urge estoy terminando mi blog y quiero inaugurarlo completo, Gracias nuevamente luis por toda tu ayuda con tus tutoriales, Saludos.

      Eliminar