Como agregar una caja de suscripción y redes sociales en nuestro blog

 

Es cierto que algo muy importante para tener una buena lista de suscriptores en nuestro blog es tener un buen diseño de caja de suscripción y redes sociales, da un aspecto original y es muy llamativo para los lectores, lo cual hace que les llame la atención y les podamos sacar algún like, google+ o bien nos puedan seguir enTwitter, todo depende de la red social que mas utilices.

En está ocasión veremos un Widget muy simple y original con un diseño limpio y colores vivos que combinan con casi cualquier diseño de webs en colores claros, adopta todas las necesidades que necesitamos para una página web profesional.

Lo mejor de todo es que el proceso lo hará en automático, es decir todo lo hará el código y veremos los avances de los suscriptores y seguidores que poco a poco se integran a nuestra comunidad, 

Está es una vista previa de como es que se verá tu cuadro de suscripción para blogger con un diseño muy divertido y elegante al mismo tiempo.

Para implementar esté widget de suscripción para blogger sólo tienes que ir a diseño que se ve algo asídespués tienes que seleccionar la opción de añadir HTML/Javascript .

Tienes que agregar esté código en la ventana que se ha abierto y cambiar las partes del texto que te indicaré y tener mucha atención para que no haya ningún problema. Sólo tienes que cambiar:

tu-usuario

tu usuario

Realzando estos pasos podrás hacerlo de una forma sencilla, pero toma en cuenta la url que está antes de las palabras anteriores por que algunas son de facebook, twtter, google, etc. Como último paso sólo restará en guardar y colocar en la parte que tu quieres que esté visible.

Aqui tienes el codigo:  

 <style>
.ayudadeblogger-subscribe-box-email-field {
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLRmftE3qorxF1zXW6OhTV_BqoMzXkS64KsbsQ3BNfY7G2EEzfJODzKwZWFm53jsSeb2w1xcVi8EJuCiWzVJNJxwFzdCw4JiLoaR2ezWxXhdBCnVMC8Ds9LujEdhv7Rb27ctCODGsVOmXS/s1600/sprites.png) no-repeat 0 -28px;
    width: 280px;
    float: left;
    color: #777;
    margin: 0 0 10px 0;
    padding: 10px 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
     
}
.ayudadeblogger-subscribe-box-email-button {
    background: #09f;
    width: 280px;
    float: left;
    color: #fff;
    font-family: 'Verdana, Arial;
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    text-transform: small-caps;

}
.ayudadeblogger-subscribe-box-email-button:hover {
    background: #303030;
}
</style>
<!-- Start iconos sociales-->
<div id='social' style=' background: #d2ebff; width: 301px; padding: 10px 0 0 0px; margin: 0 0 0 0px; float: left;'>
<a href='http://feeds.feedburner.com/tu-usuario' imageanchor='1' target='_blank' title='Suscríbete a nuestro Feed de Noticias'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ8VBZZms1U0uOzP51SfRUjd7TS3pbz-JrspFV8Shor4MWcfh4CTZP-d_LQl9f1FYj63o-YVUIy7GeLyblumYuDpGMSzl0OOwePFBbH7-BomvnOTyeToigrbRZz5RQPgsXiinFerTGfI22/s1600/rss-feed-icon.png' style='margin-right:3px; margin-left: 4px;'/></a>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=tu-usuario&loc=es_Es' imageanchor='1' rel='nofollow' target='_blank' title='Suscríbete via Email'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghENrPw6yzRorpXI5nWxXqnjbNqWJ8GjdVtDsfYDDrP_hHdO34WKumuqQxX18O_w_Ena0F4Q_luBS16KWjR1gNYjGURH0WIfQAu1_9oo2OF2RMKxF54JNCo_HNNbd_IgmkN44e50ij9Euo/s1600/Email-rss-feed-icon.gif' style='margin-right:3px;'/></a>
<a href='http://www.facebook.com/tu id' imageanchor='1' rel='nofollow' target='_blank' title='Síguenos en Facebook'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNF5Nf0pJ_TYigYnBgaVxfxakfneoij0X7Dl51FHeDIYIU3vro2qJI8O115zKGGEumYW_qIo4B4ooTKDPW36GDBlchKjThRmxwRC8PcVUkPnSxOrECfmRkXee9DIxbISf5FmRfD4Cl2nzZ/s1600/facebook-icon.gif' style='margin-right:3px;'/></a>
<a href='http://twitter.com/tu id' imageanchor='1' rel='nofollow' target='_blank' title='Síguenos en Twitter'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkD6T1AKMB3wXCHgDPAnOsbYblyjv2G8IM_paZi-KbY2JyohZeZ1iGA57WYT7qWL7cjk9SnFjx2NpbVLDimDIf_1oik_YCovelToqrjrklerFF-TavZtzsh1z2PGme1lQXSvKlB1NB2KW9/s1600/twitter-icon.gif' style='margin-right:3px;'/></a>
<a href='https://plus.google.com/+tu-usuario' rel='nofollow' target='_blank'><img alt='Síguenos en Google Plus' height='43' src='http://www.dcddesign.com/images/social-media/google-plus-icon.jpg' style='margin-right:3px;' width='43'/></a>
<a href='http://pinterest.com/tu-usario' rel='nofollow' target='_blank'><img alt='Síguenos en Pinterest' height='43' src='http://passets-cdn.pinterest.com/images/big-p-button.png' style='margin-right:3px;' width='43'/>
</a>
<!-- Start FeedBurner-->
<center>
<a href='http://feeds.feedburner.com/tu-usuario'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/tu-usuario?bg=088A4B&amp;fg=444444&amp;anim=1' style='border:0' width='80' float='right' margin-right='5px'/></a></center>
</div>
<!-- Iconos sociales End-->
<!-- Feedburner Chicklet Start-->
<!-- Seguidores de Twitter Start-->
<div style="background: #d2ebff; width: 280px; float: left; padding: 10px 15px 10px 5px; margin: 0px; border-bottom: 1px solid #f2f2f2;">
<a href="https://twitter.com/tu-usuario" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Seguir @tu-usuario</a>
<script>!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?a4185c";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<!-- Seguidores de Twitter End-->
<!-- Facebook Like Start-->
<div style='background: #d2ebff; width: 280px; float: left; padding: 10px; margin: 0 0 10px 0px; border-bottom: 1px solid #f2f2f2;'>
<div class='fb-like' data-href='https://www.facebook.com/tu-usuario' data-send='true' data-show-faces='false' data-width='280'/>
</div>
<!-- Facebook Like End-->
<!-- Google plus Badge Start-->
<div style='background: #d2ebff; float: left; margin: 10px 0 10px 0px;'>
<div class="g-person" data-width="280" data-height="70" data-href="//plus.google.com/+tu-usuario" data-layout="landscape" data-rel="author"></div>
</div>
<div style='background: #d2ebff; float: left; margin: 0 0 10px 0;'>
<div class="g-page" data-width="280" data-height="70" data-href="//plus.google.com/+tu-usuario data-layout="landscape" data-rel="publisher"></div>
</div>
<!-- Google plus Badge end-->
<!-- Start Email-->
<center>
<div class="ayudadeblogger-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=tu usuario de feed" class="ayudadeblogger-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tu usuario de feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="tu usario" /><input name="loc" type="hidden" value="es_ES" /><input class="ayudadeblogger-subscribe-box-email-field" name="email" autocomplete="off" onblur="if (this.value == '') {this.value = 'Ingrese su email';}" onfocus="if (this.value == 'Ingrese su email')
{this.value = '';}" value="Ingrese su email"/><input class="ayudadeblogger-subscribe-box-email-button" title="" type="submit" value="Suscríbete ahora !" /></form></div>
</center></div>
<!-- Fin del Email-->

Share on Google Plus

About Amazon mejores ofertas