Al empezar a hacer uso del elemento "seguir por correo electrónico", se abre automáticamente una cuenta en feedburner.com, así que que puedes obtener todos los beneficios del servicio, y ofrecer suscripciones de distintas vías para que sigan tu contenido, como suscripción por correo electrónico, y a través de distintos agregadores web como Mi Yahoo, Google Reader, etc.
Hoy te diré cómo agregar el elemento seguir por correo electrónico, tal y como lo uso en mi blog, para que tus usuarios se puedan suscribir a tu blog fácilmente. El estilo que use, aparenta ser una hoja doblada de la esquina, no usa ninguna imagen, y es un estilo que originalmente vi en GemaBlog. La esquina doblada sólo se verá en +IE8 (IE8 y versiones más nuevas) y el resto de navegadores modernos.
¿Te gusta la idea?, entonces veamos cómo hacerlo...
Cómo agregar la cajita para ofrecer suscripción paso a paso
Paso 1: Agregar el CSS.
Usando la nueva interfaz, ve a Plantilla > Personalizar > Avanzado > Añadir CSS, y en el campo agrega el siguiente código CSS, y guardas los cambios en Aplicar al Blog:
.seguir-pfooter{display:block; width:560px; padding:12px 9px 7px; margin:18px auto 8px; overflow:hidden; background-color:#e0eff3; color:#142138; position:relative; top:0; left:0}
.seguir-pfooter:before{
content:""; position:absolute;right:0;top:0; border-width:0 16px 16px 0;border-style:solid;border-color:#FFF #FFF #aad4e0 #aad4e0;width:0;display:block;}
.seguir-pfooter h5{margin:0; padding:5px 0 0 6px; font-size:15px; font-weight:bold}
.seguir-pfooter p{line-height:120%; margin:7px 5px; padding:0; font-size:13px}
input.campo{width:200px; height:24px; float:left; border-style:solid; border-width:1px; border-color:#777 #ccc #ccc #777; font-size:12px; padding:0 4px 0; margin:0 5px 0 0; line-height:200%}
input.enviar{background-color:#fdca2f; border-style:solid; border-width:1px; border-color:#feffff #ccc #ccc #feffff; float:left; width:74px; height:26px; margin:0; padding:0 4px 1px 4px; font-size:12px; text-align:center; color:#161102; cursor:pointer}
input.enviar:hover{border-style:solid; border-width:1px; border-color:#ccc #feffff #feffff #ccc}
Notas o explicación del CSS:
Resalté de rojo los valores que considero que vas a querer cambiar, y que puedes observar abajo en el gráfico. En:
.seguir-pfooter, creamos nuestra cajita contenedora, y que en este caso es "azul". Puedes cambiar:
- El ancho en: widht:560px;
- El margen o separación en: margin:18px auto 8px;. Se lee 18px arriba, auto derecha e izquierda, 8px abajo.
- El color de fondo en: background-color:#e0eff3;
En:
.seguir-pfooter:before, se forma el triangulito usando bordes, que se superponen a la cajita contenedora, y crea la apariencia de esquina doblada, ahí puedes cambiar:
- El color del fondo del borde, que crea la esquinita en: border-color:#FFF #FFF #aad4e0 #aad4e0; los dos primeros valores (#FFF, #FFF) deben ser iguales entre sí, y el mismo color del fondo de tus posts. El tercer y cuarto valor (#aad4e0, #aad4e0) deben ser iguales entre sí, y el color más obscuro que el de la caja contenedora, aquí se simulará la esquina doblada.
En:
input.campo, que es el código para el campo del texto (donde escriben el email), puedes cambiar:
- El color del borde en: border-color:#777 #ccc #ccc #777; (los valores se leen: arriba, derecha, abajo, izquierda).
En:
input.enviar, que es el código para el botón, puedes cambiar:
- El color de fondo del botón en: background-color:#fdca2f;
- El color del borde en: El color del borde en: border-color:#feffff #ccc #ccc #feffff; (los valores se leen: arriba, derecha, abajo, izquierda).
En:
input.enviar:hover, puedes cambiar:
- El color del borde al poner el puntero del ratón sobre el botón en: border-color:#ccc #feffff #feffff #ccc (los valores se leen: arriba, derecha, abajo, izquierda).
Paso 2. Editar el código de la cajita.
Necesitarás editar algunas partes del siguiente código para que funcione en tu blog. Para ello, lo copias, y pones en una nota de tu computadora (Notepad). Lo que vas a editar, es lo que he resaltado de rojo, para que puedas identificarlo fácilmente:
<b:if cond='data:blog.pageType == "item"'>
<div class='seguir-pfooter'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=compartidisimo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><h5>No olvides suscribirte, para recibir todas mis actualizaciones, directamente a tu email.</h5><p>Ingresa tu correo electrónico:</p><p><input class='campo' name='email' type='text'/></p><input name='uri' type='hidden' value='compartidisimo'/><input name='loc' type='hidden' value='es_ES'/><input class='enviar' type='submit' value='Subscribe'/></form>
<div style='clear:both;'/>
<p>Recuerda confirmar tu suscripción, haciendo click en el enlace que recibirás por email.</p></div>
</b:if>
En donde dice:
compartidisimo, pones en nombre de tu URI de Feedburner. Puedes conseguirla de varias formas, una es ir a la página de Feedburner, y luego haces click en el icono de RSS que está a un lado del nombre de tu blog, luego se abrirá una ventana con tus feeds. El nombre de la URI es el texto que aparece después de la barrita diagonal "/", en la barra de direcciones de tu navegador.
Así aparece el mío:
http://feeds.feedburner.com/compartidisimo
Por eso es "compartidisimo". Todo lo demás y que también está resaltado de rojo, son los textos y puedes editarlos si deseas.
Paso 3. Añadir el código a la edición de HTML de la plantilla, para que aparezca el elemento.
Ya que editaste el código, ve a la edición de HTML de la plantilla, y con la ayuda de ctrl + F , buscas la primera linea que resalté de rojo en el siguiente código, al expandir plantillas de artilugios:
<div class='post-footer-line post-footer-line-3'><span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>
</div>
E inmediatamente después del div de cierre "</div>" pegas el código del paso 2, que ya editaste.
Paso 4: Guardar los cambios.
Verifica en vista previa y si todo luce bien, guarda los cambios. Aunque no verás la cajita, te asegurarás de que todo luzca bien en tu plantilla.
Últimas notas:
Hack: Si deseas evitar que se vea el borde negro alrededor del botón en IE7 (Internet Explorer 7), usa esta linea de código:
input[type="button"],input[type="submit"],input[type="reset"]{filter:chroma(color=#000000); color#090000}
...y lo agregas después de las regla de estilo de input.enviar.
Lecturas recomendadas
Cómo cambiar la configuración del feed del sitio
No hay comentarios:
Publicar un comentario