Widgets para Blogger – Caja de suscripción para Blogger
Todos sabemos la importancia de los
canales RSS. Así que es mejor dar a los lectores la opción de suscribirse a tu
blog mediante nuestro FeedBurner por correo electrónico. Es otro Widget con un diseño
espectacular que se acopla a todas las necesidades de una página web. En este
widget los usuarios que visitan nuestros blogs pueden suscribirse a las actualizaciones
diarias del blog a través del Rss de FeedBurner. Así que en este nuevo tutorial
de Widgets para Blogger aprenderán a insertar un simple código que hará todo
este proceso por ustedes. Incluye métodos de suscripción de Facebook, Twitter,
Google+, Pinterest y nuestro FeedBuerner.
Mire su demostración en el siguiente
blog de demos, el widget de suscripción está ubicado al final del sidebar
Les gusto verdad!
Vamos a implementar este truco en
nuestro blog de Blogger
1 Ir a Blogger
2 Un clic en “Diseño”
3 Abre un gadget “Añadir un gadget”
4 Busca el widget que dice “HTML/Javascript”
ábrelo
5 Ingresa las siguientes líneas de código
en su interior
<style>
.ayudadeblogger-subscribe-box-email-field {
background: #fff
url(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/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/foroayudadeblogger'
imageanchor='1' target='_blank' title='Suscríbete a nuestro Feed de
Noticias'><img alt='Icon' border='0'
src='http://1.bp.blogspot.com/-tA9p6vqVkBc/Tas3Gk0S8DI/AAAAAAAADVk/EMuM7CvpyD0/s1600/rss-feed-icon.png'
style='margin-right:3px; margin-left: 4px;'/></a>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=foroayudadeblogger&loc=es_Es'
imageanchor='1' rel='nofollow' target='_blank' title='Suscríbete via
Email'><img alt='Icon' border='0'
src='http://1.bp.blogspot.com/-WQOs8K-8srE/Tas3FyyNdSI/AAAAAAAADVc/zJtw5olTF4Q/s1600/Email-rss-feed-icon.gif'
style='margin-right:3px;'/></a>
<a href='http://www.facebook.com/ayudadeblogger'
imageanchor='1' rel='nofollow' target='_blank' title='Síguenos en
Facebook'><img alt='Icon' border='0'
src='http://3.bp.blogspot.com/-6be7A8wqQMU/Tas3Gb9hvGI/AAAAAAAADVg/iZnslgNOUY0/s1600/facebook-icon.gif'
style='margin-right:3px;'/></a>
<a href='http://twitter.com/ayudadeblogger'
imageanchor='1' rel='nofollow' target='_blank' title='Síguenos en
Twitter'><img alt='Icon' border='0'
src='http://4.bp.blogspot.com/-SF1XHhh4M5U/Tas3HKHWMZI/AAAAAAAADVo/VgTe1JU-qJc/s1600/twitter-icon.gif'
style='margin-right:3px;'/></a>
<a href='https://plus.google.com/+Ayudadeblogger'
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/' 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/foroayudadeblogger'><img
alt='' height='26' src='http://feeds.feedburner.com/~fc/foroayudadeblogger?bg=088A4B&fg=444444&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/ayudadeblogger"
class="twitter-follow-button" data-show-count="true"
data-size="large" data-dnt="true">Seguir @ayudadeblogger</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/ayudadeblogger'
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/+Ayudadeblogger"
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/+Ayudadeblogger"
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=foroayudadeblogger"
class="ayudadeblogger-subscribe-box-form" method="post"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=foroayudadeblogger',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true"
target="popupwindow"><input name="uri"
type="hidden" value="foroayudadeblogger" /><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-->
|
Realiza estos cambios:
He marcado de tres diferentes colores en
los lugares que tendrás que realizar sus respectivos cambios
Cambia todos los nombres que están marcados
de color rojo que dicen foroayudadeblogger
por el nombre perteneciente de tu método de suscripción de FeedBurner
Elimina las URLs que están marcadas de
color azul y remplaza cada una de ellas por la dirección URL perteneciente de
tus perfiles sociales
Cambia el nombre ayudadeblogger por el nombre de tu cuenta de Twitter
Una vez que hayas realizado todo estos
cambios, es momento de dar un clic en “Guardar” y ubica tu nuevo Widget de
suscripciones en el sidebar de tu blog.
Fácil verdad!
Recuerda suscribirte y recibirás mis
nuevas actualizaciones directamente en tu correo electrónico
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé
Saludos
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
0 comments:
Publicar un comentario