48

Tres gadgets de suscripción

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 vosotros tres gadget que he hecho del mismo estilo.

El código del que os guste, solo tenéis que copiarlo y pegarlo en un gadget HTML de la sidebar, las imágenes están incluidas y alojadas en Blogger, así que no tendréis 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtbRrkXqTwFchTfDu89OK1cQVkyHsiuRs-g_HlAe1jMBdtOltOwf7d6SA_AppOFl_xAQWDVbpDaYFBbcb5dpBCftRIKI-jjgLxEZZO_rbffTbX1J0s_-bU-oeTJuaQmROVx_y3GUu2P2dH/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4KMxa2Zlpjk10oPVEdEQ9lfS_tgNEI5FcJRg7UTI0x7L1EQ-2a_l63hI2EhePfbc31cCVvJ7UaewuXZlssN7r2MKSAb9uZSQ9rS_Ylz6YNwv2ujF7eI9JUcfwTXVXrvBw_SX1a6kLUN3u/s400/rss.png" title="Suscribe RSS" /></a> <a href="URL_EN_FACEBOOK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPIm_4Eon0GKRZpsgSvNTbC5qSMiF7T5bCzybAGPsFXYzHCRRhOJBRVne2PCBHJpHZjrtinOGLx56LDRiP7vxvAH-W69YsMYPMR0tKIizCXp0oC-e_uAv5BgqASGkROQuzfXH_09Kwaz9a/s400/facebook.png" title="Sigueme en Facebook" /></a> <a href="URL_EN_TWITTER"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmuEe7U8lK-IwPSlf6t7WszMlu_2VpccTEAmxJlOynEjOd-LHG29OwLI-OKTYJWBKjy6F0cPXs2GsAab1m5933ZyMPHNUrPgUOc-WlQbOoqRH2g0D4sT20Vv85JVXG1G7KryFPzMxvRhO3/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, tenéis que colocar el nombre de vuestro feed de FeedBurner, es decir, solamente la terminación de la url del feed.
Algo así:
http://feeds.feedburner.com/elescaparate

Donde dice URL_DEL_FEED tenéis 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4KMxa2Zlpjk10oPVEdEQ9lfS_tgNEI5FcJRg7UTI0x7L1EQ-2a_l63hI2EhePfbc31cCVvJ7UaewuXZlssN7r2MKSAb9uZSQ9rS_Ylz6YNwv2ujF7eI9JUcfwTXVXrvBw_SX1a6kLUN3u/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 veis, 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4KMxa2Zlpjk10oPVEdEQ9lfS_tgNEI5FcJRg7UTI0x7L1EQ-2a_l63hI2EhePfbc31cCVvJ7UaewuXZlssN7r2MKSAb9uZSQ9rS_Ylz6YNwv2ujF7eI9JUcfwTXVXrvBw_SX1a6kLUN3u/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPIm_4Eon0GKRZpsgSvNTbC5qSMiF7T5bCzybAGPsFXYzHCRRhOJBRVne2PCBHJpHZjrtinOGLx56LDRiP7vxvAH-W69YsMYPMR0tKIizCXp0oC-e_uAv5BgqASGkROQuzfXH_09Kwaz9a/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGl26B3bL4q97cMJVT0ZB7axCCN2siMj0-iKdck4W5_678jTfW0hVIPPPqShLaOxiPYWfuKl4sUK4WwX3sJxHWbjEFBvKsxbGZYvx13JDv850DHHl3tAlBEjWY-qn0jnF0OiFz09NZB-rq/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).

Entradas Relacionadas:

48 comentarios:


Ecovivencias

Rosa, ahora mismo me hago follower,

del batitú

Hola Rosa :D
Tengo una pregunta que no tiene nada que ver con este post, pero como tiene pocos comentarios por ahora, no te distraeré demasiado.
Estoy pensando en cambiar todo mi blog,y lo que tengo ganas de hacer es parecido a tu menú, es decir, un menú con links a determinadas entradas. ahora, ahí viene la pregunta, como es que en tus entradas "archivos", "imprescindibles", etc, no está la sidebar? pero si está en Inicio, eso se puede hacer entonces? y al clickear en un link del menú, pareciera que la página nueva aparece abajo del cabezal, pero que no cambia toda (como si fuera en php).
gracias Rosita como siempre.

Pablo Picon

Hola ROsa, me gustaria saber como puedo quitarle el marco azul del primero. Me gustaria solo con lo de dntro pero no veo muy bien que codigos cambiar. Gracias

Nelson

Rosa mi querida amiga, eres sencillamente todo un amor. Un abrazo inmenso desde mi querida Venezuela, y como siempre te deseo todo lo mejor.

Unknown

hola
tengo un contador de visitas, pero cuenta todas las veces que yo clico para agregar cosas.
¿sabes que contador puedo poner que cuente por ejemplo cada ip?
http://desdemiobjetivo-pili.blogspot.com/
si puedes ver mi blog, te agradecería tu opinión.
y si me pudieras contestar por mail, mejor que mejor, o será mucho pedir.
p.genio.loco@hotmail.com
gracias por todo y enhorabuena por tu blog
un saludo. Pili

Anónimo

Pili Pues no, no se de ninguno, todos los que conozco cuentan cada visita.

Anónimo

_pAbLeRaS_ En la primera línea del código, retiras esto:

border: 1px solid #4682b4;

Anónimo

del batitú En el menú enlazo las nuevas páginas de Blogger y pueden modificarse en su diseño tal como explico en esta entrada:

http://elescaparatederosa.blogspot.com/2010/03/cambiar-el-diseno-de-las-paginas.html

En cuanto al efecto que dices del header que parece permanece estático, es porque en el diseño original de las plantilla de Blogger el <div id='outer-wrapper'> o lo que es lo mismo, todo el cuerpo del blog, se carga al mismo tiempo, yo he movido esa línea a debajo del header, es decir, he sacado el header del resto del cuerpo, pero hay que tener cuidado con eso, pues no en todos los diseños quedaría bien, depende del aspecto que quieras darle al blog...

Anónimo

Grande dica,
já coloquei em meu blog,
um abraço.

Anónimo

querocriarumblog.com.br um abraço. :D

Alberto

Hola Rosa
Muy interesante el post. Al usarlo en http://www.desafios.edusanluis.com.ar/ e ingresar una dirección, me aparece el mensaje "the feed does not have subscriptions by email enabled" ¿Cómo puedo habilitarla? Además el rectángulo no aparece en forma completa ¿Qué parámetro debo modificar?
Gracias por tu atención
Alberto
achristin@gmail.com

Anónimo

Alberto Christin Vamos a ver, aparecerá inhabilitada si no cambias los datos que indico en la entrada por los tuyos... asi que en primer lugar debes tener feed habilitado en Feedburner y después seguir los pasos... es copiar y pegar, pero cada uno ha de colocar sus datos.

En cuanto al tamaño, es normal, ya que lo has colocado en una sidebar muy estrecha... modifica el tamaño de la caja de texto aquí:
.box{width:155px;

M.J.C

Buenos días,

Me gustaría que mi página de blogger respondiera cuando le das al Link "PUBLICAR COMENTARIO"

He mirado el código HTML expandiendo los artilugios y parece que todo es correcto.
Al pinchar debajo de una entrada, para publicar un comentario, la página no muestra el cuadro de texto para comentar.

Aviso: Mi blog está en una plantilla modificada para Blogger.

http://com-unidadesvirtuales.blogspot.com/

Aceptaré todos los consejos y recomendaciones.

Gracias de antemano.

MJ

Anónimo

M.J.C Creo que tu problema es justo el que Jmiur comenta en esta entrada:

http://vagabundia.blogspot.com/2008/06/solucin-para-algunos-problemas-al.html

Alex González

Muchas Gracias, lo anduve buscando, inclusive trate de hacerlo y no pude
Gracias Rosa

Alex González

Una pregunta más como hacer ese tipo de letra y la sombra que tienes aqui para casi todo, por ejemplo ROSA, la letra esta diferente.

Como la hago asi

Gracias rosa

del batitú

Hola Rosa, muchas gracias, vi tu post explicativo, pero a pesar de que empecé el blog con una plantilla mínima la he modificado tanto que ahora me da miedo tocarla y que quede un desastre todo. Tendré que cambiar mi idea. Gracias Ro.

Unknown

Gracias de todas formas

vicentz

Gracias por el codigo, me funcionno el 3er muy bien.

Play

Hola rosa intente poner el Gadget uno pero con los iconos(facebook, rss y twitter) del Gadget tres, pero esos icono salen mal por que no salen en linea recta uno bajo el otro si no asi como esta imagen el código que puse fue este.

Play

el código que puse fue este puse mal arriba la url :S.

Pablo Picon

Rosa, puse el codigo y hoy quite lo que me comentaste para eliminar el borde del cuadro, y al darle guardar me obliga a poner un titulo, y me gustaria que no tuviera, sabes si esto sera asi ahora, o es algo que pasa hoy? Gracias por la respuesta ultima

Anónimo

_pAbLeRaS_ Mira mi última entrada.

Anónimo

gracias rosa

Nena/VioletaCentaúro6260

Gracias Rosa! voy a usar alguno de los 3 cuando cambie mi plantilla en la que estoy trabajando ;)

Anónimo

Gracias Rosa, queda precioso.
Un saludo desde Extremadura.

Anónimo

RocksNRules No, no tengo idea de eso. Por cierto, borro tu comentario... tal como indico sobre el formulario, no admito urls directas en ellos.

calcetinrayado

Muchas gracias! Me quedo con el primero, ya lo he colocado en mi blog ^^

Saludos.

Federico Ferreiro

Rosa muchas gracias por todo! Tus consejos y hasta tus codigos para mi, que soy un completo ignorante en la materia, son impagables. Te añado a mis enlaces. Muchas gracias nuevamente. Saludos desde argentina.

Anónimo

Federico Ferreiro ¡Gracias a ti!
¿Sabes? Tu log es uno de los que yo llamo "buenos" que e he encontrado últimamente... y acabo, mirando tu blog, de tener una idea de las mías :S... en breve sabrás de que hablo. :D

Quin

Hola Rosa, estamos utilizando mucho la información que nos ofreces para ir montando poco a poco nuestro blog: http://qandcoterrassa.blogspot.com/
Por eso creo justo añadirte en nuestros links, ¿tienes algun boton hecho para añadirte?
Un abrazo y gracias.

Anónimo

Quin En la sidebar...

liyiss

Hola Rosa, llevo una racha que todos los dias pruebo una cosa nueva de tu blog! muchas gracias.
En este caso, queria probar hacer un "suscribe" en el que se pueda suscribir a dos blogs a la vez. He puesto una url del feed seguida de otra, serviria así? no me ha dado problemas y aparentemente esta bien, pero no se como asegurarme si da resultado.
Un supersaludo.

Anónimo

liyiss Pues no tengo ni idea, aunque mucho me temo sirva solo para la primera... la forma de comprobarlo es suscribiendote tu misma.

Unknown

Hola Rosa, y gracias de antemano por los gadgets...

Tengo un problema con el gadget dos y es que en Internet Explorer no se muestra bien sino con un espacio excesivo en la parte de abajo, y fuera del tema hay veces que al recargar el blog pasa que el ultimo gadget de la sidebar derecha se cae y se sale de ella, no se a que se deberá (también sucede solo en IE (8)). El blog del que te hablo esta en mi perfil. Podrías hacerme el favor de mirar y decirme si sabes arreglarlo? Gracias y felidades por tan lindo blog :)

Anónimo

Juan Diego No noto el problema que dices con el último gadget de la sidebar... por más que he refrescado, el gadget continua en su sitio...

En cuanto al gadegt de suscripción, es exactamente igual al que yo tengo colocado (hablo de su código) la única diferencia es que en tu sidebar lo tienes centrado y al verlo con IE8 es como si no "entrase" en el espacio disponible... tendrías que reducir el width de la caja de búsqueda para probar...

Unknown

Gracias Rosa por tu respuesta, creo que como lo puse ya quedó bien jeje. Salu2

Unknown

en el gadget 2:
como puedo cambiar la cajita del texto que dice: subscribe, y dejarla solo como texto.

agradeceria mucho la ayuda.

Anónimo

lupePues eliminando desde <form hasta >/form> y sustituyéndolo por un enlace normal a http://feedburner.google.com/fb/a/mailverify?uri=Tu-feed-en-Feedburner'

Francisco

Me quedó buenisimo Rosa....muchas gracias!!


Saludos!

Cartoncita Rosa

Hola Rosa :) logre ponerlo y modificarlo a mi gusto como podrás ver en mi blog, pero al suscribirse ya no se puede, quizá eso no tenga que ver con el código, puse el número 2 y la parte en negrita la sustituí por BlogDeAdministracion que es el feed no la dirección completa y eso puse en ambas partes del código, pero no funciona:( Los deje ahi para que los puedas ver si es que algo hice mal. Ya lo revise pero no se que pueda ser. Gracias Mil :D

Anónimo

Universitaria Al tratar de suscribirme me sale este mensaje de error:
"The feed does not have subscriptions by email enabled"
Lo cual significa que no has habilitado en FeedBurner, la opción de suscribirse por email:
http://elescaparatederosa.blogspot.com/2007/10/suscribirse-al-blog-mediante-email-con.html

Blog La Pequeña Grecia

Hola, hoy implementé el segundo gadget de suscripción. Muy buena la ayuda. Saludos de Venezuela.

Gracias, Rosa.-

www.lapequenagrecia.com

Delikat Essences

Gracias Rosa, lo acabo de colocar en mi blog y así unifico todos los tipos de suscribciones, queda mucho mejor.

Sugiero además corregir la falta de ortografía que traen los gadgets de por sí. El primero de ellos, omite el acento de "suscríbeme" y el último también lo omite en "conéctame". Todo sea por tener unos espacios cuidados libres de las faltas de ortografía. Un saludo y gracias por tu gran labor.

Anónimo

Delikat Essences No es una falta de ortografía como tal... te explico, a veces algunos navegadores muestran los acentos con esos símbolos raros en su lugar... Blogger hasta no hace mucho tiempo lo hacía con los títulos de entradas, de ahí que en algunas de mis entradas antiguas se note también la falta de acentos... y es porque a la hora de que los buscadores indexen un blog, se complica si en lugar de acento o ñ por ejemplo, sale algo rarito...

Delikat Essences

Entiendo Rosa, gracias por la aclaración y es verdad que a veces salen códigos raros. De todas formas deciros que lo he cambiado y ha salido bien, sin signos extraños.

Un saludo.

Michael

Gracias por la ayuda! ya he podido meter la suscripción por email que estaba buscando.
Bsos.

Raúl Sainz

Gracias Rosa.
Acabo de incluir un gadget de subscricción a mi blog "Con algo de estilo".
Suelo consultar tu blog cuando puedo, y ya me llegan todos tus post.
Gracias por el tiempo que dedicas y lo bien explicados que dejas tus "lecciones".

Un saludo.

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S