Instala este gadget molón para la suscripción

21 oct. 2014

PERSONALIZAR GADGET SUSCRIPCION BLOGGER

Muy buenas a todos. ¿Cómo ha ido el finde? Espero que hayáis descansado porque hoy toca trabajar. Hoy vamos a tratar de personalizar el botón de suscripción, tal y como lo tengo yo. Seguro que os dará un ataque al corazón cuando veáis tanto código. Pero no hay que asustarse, os lo he preparado al dedillo, para que tengáis que modificar lo menos posible.



Como veréis he resaltado las partes que podéis modificar, las más básicas, colores, tamaños y textos. La idea es crear un banner muy sencillo para colocarlo en la columna lateral de vuestro blog. Así que vamos a ir muy poquito a poco. 

Tal y como está el código conseguiréis una cajita de suscripción igualita que la mía. Pero yo os voy a explicar cómo conseguir que, los colores, sean acordes con vuestro blog. Prometo que ni se llora, ni duele, ni nada




1. el código


Lo único que tenéis que hacer es COPIARLO y PEGARLO en un documento de word para modificarlo. Venga va, hazlo, que yo te espero

<style>
#sidebar-subscribe-box{width:auto;border:0px solid #aaa;border-radius:0px;padding:0px 0}
/**Personalizar primera frase del banner**/
.sidebar-subscribe-box-wrapper{
background: repeat scroll 0 0 #ffffff ; /* Color fondo del banner */
color: #f46767; /* Color fuente texto arriba*/
font-size:11px; /* Tamaño de la tipografía texto de arriba */
line-height:0px;
padding:10px 0px 0px;
text-align:LEFT; /* Alineación texto de arriba */
text-transform:uppercase}

.sidebar-subscribe-box-form{
clear:both;display:block;margin:5px 0}
form.sidebar-subscribe-box-form{
clear:both;display:block;margin:10px 0 0;width:240px  /* Ancho de la columna del blog */}

/**Personalizar cajita del email**/
.sidebar-subscribe-box-email-field{
-moz-border-radius:0px;
-webkit-border-radius:0px;
background:#ffffff ; /* Color del fondo de la cajita del email */
border:1px solid #ccccccc; /* Ancho y color de la línea que rodea la cajita del email */
border-radius:0px;
color:#000000; /* Color del texto cuando se escribe dentro de la cajita del email */
margin:0 0 15px;
padding:10px 45px;
width:60%  /* Si al colocar el banner en la columna la cajita del email se sale reducid este número */}

/**Personalizar botón ME SUSCRIBO**/
 .sidebar-subscribe-box-email-button{
background:#000000; /* Color fondo del botón*/
border:0px solid #ffa7a7; /* Ancho y color de la línea que rodea el botón */
box-shadow:0 1px 0 rgba(0,0,0,0.3) inset, 0 1px 0 transparent;
color:#fff;/* Color de la tipografía del botón*/
cursor:pointer;
font-family:'arial'; /* Tipografía del botón*/
font-weight:700;
padding:10px;
text-shadow:0px 0px 0 rgba(0,0,0,.4);
text-transform:uppercase;width:100%}

.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{
background:#ffa7a7;  /* Color del botón al pasar el ratón por encima*/}

.sidebar-subscribe-box-email-button:active{
-moz-box-shadow:0 0px 0px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 0px 0px rgba(0,0,0,0.5) inset;outline:0}
iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}

embed{border-radius:0px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:0px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}

</style>

<br />
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
ESCRIBE LA FRASE DE ARRIBA<br />
<div class="sidebar-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=PEGA AQUÍ TU FEEDBURNER" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=PEGA AQUÍ EL CÓDIGO', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="bloggertrix" /><input name="loc" type="hidden" value="en_US" /><input autocomplete="off" class="sidebar-subscribe-box-email-field" name="email" placeholder="" /><br />
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="TEXTO BOTÓN" /></form>
</div></div></div>


2. La personalización 


Ya tenemos nuestro código pegado en un documento de word, así que ahora toca personalizarlo. Como veréis, al lado de cada código, yo os he puesto a qué corresponde. Así que solo tenéis que ir modificando las letras y los números.

    LOS COLORES


    Los colores tienen esta forma #ffaddk. Son códigos HEX de colores y modificarlos está tirado. Solo tenéis que ir a la página de http://html-color-codes.info/codigos-de-colores-hexadecimales/ y elegir el color que más os guste. 

    Podéis acudir a cualquier página de inspiración de colores, eso como vosotros veáis. Cuando ya tengáis el color elegido, solo tenéis que copiar y pegar este código en el lugar que vosotros queráis (se sobre entiende que debe ser en los lugares donde haya color... no pongáis ese código en cualquier sitio). En el código que os he dejado arriba los colores están subrayados en lila.

      LOS TAMAÑOS


      En color azul os he remarcado algunos de los tamaños que podéis modificar. Yo no modificaría nada más. Si tocáis más de lo debido, sin saber bien lo que hacéis, os va a salir un churrazo. Así que podéis tocar los números remarcados en azul clarito.

      Vamos a ver un ejemplo. Cogemos este código border:1px solid #ccccccc;
      Este código corresponde a un borde, por eso poner BORDER (habéis visto qué lista soy no). 
        1. Bueno, detrás pone 1PX esto nos indica el ancho que tiene esa línea. Al tratarse de una línea, yo no pondría nunca más de 3px.
      • El siguiente código es SOLID: esto nos indica cómo es la línea, en este caso es una línea recta. Si queremos, podemos modificar SOLID por DASHED (líneas discontínuas) DOUBLE o  DOTTED (puntitos). Pero para este banner yo lo dejaría tal cual.
      • El último código es el color del borde. Aquí, podéis acudir a la página que os he dejado arriba y cambiar el color. 

      3. el feedburner

      Bien, seguimos teniendo todo en nuestra hoja de word. Si estáis leyendo esto es que ya habéis modificado los colores y habéis elegido los que más os gusten. Solo nos queda la última parte, enlazar a nuestro Feedburner.

      Para ello entramos en la página de feedburner, lo ponéis en google y llegáis en un momento y seguimos los siguientes pasos. Ahora vamos a modificar las partes que están en verde.


      1. ESCRIBIMOS LA FRASE DE ARRIBA 


      Cambiamos el texto ESCRIBE LA FRASE DE ARRIBA por lo que vosotros queráis. Por ejemplo: escribe tu email aquí.

      2. INSTALAMOS NUESTRO FEEDBURNER


      Esta es la parte más "complicada" pero si seguís los pasos no os vais a perder ni un momento. Lo primero que tenemos que hacer es entrar en Feedburner con nuestra cuenta del blog.

      1. Pinchamos en PLUBLICIZE
      2. Pinchamos en EMAIL SUBSCRIPTIONS
      3. Elegimos lenguaje: ESPAÑOL
      4. Elegimos widget BLOGGER
      personalizar gadget suscripcion blogger

      Una vez hecho lo anterior solo tendremos que copiar el código que aparece detrás de URI=. Ese código lo tendremos que pegar justo encima de donde yo os he puesto PEGA TU FEEDBURNER y PEGA AQUÍ EL CÓDIGO. Ojo con borrar las comillas eh, solo el texto. Borráis el texto resaltado en verde y pegáis ese código. 


      personalizar gadget suscripcion blogger

      3. EL TEXTO DEL BOTÓN


      Solo queda escribir el téxto que queréis que aparezca en el botón. Yo he puesto ME SUSCRIBO, pero poned lo que vosotros queráis. Lo mismo, tened cuidado con no borrar las comillas. Solo el texto.


      4. la instalación

      Y ya tenemos el código preparado. Ahora solo tenemos que entrar en BLOGGER. Copiamos nuestro código de word y lo pegamos en el gadget. Guardamos y listo. Ya tenemos nuestro banner personalizado.

      Cuesta mucho más explicarlo que hacerlo. De verdad, lo prometo, es muy muy fácil. Las modificaciones que tenéis que hacer son mínimas. Incluso podéis dejar el banner tal cual lo tengo yo y solo enlazarlo con vuestro Feedburner. Así de fácil os lo pongo.


      Y esto es todo por hoy. Soy consciente de que seguro que tendréis dudas. He intentado explicarme lo mejor posible pero trataré de responderos. Antes de poner el grito en el cielo y desesperaros, por favor, probad a seguir los pasos. Si lo hacéis no vais a tener ningún problema, palabrita.

      Pues muchísimas gracias majos! Espero que os interese este tutorial y nos vemos el jueves con una colaboración, que ya es hora de ver DIY por aquí.

      Un besazo majos


      MAY
      Share to Facebook Share to Twitter Email This Pin This Share on Google Plus

      39 comentarios:

      1. Estupendo!!! Gracias por este super post. DTB

        ResponderEliminar
      2. Muchísimas gracias por este tutorial, te ha quedado increíble. Tienes razón es bastante fácil, ten por seguro que lo usare.

        ¡Saludos!

        ResponderEliminar
      3. Genial :) Llevaba tiempo buscando como hacerlo. No conocía el feedburner.
        Ya lo he puesto en práctica!
        Podrías hacer una extensión de este post explicando como modificar el botón de búsqueda?

        ResponderEliminar
        Respuestas
        1. Irene! Preparé un tutorial hace tiempo sobre esto. Te dejo el enlace http://creativemindly.blogspot.com.es/2013/02/buscadores-personalizados-para-blogger.html

          Eliminar
      4. ¡Mil gracias a ti May! precisamente yo también buscaba cómo hacerlo y ¡mira! un abrazo

        ResponderEliminar
      5. ¡Muchísimas gracias May! Soy de tus lectoras fantasmas pero jajaja ya no más, te lo prometo. Y justamente ayer me saqué los sesos buscando algún tutorial parecido a este y me lees la mente. De verdad que gracias!
        Un beso :)

        ResponderEliminar
        Respuestas
        1. Hay muchas lectoras fantasma! No te preocupes. A ver qué tal te queda???
          Beso

          Eliminar
      6. Que geniaal! Sin dudas lo modificaré para que quede acorde a mi blog y lo voy a usar! gracias May por hacernosla facil! :)
        Podrías hacer un tutorial de como poner un menu desplegable? Encontre por todos lados,pero creo que te entendería mejor a vos! Gracias desde ya y un beso May :)

        ResponderEliminar
      7. y saber que el sábado di batalla para tratar de que el mío se viera algo decente... Mil gracias luego lo aplico!!!

        ResponderEliminar
      8. Ole! que currada. Muchas gracias!! Yo aún no lo pondré porqué acabo de empezar con el blog y creo que ésto es mejor para más adelante, pero guardaré éste post en buen recaudo para poder hacerlo más adelante.

        ResponderEliminar
      9. Me parece muy práctico y muy bien explicado, espero ponerlo en práctica.
        Gracias por compartir tanto conocimiento.
        Un beso,
        The Muffin Mum

        ResponderEliminar
      10. Menudo curro!!! Mil gracias por tu tiempo!

        ResponderEliminar
      11. Ohhhhh yo uso Mailchimp para las newsletter y el envio de post automatico. Una pena porque este tutorial es lo mas!

        ResponderEliminar
      12. ¡Mil gracias! Está perfecto, yo ya lo he colocado en mi blog. Sólo un par de cosas: tienes puesto como idioma inglés de Estados Unidos en el ejemplo para la parte del Feed Burner (habría que poner esES). Y además, mi entrada de texto sale con un margen interno muy grande y corta la dirección de correo, pero ahora mismo no tengo tiempo de investigar :) Aquí podéis ver cómo me ha quedado: http://www.elgallobermejo.blogspot.com.es

        ¡Gracias de nuevo!

        ResponderEliminar
        Respuestas
        1. Hola!!! Pues puede ser...Ahora lo miraré
          Respecto al margen, en la parte de padding reduces un poquito los PX y listo
          Besoo

          Eliminar
      13. Este comentario ha sido eliminado por el autor.

        ResponderEliminar
      14. Hola May! soy nueva suscriptora, lo primero quería darte la enhorabuena por tu blog, me encanta y me facilitas mucho decorar mi blog (:. Sigue así!!!
        Tengo una pequeña duda...que igual no corresponde a este apartado. Pero resulta que cuando ya pongo el botón que explicas en este apartado, no me llegan las subscripciones, estuve investigando por FeedBurner pero nada.
        Gracias!!!

        ResponderEliminar
      15. ¡Hola May! Me encanta el post pero me siento DEMASIADO TORPE. Tengo un problemilla y es que yo uso Wordpress y no sé si este código no lo lee por eso o porque lo que copio de Feddburner está mal. ¡Ayuda por favor!

        Gracias por tu tiempo, eres genial :)

        ResponderEliminar
      16. Qué bonito May!!!! me encanta este post...
        Pero te consulto... a mí me gustaría tener algo como lo que tienes al pie de tu firma, en cada post, invitando a suscribirse... ¿Cómo se hace eso? Ojalá lo cuentes en un próximo post.
        Cariños,

        Flavia

        ResponderEliminar
      17. ¡Hola! Una pregunta, ¿con este formulario de suscripción, al suscriptor le llega la entrada al correo? Me explico, nuestro blog es una blog-novela y tenemos instalado un código para evitar el CTRL+C. Hace muuucho tiempo instalé el formulario de suscripción por correo que ofrece Blogger, pero descubrí que cada vez que publicábamos un capítulo le llegaba de manera integra al suscriptor, por lo que perfectamente se podía hacer una copia del capítulo (facilitando el plagio de nuestras historias). Me encantaría poder instalar un formulario de suscripción que simplemente avise al suscriptor de que hay una nueva entrada y no de que mande la propia entrada al correo... ¿El que has compartido en esta entrada cómo funciona exactamente? ¡Espero haberme explicado bien!
        ¡Gracias por adelantado! ¡UN BESAZO! :D

        ResponderEliminar
      18. muchas gracias por el tutorial es fantástico llevaba intentandolo semanas!!! ya me he suscrito a tu blog para no perderme nada !

        ResponderEliminar
      19. Gracias guapa!! todos tus tutoriales son súper útiles y me encantan!!!!!!!

        ResponderEliminar
      20. Hola May, tengo un problema, lo he probado y me parece todo el código sin más. El texto que has puesto marcado en negrita explicando lo que es cada cosa, ¿lo tenemos que borrar? ¿puede ser que por ese motivo me de el error? Lo que pides de feedburner a pesar de que lo llamas de manera diferente (entra tu feedburner y entra tu código) entiendo que hay que poner en los dos lo mismo ¿es así?
        Mil gracias


        Mamás Disfrutonas y más

        ResponderEliminar
      21. Juro que he intentado poner este cuadro en mi blog y no he podido, no se si es al momento de poner el codigo FEEDBURNER o que.. :(

        ResponderEliminar
      22. ¡Gracias por el tuto! Me ah quedado muy guay :*

        ResponderEliminar
      23. Hola por el tutorial como siempre me ha encantado pero quisiera saber , como centrar la cajita del email y el botón de me suscribo .. gracias .. Besos

        ResponderEliminar
      24. ¡Hola, May! He diseñado mi propia imagen para el banner y me pregunto si tú podrías explicarme para saber cómo personalizar o incluir esa parte del código, pues no encuentro esa información por más que he navegado por varios blogs que hablan sobre el tema de suscripción la newsletter, etc... Un saludo y buen fin de semana.

        ResponderEliminar
      25. te acabo de descubrir y ya me encantas, me quedo por aqui para no perderme nada!! he puesto el gadget y funciona a la perfeccion y te has explicado genial! un millon de gracias guapa!!
        ya por rizar el rizo... como puedo poner texto dentro de la cajita donde va el e-mail? se puede?
        un besazo

        ResponderEliminar
      26. Hola, muy buenas noches, logre instalar este maravilloso gadget en mi blog, lo modifique siguiendo las instrucciones y coloque el feed siguiendo las instrucciones. Pero después de colocar el feed me sale algo que me daña las estética de la caja, justo debajo de la Frase de Arriba, aparece una barra con letras del mismo color de la fuente de la letra. Esto no salia antes de instalar el Feed.
        Por favor entra en mi blog para que lo veas ya que por aquí no se puede o no se agregar la imagen del blog: www.ganaconwally.blogspot.com míralo y me cuentas por que la verdad quiero usar ese gadget.
        Gracias

        ResponderEliminar
      27. Este comentario ha sido eliminado por el autor.

        ResponderEliminar
      28. Hola, me gusta mucho tu blog y este post me ayudo bastante
        Tengo una petición, seria posible que explicaras como personalizar la suscripción, me refiero a que el email que se le envía al suscrito sea mas bonito y en español
        Te agradezco

        ResponderEliminar
      29. Muchas gracias por este tutorial tan completo.

        ResponderEliminar
      30. Acabo de probar de instalar este tutorial, aparentemente está todo bien, pero cuando prueba de suscribirme da el siguiente error:The feed does not have subscriptions by email enabled
        Qué puedo hacer?

        ResponderEliminar
        Respuestas
        1. Hola!
          Eso puede querer decir que no tienes dado da alta tu feed
          Así que probablemente el problema esté en feed burned, no en el tutorial!
          Beso

          Eliminar
      31. Gracias!! como soy tonto me costo un poco ...ya que me aparecia descentrado....luego de leer como 4 veces el post...me percate eso que pones:
        clear:both;display:block;margin:10px 0 0;width:240px /* Ancho de la columna del blog */}
        Y pues me tome la libertad por cambiarlo asi:
        clear:both;display:block;margin:10px 0 0;width:auto

        :) y asi pues me funciono...Muchas Gracias!!!!
        Nota: no hagas caso a mi nickname ...aun no figuro como cambiarlo >.>

        ResponderEliminar

      Muchas gracias por escribirme!! Si quieres puedes hacer alguna petición, recomendación... ¡¡Me encanta leeros!!