Instala este gadget molón para la suscripción


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.
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>
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). 
  • 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. 
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. escribir 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 el 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.

personalizar gadget suscripcion blogger
  1. Pinchamos en PLUBLICIZE
  2. Pinchamos en EMAIL SUBSCRIPTIONS
  3. Elegimos lenguaje: ESPAÑOL
  4. Elegimos widget 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ónYo he puesto ME SUSCRIBO, pero poned lo que vosotros queráis. Lo mismo, tened cuidado con no borrar las comillas. Solo el texto.

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.
Megapack
elige los 5 cursos que tú quieras
Curso
presentaciones
con power point
Pack
Pequeño gran emprendedor
Curso
diseña tu marca
personal
precio: 75€
precio: 17€
precio: 52€
precio: 35€
catálogo completo 
de cursos online
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

N E W S L E T T E R

Al suscribirte a esta cartica recibirás noticias exclusivas, descuentos, preventas y material exclusivo para gente VIP. 


Tus datos serán tratados de acuerdo a la política de privacidad, faltaría más. Yo, Maite, soy la que te enviará toda la información pero le pido ayuda a MadMimi. No serán cedidos a terceros, ni utilizados para otros fines que no sean los expuestos anteriormente. Si lo deseas, podrás darte de baja y no volveré a utilizar tus datos. Y, para ejercer cualquier derecho que tengas, escríbeme a hola@creativemindly.com



SI TE HA GUSTADO ¡COMPÁRTELO!
Share to Facebook Share to Twitter Email This Pin This Share on Google Plus

Otros posts intersantes: