21 marzo 2010

Formulario de Suscripción por correo electrónico equipado con enlace RSS feed

 
Desde hace mucho que queria hacer una publicacion sobre esto, por que todo Blogger que quiera tener mas visitas, y por supuesto ir ganando pocisionamiento mediante el numero de suscriptores, deberia tener un enlace a las Fuentes RSS, por eso es tan importante.

Ahora, sin perder mas el tiempo, permitame dar un paso adelante a explicar que debes hacer para añadir un hermoso formulario a la barra lateral del blog, así como el que se puede ver en la imagen, recuerda que nadie se niega a la personalización, así que te daré aquí algunas de las formas en la que podrías editar el CSS y HTML.

Antes de continuar, asegúrate de tener tu Feed quemado en FeedBurner.

Ahora, lo siguiente:

[1] Ir a Blogger > Diseño
[2] Haga clic en añadir un gadget
[3] Elija el tipo HTML/Javascript
[4] Dentro de este widget pega el siguiente código


<a href="http://feeds.feedburner.com/FrikiBloggeo" rel="alternate" title="Subscribe now to avail the unthinkable" type="application/rss+xml"><img border="0" alt="" style=" padding-bottom:20px; margin: 0pt 10px 10px 0pt; float: left; width:100px; height:100px;" src="http://3.bp.blogspot.com/_7wsQzULWIwo/Sty6EvZmTlI/AAAAAAAACGU/ArK94-9iDS0/s400/MBT-RSS-FEED.gif"/></a><p><a href="http://feeds.feedburner.com/FrikiBloggeo" rel="alternate" title="Suscribete a mi feed" type="application/rss+xml">Recibe nuevas noticias! </a><span style="color: 5C6AA4 #; font-weight: bold;">Introduce tu correo electronico para recibir nuevas entradas cada dia a tu e-mail:</span></p>
<style>
input.mbt1 {
color:#fff;
font: bold 10px Arial, sans-serif;
background:#F39100;
border:0;
padding:3px;
}
input.mbt1hov {
color:#fff;
font: bold 10px Arial, sans-serif;
border:2px solid #F39100;
padding:3px;
}
</style>
<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 5px; " target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FrikiBloggeo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style=" color:5C6AA4 #; background: #fff; border:1px solid 5C6AA4 #; width: 90px;" name="email" type="text"/><input value="Frikibloggeo" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input onmouseover="this.className='mbt1 mbt1hov'" onmouseout="this.className='mbt1'" value="Suscribeme" class="mbt1" type="submit"/></form><br/>


Ahora, te muestro que cambios realizar para personalizar el widget.

  • Remplazar FrikiBloggeo por el nombre de tu Feed, ejemplo:


http://feeds.feedburner.com/nombre-de-tu-feed


  • Si no te gusta la imagen y deseas cambiarla, solo sustituye la siguiente direccion por la URL de la que te guste

http://3.bp.blogspot.com/_7wsQzULWIwo/Sty6EvZmTlI/AAAAAAAACGU/ArK94-9iDS0/s400/MBT-RSS-FEED.gif


El código de color 5C6AA4 # se refiere al color de la letra y los bordes. Puede colocarle el color que quieras dependiendo de los colores de tema de tu blog.

Eso es todo, guárdalo y mira como quedo!.

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo