Tres maneras de insertar gadgets de suscripción a nuestra web


Varias personas me han solicitado les envíe el código de mi nuevo gadget de suscripción vía email de FeedBurner, así que he pensado compartir con ustedes tres gadget que he hecho del mismo estilo.

El código del que les guste, solo tienes que copiarlo y pegarlo en un gadget HTML de la sidebar.

Las imágenes están incluidas y alojadas en Blogger, así que no tendras mayor problema que los cambios que habrá que hacer en cada caso.


Gadget uno:
Gadget-suscribe-uno
Código:
<div style="border: 1px solid #4682b4;padding:5px;">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=
Tu-feed-en-Feedburner" title="Recibe nuestras entradas directamente en tu email!"><img alt="subscribe" src="http://2.bp.blogspot.com/_y7IGkRf9Tjc/TBuLtQPTFeI/AAAAAAAAAH8/-GNASBa4WkY/s400/EMAIL.png" style="float: left; vertical-align: middle; padding-right: 10px;" border="0" /></a>
<p style="padding: 5px 0pt;">Suscribete vía e-mail:</p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=
Tu-feed-en-Feedburner', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="text" name="email" /><input type="hidden" value="Tu-feed-en-Feedburner" name="uri" /><input type="hidden" name="loc" value="es_ES" /><input type="submit" value="Subscribe" /></form>
<a href="
URL_DEL_FEED"><img src="http://4.bp.blogspot.com/_y7IGkRf9Tjc/TBuUtFXSmtI/AAAAAAAAAIc/d_xrKhfqho4/s400/rss.png" title="Suscribe RSS" /></a> <a href="URL_EN_FACEBOOK"><img src="http://2.bp.blogspot.com/_y7IGkRf9Tjc/TBuUxNaMxxI/AAAAAAAAAIk/YfPrObt6vdE/s400/facebook.png" title="Sigueme en Facebook" /></a> <a href="URL_EN_TWITTER"><img src="http://4.bp.blogspot.com/_y7IGkRf9Tjc/TBuemxbvJNI/AAAAAAAAAI8/OFZNEvsO6-Q/s400/twitter.png" title="Sigueme en Twitter" /></a>
</div>
Cambios:
Donde dice Tu-feed-en-Feedburner y que está destacado en negrita en el código, tienes que colocar el nombre de nuestro feed de FeedBurner, es decir, solamente la terminación de la url del feed.

Algo así:
http://feeds.feedburner.com/creatublog

Donde dice URL_DEL_FEED tienes que colocar la url del feed completa.

Ejemplo:

http://feeds.feedburner.com/elescaparate

Donde dice
URL_EN_FACEBOOK y URL_EN_TWITTER colocais la url de vuestra página o perfil en Facebook y la url en Twitter respectivamente.

Gadget dos:

Gadget-suscribe-dos

Código:
<form style="border: 1px solid #ff7f50;background: none repeat scroll 0% 0% rgb(243, 239, 236);padding:0px 10px 10px;text-align:left;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Tu-feed-en-Feedburner', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><img src="http://4.bp.blogspot.com/_y7IGkRf9Tjc/TBuUtFXSmtI/AAAAAAAAAIc/d_xrKhfqho4/s400/rss.png" /> <b>Subcribe vía email:</b></p><input type="text" class="box" name="email" /><input type="hidden" value="Tu-feed-en-Feedburner" name="uri" /><input type="hidden" name="loc" value="es_ES" /><input class="susb" type="submit" value="Subscribe" /></form>
<style>
.susb{background-color:#ff8c00;border-color:#ff7f50;color:#fff;padding:0 2px 0 2px;}
.box{width:155px;margin-right:2px;border:1px solid #ff7f50;}
</style>
Cambios:
Donde dice Tu-feed-en-Feedburner colocamos el nombre de nuestro feed (no la url completa).

Como ves, el código lleva incluido una parte de CSS para controlar el diseño del botón de suscribe y el de la cajita de texto.

El botón de suscribe:
.susb{background-color:#ff8c00;border-color:#ff7f50;color:#fff;padding:0 2px 0 2px;}

La cajita de texto:
.box{width:155px;margin-right:2px;border:1px solid #ff7f50;}

Gadget tres

Gadget-suscribe-tres
Código:
<!-- Email suscribe -->
<div style="border: 1px solid #ccc;padding:5px;">
Suscribe vía email
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=
Tu-FeedBurner-Feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="text" name="email" /><input type="hidden" value="Tu-FeedBurner-Feed" name="uri" /><input type="hidden" name="loc" value="es_ES" /><input type="submit" value="Subscribe" /></form>
<div style="padding-left:10px;">
<p><a href="http://feeds.feedburner.com/
Tu-FeedBurner-Feed " target="_blank" title="Subscribe nuestras entradas"><img style="float:left; margin-right:5px; width:20px; height:20px;" src="http://4.bp.blogspot.com/_y7IGkRf9Tjc/TBuUtFXSmtI/AAAAAAAAAIc/d_xrKhfqho4/s400/rss.png" /></a></p>
<p><a href="http://feeds.feedburner.com/
Tu-FeedBurner-Feed " target="_blank" title="Subscribe nuestras entradas">Subscribe RSS Feed</a></p>

<p><a href="
Url-de-tu-pagina-de-Facebook" target="_blank" title="Facebook"><img style="float:left; margin-right:5px; width:20px; height:20px;" src="http://2.bp.blogspot.com/_y7IGkRf9Tjc/TBuUxNaMxxI/AAAAAAAAAIk/YfPrObt6vdE/s1600/facebook.png" /></a></p>

<p><a href="
Url-de-tu-pagina-de-Facebook" target="_blank" title="Facebook time">Conectame vía Facebook</a></p>

<p><a href="http://twitter.com/
Tu-nick-de-Twitter" target="_blank" title="Twitter"><img style="float:left; margin-right:5px; width:20px; height:20px;" src="http://1.bp.blogspot.com/_y7IGkRf9Tjc/TBuU1wVw2aI/AAAAAAAAAIs/sCPJ69n07Ms/s1600/twitter.png" /></a></p>

<p><a href="http://twitter.com/
Tu-nick-de-Twitter" target="_blank" title="Twitter time">Sígueme en Twitter</a></p>

</div></div>
<!-- /Email suscribe -->
Cambios:
Donde dice Tu-FeedBurner-Feed colocais vuestro nombre del feed de FeedBurner (no la url completa).

Donde dice Url-de-tu-pagina-de-Facebook poneis eso precisamente, la url de vuestra página o perfil en Facebook.

Donde dice Tu-nick-de-Twitter ponéis vuestro nick en Twitter (no la url).

Fuente: El Escaparate de Rosa

0 comentarios:

Publicar un comentario

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika