8 Diseños Personalizados para el Widget: "Seguir por Correo Electrónico"
Hace más de 2 años que se estuvo especulando sobre el cierre de FeedBurner, sospecha que surge al informarse que su API se declarara oficialmente obsoleta a mediados del 2011, concluyendo con su cierre definitivo en octubre del 2012. Luego vino el retiro de AdSense para Feeds, después el cierre de Google Reader lo que volvió a levantar sospechas, sin embargo, hasta la fecha el servicio sigue funcionando.
Nunca he recibido alguna notificación como usuario del servicio, sugiriéndome alguna otra alternativa, como sucedió por ejemplo con el widget de Google Friend Connect, llamado: "Seguidores", en donde me recomendaban utilizar en su lugar el "Gadget de Seguidores de Google+", lo que hacía pensar que este servicio/elemento podría ser retirado definitivamente. Probablemente también hayas recibido un correo electrónico de Blogger recomendándotelo, ¿o no?
Desconozco si Google terminará por cerrar FeedBurner o hará como hizo con Friend Connect: dejarlo operativo solo para los blogs de Blogger. El tiempo pasa y las cosas se mantienen igual (casi todas...).
Pero bueno, podemos seguir usando el servicio sin problemas, buscando construir una audiencia de lectores asiduos interesados en nuestro contenido, considerando también que Blogger nos facilita el widget de suscripción por correo electrónico, el cual podemos añadir fácilmente y haciéndolo, es posible disfrutar de los beneficios de FeedBurner.
Así es como luce por defecto el gadget suscribir por correo electrónico. "Follow by Email" es el título del gadget y aparece como tú lo pusiste.
Para resaltar este elemento tan importante, hoy tengo para ti 8 estilos personalizados, y además podrás habilitar el widget para que funcione también en la versión móvil de Blogger si es que la usas y si así lo quieres.
Tutorial Relacionado: Cambia el idioma de la ventana de Feedburner que se abre al hacer una solicitud de suscripción, y aprende otras cosas sobre la personalización de este widget, en esta entrada: http://www.compartidisimo.com/2011/03/nuevo-widget-de-blogger-seguir-por.html
Lo que haremos
En el primer apartado, explico cómo agregar el CSS que definirá la apariencia del widget.En el segundo, veremos cómo editar el código del widget para que puedas personalizar el texto del botón, agregar el texto informando sobre la confirmación de la suscripción o la invitación para que se suscriban, o para que el botón de suscripción aparezca debajo del campo donde el usuario teclea su correo electrónico, y que puedes apreciar en el estilo 5, 7 y 9.
En la tercera parte, explico cómo hacer que aparezca el elemento en la versión Móvil de Blogger.
Los diseños personalizados ya están listos para usarse, aunque puedes personalizar los colores de los bordes, botón y fondo, usando una tabla de colores web.
1. Agregar el CSS que definirá la apariencia del widget
Antes de agregar el CSS que facilito, agrega el gadget; haciéndolo, activas tu cuenta en FeedBurner y puedes visualizar los cambios desde el diseñador de plantillas.Luego, elige el diseño que te gusta , copia el CSS que aparece debajo, y agrégalo al blog yendo a: Plantilla > Personalizar > Avanzado > Añadir CSS. Desde ahí podrás ver cómo luce el widget. Después, guardas el cambio haciendo click en el botón que dice: "Aplicar al blog".
He comprimido moderadamente el CSS para que sea más ligero. Sin embaro he resaltado de color verde los valores que pudieras estar interesado en editar, como colores de fondo y bordes.
Estilo 1: Ribbon. En este estilo creamos una cinta en el título del widget con CSS, usamos un color de fondo obscuro de contraste y resaltamos el botón con color de fondo sólido. El color de fondo del botón cambia al poner el puntero del ratón encima de éste (:hover).
#FollowByEmail1{width:100%;padding:0 30px 30px;background:#272727;position:relative}
#FollowByEmail1 .recordar{margin:1.4em auto 0;color:#FAFAFA;font-size:95%;padding:0 3px}
#FollowByEmail1 h2{font-size:120%;text-transform:uppercase;color:#fafafa;position:relative;top:-5px;background:#C00C0C;margin:0 0 20px;padding:20px 40px;text-align:center;width:100%;left:-40px}
#FollowByEmail1 h2:before{position:absolute;content:"";bottom:-10px;right:0;width:0;height:0;border-width:10px 10px 0 0;border-style:inset;border-color:#B61313 transparent transparent}
#FollowByEmail1 h2:after{position:absolute;content:"";bottom:-10px;left:0;width:0;height:0;border-width:0 10px 10px 0;border-style:solid;border-color:transparent #6D0101 transparent transparent}
#FollowByEmail1 input.follow-by-email-address{height:43px!important;border:none!important;padding:0!important;text-indent:5px}
#FollowByEmail1 input.follow-by-email-submit{text-transform:uppercase;height:43px!important;left:-12px;width:100%;position:relative;border-radius:0!important;border:none;padding:0!important;background:#D61414!important}
#FollowByEmail1 input.follow-by-email-submit:hover{background:#AA0606!important} Estilo 2: Boxy
Estilo con fondo de color sólido y borde que cubre el 100% del ancho debajo del título del widget. Botón también con color de fondo sólido. El color de fondo del botón cambia al poner el puntero del ratón encima de éste (:hover).
#FollowByEmail1{width:100%;padding:0 20px 30px;margin:0;border:1px solid #dadada;background:#272727}
#FollowByEmail1 .recordar{color:#fafafa;margin:1.5em auto 0;font-size:95%;padding:0 3px}
#FollowByEmail1 h2{font-size:120%;text-transform:uppercase;padding:15px 20px;margin:0 0 22px;width:100%;text-indent:3px;border-bottom:1px solid #575654;color:#fafafa;display:block;position:relative;left:-20px}
#FollowByEmail1 input.follow-by-email-address{height:43px!important;border:1px solid #eee!important;padding:0!important;text-indent:9px}
#FollowByEmail1 input.follow-by-email-submit{text-transform:uppercase;height:45px!important;left:-12px;position:relative;border-radius:0!important;padding:0 2px!important;border:none!important;background:#2D61E7!important;width:100%;display:block}
Estilo 3: Frame.
Estilo con color de fondo solido y borde sólido con 4 pixeles de separación. El color de fondo del botón cambia a un rojo más obscuro al poner el puntero del ratón encima de éste (:hover).
#FollowByEmail1{width:100%;padding:20px;margin:auto;border:1px solid #2C2C2C;position:relative;display:block}
#FollowByEmail1:before{position:absolute;content:"";width:auto;height:auto;background:#2C2C2C;margin:auto;padding:0;left:4px;right:4px;top:4px;bottom:4px}
#FollowByEmail1 h2{color:#fff;font-size:120%;text-transform:uppercase;text-align:center}
#FollowByEmail1 input.follow-by-email-address{height:43px!important;border:none!important;padding:0!important;text-indent:9px;margin:0 auto;width:100%;background:#fff!important;position:relative;z-index:33/*No quitar importante para android*/}
#FollowByEmail1 input.follow-by-email-submit{text-transform:uppercase;height:43px!important;left:0;position:relative;border-radius:0!important;padding:0 10px!important;background:#FC5858!important;border:none!important;display:block;width:auto;margin:14px auto;transition:background-color .25s ease}
#FollowByEmail1 input.follow-by-email-submit:hover{background:#D11F1F!important}
#FollowByEmail1 input.follow-by-email-submit:active{box-shadow:inset 1px 2px 2px #9E0101}
Estilo 4. Double Border
Caja resaltada con borde doble, fondo blanco y botón con color sólido. El color de fondo del botón cambia al poner el puntero del ratón encima de éste (:hover).
#FollowByEmail1{width:100%;padding:20px;margin:20px auto;border-color:#ccc;border-style:double;position:relative;display:block}
#FollowByEmail1 h2{font-size:120%;text-transform:uppercase;text-align:center}
#FollowByEmail1 input.follow-by-email-address{height:43px!important;border:1px solid #ddd;padding:0!important;text-indent:9px;margin:0 auto;width:100%;background:#fff!important;position:relative;box-sizing:border-box}
#FollowByEmail1 input.follow-by-email-submit{height:43px!important;left:-8px;position:relative;border-radius:0!important;padding:0 10px!important;background:#FC5858!important;display:block;width:auto;margin:14px auto;transition:background-color .25s ease;box-sizing:border-box}
#FollowByEmail1 input.follow-by-email-submit:hover{background:#D11F1F!important}
#FollowByEmail1 input.follow-by-email-submit:active{box-shadow:inset 1px 2px 2px #9E0101}
Estilo 5: Target
Estilo con borde solido de 5 píxeles de grosor, en donde aparece el texto aclaratorio sobre la suscripción debajo del título del gadget. El botón aparece debajo del campo donde se teclea el correo electrónico, y cambia de color negro a rojo al poner el puntero del ratón encima de éste (:hover).
#FollowByEmail1{background:#fff;border:4px solid #000;width:100%;padding:15px 20px 20px;margin:10px 0}
#FollowByEmail1 p.invitar{margin:.7em auto 1em;font-size:100%;padding:0}
#FollowByEmail1 h2{font-size:130%;text-transform:uppercase;padding:0 5px;margin:0 auto;text-align:center;display:table;position:relative;left:0;top:12px;background:#fff}
#FollowByEmail4 .widget-content{border-top:1px solid #ccc;padding-top:15px;margin:0}
#FollowByEmail1 input.follow-by-email-address{height:43px!important;border:1px solid #ccc!important;padding:0!important;text-indent:9px;margin:0 auto;box-sizing:border-box;text-align:center}
#FollowByEmail1 input.follow-by-email-submit{height:45px!important;color:#fafafa;text-transform:uppercase;left:0;position:relative;border-radius:0!important;padding:0!important;background:#020202;border:1px solid #020202;display:block;width:100%;margin:14px auto;box-sizing:border-box}
#FollowByEmail1 input.follow-by-email-submit:hover{border:1px solid #f66!important;background:#f66;color:#fafafa}
#FollowByEmail1 input.follow-by-email-address:focus,#FollowByEmail4 input.follow-by-email-submit:active{border-color:#777!important}
Estilo 6: Conected.
Borde sólido que envuelve la caja de suscripción con excepción al título de éste. Botón de color sólido que se muestra a un lado del campo de suscripción sin tener ningún margen de separación.
#FollowByEmail1{width:100%;padding:0 30px 30px;margin:2em 0;border:1px solid #ddd;position:relative}
#FollowByEmail1 .recordar{margin:1.5em auto 0;font-size:95%}
#FollowByEmail1 h2{font-size:130%;text-transform:uppercase;position:relative;top:-12px;left:0;display:table;padding:0 5px;background:#fff;margin:0 auto 16px}
#FollowByEmail1 input.follow-by-email-address{height:43px!important;border:1px solid #ddd!important;padding:0!important;text-indent:9px}
#FollowByEmail1 input.follow-by-email-submit{text-transform:uppercase;height:45px!important;left:-12px;position:relative;border-radius:0!important;padding:0!important;background:#0a0a0a!important;border:none;width:100%;transition:background-color .25s ease}
#FollowByEmail1 input.follow-by-email-submit:hover{background:#D61414!important}
Estilo 7: Connection.
Borde sólido que encierra la caja de suscripción. Formas rectángulares en los extremos de color sólido usando caracteres unicode. Botón de color sólido que se muestra debajo del campo del correo electrónico.
#FollowByEmail1{border:1px solid #000;padding:14px 20px;margin:0;width:100%}
#FollowByEmail1 h2{font-size:140%;text-transform:uppercase;padding:7px 12px 20px;margin:0;position:relative;text-align:center}
#FollowByEmail1 h2:before,#FollowByEmail1 h2:after,#FollowByEmail1:after,#FollowByEmail1 .widget-content:before{position:absolute;color:#000!important;font-size:15px}
#FollowByEmail1 h2:before{content:"\25FC";left:-25px;bottom:-8px;top:-25px}
#FollowByEmail1 h2:after{content:"\25FC";right:-25px;bottom:-8px;top:-25px}
#FollowByEmail1:after{content:"\25FC";left:-5px;bottom:-7px;}
#FollowByEmail1 .widget-content:before{content:"\25FC";right:-5px;bottom:-7px;}
#FollowByEmail1 input.follow-by-email-address{height:43px!important;border:1px solid #ccc!important;padding:0!important;text-indent:9px;margin:0 auto;box-sizing:border-box;text-align:center}
#FollowByEmail1 input.follow-by-email-submit{height:45px!important;text-transform:uppercase;left:0;color:#fafafa;position:relative;border-radius:0!important;padding:0!important;background:#000;border:none;display:block;width:100%;margin:14px auto;box-sizing:border-box}
#FollowByEmail1 input.follow-by-email-address:hover,#FollowByEmail1 input.follow-by-email-submit:hover{border:1px solid #424242!important}
#FollowByEmail1 input.follow-by-email-address:focus,#FollowByEmail1 input.follow-by-email-submit:active{border-color:#f66!important}Estilo 8: Trade
Formas triangulares en los vértices del widget con color sólido, conseguido con caracteres unicode. Botón de enviar de forma recta con el mismo ancho del campo de correo electrónico resaltado con color sólido y que aparece debajo de éste.
#FollowByEmail1 .widget-content{width:100%;padding:0 0 40px;overflow:hidden}
#FollowByEmail1 .widget-content:before,#FollowByEmail1 .widget-content:after,#FollowByEmail1 h2:before,#FollowByEmail1 h2:after{position:absolute;color:#000!important;font-size:22px}
#FollowByEmail1 .widget-content:before{content:"\25E3";left:0;bottom:0}
#FollowByEmail1 .widget-content:after{content:"\25E2";right:0;bottom:0;}
#FollowByEmail1 h2{position:relative;padding:4px 0;margin:0;font-size:125%;color:#000;text-align:center;line-height:160%;text-transform:uppercase}
#FollowByEmail1 h2:before{content:"\25E4";left:0;top:0}
#FollowByEmail1 h2:after{content:"\25E5";right:0;top:0}
#FollowByEmail1 input.follow-by-email-address{height:43px!important;border:1px solid #ccc!important;padding:0!important;margin:20px auto 0;box-sizing:border-box;text-align:center}
#FollowByEmail1 input.follow-by-email-submit{height:45px!important;color:#fafafa;position:relative;border-radius:0!important;padding:0!important;background:#020202;border:1px solid #020202;display:block;width:100%;margin:14px auto;box-sizing:border-box;text-transform:uppercase;color:#fafafa}
#FollowByEmail1 input.follow-by-email-submit:hover{border:1px solid #f66;background:#f66}
#FollowByEmail1 input.follow-by-email-address:hover{border:1px solid #ddd!important}Modificando la Estructura del widget o agregando otros elementos
2. Agregar el texto que invita a los usuario a confirmar la suscripción (opcional)
Probablemente habrá algunos usuarios que desconocen el proceso de suscripción a un sitio web o blog a través de FeedBurner, e ignoren que deben confirmar la suscripción al recibir la solicitud por correo electrónico. Así que no está demás decírselos para que estén atentos al recibirla. Por ello agregamos el texto informándoselos. Aunque por supuesto eres libre de agregarlo o no.
En algunos estilos he agregado dicho texto (Estilos 1,2 y 6) para que veas cómo se ve, aunque puedes ponerlo en cualquier estilo que vayas a usar. Incluso poner otro texto que creas conveniente. Por ejemplo, si ofreces un libro eléctrónico a los usuarios que se suscriban, o cualquier otro recurso gratuito para motivarlos a suscribirse, pues lo pones ahí.
Para poner el texto, solo sigue estos pasos:
- Ve a: Editar HTML, y activas el buscador del editor. Para ello haz click dentro del cuadro del código fuente de tu blog, luego presiona las teclas Ctrl + F al mismo tiempo.
- Luego, pon en el campo este código:
</form>
y da enter para que el editor te envíe a esa linea de código. Luego pega el siguiente código antes de esa linea.
<p class='recordar'> No olvides confirmar tu suscripción, haciendo clic en el enlace que recibirás por email. ¡Nunca recibirás SPAM garantizado!
</p>
Ya puesto el código anterior con el texto, debería verse así en el código del widget:
<b:widget id='FollowByEmail1' locked='false' title='Suscríbete al Blog' type='FollowByEmail'>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'>
<div class='follow-by-email-inner'>
<form action='http://feedburner.google.com/fb/a/mailverify' expr:onsubmit='"window.open(\"http://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath + "\", \"popupwindow\", \"scrollbars=yes,width=550,height=520\"); return true"' method='post' target='popupwindow'>
<table width='100%'>
<tr>
<td>
<input class='follow-by-email-address' name='email' placeholder='Correo electrónico...' type='text'/>
</td>
<td width='64px'>
<input class='follow-by-email-submit' type='submit' value='Enviar'/>
</td>
</tr>
</table>
<input expr:value='data:feedPath' name='uri' type='hidden'/>
<input name='loc' type='hidden' value='es_ES'/>
<p class='recordar'> No olvides confirmar tu suscripción, haciendo clic en el enlace que recibirás por email. ¡Nunca recibirás SPAM garantizado!</p></form>
</div>
</div>
<span class='item-control blog-admin'>
<b:include name='quickedit'/>
</span>
</b:includable>
</b:widget>
- El texto lo he encerrado en una etiqueta
ppara poder manipular la presentación del mismo. - ¡ corresponde al signo de admiración de apertura: "¡".
#FollowByEmail1 .recordar{color:#fafafa;margin:1.5em auto 0;font-size:95%;padding:0 3px}...Y editas el color de texto según necesites y que en este caso es casi blanco (
#fafafa), por ejemplo si lo vas a poner obscuro casi negro puedes usar #020202.2.1 Agregar el texto que invita a los usuarios a suscribirse al blog del estilo 5 (opcional para el resto de diseños)
Si echas un vistazo el estilo 5 al que llamé Target, verás que aparece un texto debajo del título del gadget que invita a los usuarios a suscribirse al blog.Si decides ponerlo, tienes que ir a Editar HTML dirigirte al código del widget usando la lista deplegable que muestra los ids de los widgets que tienes agregados en tu blog y que dice: "Ir al Widget", eliges: "FollowByEmail1" y una vez que el editor te envíe al código del widget, agregas el siguiente código con el texto:
<p class='invitar'>
Recibe todas las novedades en tu correo electrónico. No recibirás SPAM.
</p>
Inmediatamente después de esta linea de código:
<div class='follow-by-email-inner'>Verificas en vista previa y si todo luce bien guardas el cambio. Por supuesto se puede editar el texto según tus necesidades.
Si quieres ponerlo en cualquier otro estilo que no sea el 5 llamado Target, agrega también esta regla de CSS, desde Añadir CSS (donde colocaste el CSS al principio en la parte 1):
p.invitar{margin:.7em auto 1em;font-size:100%;padding:0;}2.2 Personalizando el texto del botón
En el botón de este elemento, por defecto muestra el texto: Suscribe. Para cambiarlo, simplemente lo identificas en el código del propio widget y lo cambias. Éste aparece como valor del atributo llamado:value. Lo puedes apreciar resaltado de azul en el código del paso 2, donde explico cómo agregar el texto que invita a los usuarios a confirmar la suscripción.Puedes poner cualquier otro texto como por ejemplo: "Enviar", "Suscribirse", "Me apunto",o el que mejor te parezca. Solo ten cuidado de no quitar las comillas simples que encierran dicho texto.
Luego verificas en vista previa y si todo luce bien guardas el cambio.
2.3 Hacer que el botón de "enviar" aparezca debajo del campo donde se pone el correo electrónico. Estilos 5, 7 u 8.
Si observas el ejemplo 5 llamado Target, o el estilo 7 u 8, verás que el botón de enviar aparece debajo del campo donde se pone el correo electrónico. Para lograr ésto, hay que cambiar un poco la estructura del widget. No es nada complicado, simplemente eliminamos las etiquetas de la tabla que Blogger agregó, y que he resaltado de amarillo.<table width='100%'>
<tr>
<td>
<input class='follow-by-email-address' name='email' placeholder='Correo Electrónico...' type='text'/>
</td>
<td width='64px'>
<input class='follow-by-email-submit' type='submit' value='Enviar'/>
</td>
</tr>
</table>
Una vez eliminadas esas etiquetas en el código del widget, el botón aparecerá debajo del campo donde se teclea el correo electrónico.
3. Hacer que el widget aparezca también en la versión móvil de Blogger
Podemos hacer que este widget se muestre también en la versióm móvil de Blogger, y para ello, simplimente agregamos a la primera linea de código del widget un atributo llamado por Blogger:mobile con el valor yes tal y como se muestra a continuación:<b:widget id='FollowByEmail1' locked='false' mobile='yes' title='Suscríbete al blog. ¡es gratis!' type='FollowByEmail'>
Hay que tomar en cuenta que debes tener seleccionada la opción "Personalizado" en la plantilla móvil de Blogger.
También hay que agregar esta linea de CSS, yendo a Personalizar > Avanzado > Añadir CSS:
.mobile #FollowByEmail1{width:auto;margin:20px 1em}Lo anterior para garantizar que el widget se adapte adecuadamente y de forma automática al ancho del dispositivo en que será visualizado.
Espero sea útil ;)
que aparece en la sección de plantillas para móvil y que al poner el puntero encima dice: "Personalizar la plantilla para móviles" y elegimos la opción: "Personalizado" y guardas el cambio en Guardar.
que dice: Toggle device mode al poner el puntero del ratón encima y que aparece en la barrita superior a la izquierda. Una vez activado el icono se pondrá de color azul. 
