SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.
CONSEGUIR LO QUE QUIERES

NUNCA FUÉ TAN FÁCIL

Si quieres conseguir ciertos cambios en tu blog, renovar el diseño, arreglar algún problema, instalar alguna plantilla que te crea problemas...¡Puedo ayudarte! Envíame un e-mail a [email protected] y hablemos.

Suscríbete

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


31 jul. 2016

Tutorial Blogger: Como poner boton de Pay With a Tweet

añade boton de pay with a tweet

Ahora sí. Penúltima clase extra del curso y hoy nos toca una herramienta para usar cuando queremos compartir algún recurso descargable (por ejemplo).

Lo tengo visto en muchos blogs y no es algo que me encante de forma exagerada, porque soy consciente de que interrumpe el proceso de descarga de algo que supuestamente es gratuito. Al final no es gratis, porque estamos pagando con un tweet o compartiendo en alguna otra red social, y eso tiene un valor

Por muchas razones nos cuesta compartir las entradas de nuestros blogs más recurridos, o no tanto, sea por vagancia, por que realmente la temática no es acorde con nuestro contenido habitual en redes, o por lo que sea, nos cuesta compartir un post y lo que compartimos es por que realmente queremos compartirlo. 

Entonces cuando se trata de un interés propio concreto (como puede ser descargarse un recurso que nos gusta o interesa) el incentivo es mayor, pero en mi caso, que lo he probado, los resultados no han sido muy optimistas. Puede que no lo haya probado con un recurso que sirva para todo el mundo, porque lo he colocado en Crea y diseña tu propio botón Up para subir haciendo scroll compartiendo unos diseños del botón pero obviamente como somos "culos inquietos"que buscamos la mayor personalización, supongo que la mayoría de ustedes habéis decidido diseñar el botón por vosotres mismes. (¿porqué uso la e?)

Al final es una barrera para conseguir algo, pero en ocasiones, si el trabajo que estamos compartiendo es de un valor mayor, o con un contenido más amplio, seguramente nos interese usarlo.

Uno de los problemas con los que nos encontramos es que no podemos personalizar el botón. No hay manera, ya que esa es una opción PRO, osea de pago. He contactado con Pay With a Tweet para conocer sus precios al respecto y me han comentado que el coste de la versión PRO es de $49,99 al mes. 

Es la única opción que tienen porque incorporan muchas más mejoras con mucho valor para empresas. Obvio que a mi no me interesa, es una cantidad enorme de dinero mensual que no voy a amortizar para nada, por lo menos de momento, así que no puedo hablaros sobre la opción PRO. 

No obstante el plan gratuíto ofrece de por sí muchas ventajas, tendrás que crear un contenido muy interesante, y/o de muy buena calidad, sí, pero con esta herramienta podrías obtener las siguientes ventajas ;)

 Ventajas de usar Pay With a Tweet, un botón de compartir antes de descargar algún recurso:


  • Tu post puede llegar a viralizarse (ser compartido por muchas personas en poco tiempo)
  • Tus visitas aumentarán 
  • Tus lectores valorarán más tu trabajo y esfuerzo entendiendo que necesitas de su colaboración para seguir creando contenido similar, de calidad, útil y/o interesante.



Tanteado ya el tema, para que sepas si te interesa o no te interesa, vamos a empezar con el tutorial para que puedas usarlo en tu blog de forma fácil.

  Vamos a Paywithatweet.com 

  Le damos a Crear Campaña

  Empezamos a rellenar datos:

Esto es muy sencillo porque te lo explican genial.

  Pones el nombre del descargable, luego

  eliges las redes sociales que tendrán como opción para compartir, a continuación

  el mensaje que quieras que aparezca en la publicación al compartir, después

  el enlace que quieres que aparezca en esa publicación(te dan opción a reducir el enlace, algo que recomiendo) y por último

  el enlace donde se descargarán el descargable

Hasta aquí fácil ¿verdad? Pues para seguir no tenemos que hacer nada más. No podemos elegir opciones avanzadas porque no tenemos la versión de pago.

  Le damos a Siguiente

  Después nos aparece la vista previa y debajo una confirmación de que lo que compartes es de creación propia que debes clickar

  Dice esto

Corfirmo estar en posesión de todos los derechos sobre el contenido que distribuyo a través de Pay with a Tweet.

  Le damos a Crear Campaña 

Luego te da opción a elegir entre el enlace para ir a la página donde se muestran las posibilidades de compartir y adquirir el descargable o bien copiar el código del botón para llevar a cabo el mismo proceso. Esto es por si quieres personalizar el botón, que elegirías la primera opción y enlazarías tu botón al enlace que te proporcionan, o bien colocar el botón que ya te facilitan.

  Eliges la opción que quieras e insertas el código en tu entrada, en modo HTML donde quieras.

Esto es todo, te dejo un vídeo para que te resulte mucho más fácil.


Si te suscribes recibes una Check - List para que tus posts siempre queden bien preparados para lanzarse al estrellato ;) Además de las entradas del blog en tu correo. Bueno, vale, y también te puedes enterar de alguna que otra cosilla, ... ¡cosas de suscriptores! ;) 

   

2 comentarios

25 jul. 2016

Tutorial Blogger: Poner ventana POP-UP de suscripción + Truco

Poner-ventana-pop-up-de-suscripcion-blogger

Penúltimo tutorial de la temporada, extra de este curso gratis Crea y Diseña un blog paso a paso desde cero, en el que, atendiendo a vuestras sugerencias, he creado 7 tutoriales más, con sus respectivos vídeos para poder mejorar tu blog.

En esta ocasión vamos a añadir una ventana de suscripción pop-up o ventana emergente, que le saldrá a vuestros/as lectores/as cuando queráis; nada más entrar en vuestro blog, al cabo de un rato o cuando la persona se dirija a la parte superior del blog (o lo que es lo mismo, cuando vaya a marchar de tu blog)

Pros y contras de usar un Pop-Up para la caja de suscripción

Personalmente no es un recurso que me guste mucho y por eso no lo usaba  , y es que me parece puro intrusismo, hasta a veces da la impresión de que asusta al lector o a la lectora.

Sin embargo debemos ponernos en el lugar de que nuestro pop-up de suscripción resulte un gran beneficio para nuestro/a visitante, de manera que no resulte tan agresivo si no un recordatorio, o incluso un regalo.

Es obvio que para suscribirse alguien a tu blog tiene que conocer los beneficios que eso le aporta, eso ya lo sabemos, ¿Lo sabemos? Bueno, pues si no lo sabemos lo recordamos hoy.

Puedes aportar un montón de cosas, desde pequeños imprimibles a cursos gratuítos, en PDF, o lo que se llama E-BOOK. Para que te metas en sintonía con este mundo, te diré que se les llama Infoproductos, porque los estás regalando pero bien podrías venderlos. No los vendes porque son la manera en la que puedes captar suscriptores/as.

En mi caso estar suscrito/a al blog conlleva varios tipos de beneficios, como por ejemplo, recibir la Check-List para una entrada perfecta, o también recibir el curso en tu e-mail. Cada vez que publico un post se va directamente a tu e-mail. En este sector es un beneficio, para no perderte nada, que siempre andamos con mil cosas en la cabeza y luego se nos pasa.

Con lo cual este método puede servir para ser directa/o con nuestro/a visitante y exponer todo lo que les ofrecemos de manera resumida.

Así para resumir, es un método que no le suele gustar a nadie, pero funciona. He aquí una contradicción humana más que añadir a la lista ;)

En fin, me estoy parando con esto, que es tema para otro post, o varios, pero es que es importante tener todos los detalles presentes a la hora de tomar decisiones como la de insertar un pop-up en nuestro blog. 



Tienes que dejar claro que estás aportando contenido de valor.


comenzamos con el tutorial


Cómo instalar una ventana Pop-Up en nuestro blog, con caja de suscripción


En este tutorial no os voy a dar la lata con cada opción que Sumome.com nos ofrece, y voy muy al grano porque creo que perder el tiempo no debe estar nunca dentro de nuestros planes. Así que os enseño a ingresar en Sumome para disfrutar de sus servicios gratuítos y os ofrezco un super truco especial para que las limitaciones, en versión gratuíta, no os afecten de manera negativa, a la hora de instalar vuestro pop-up de suscripción.

No obstante debo advertirte que con esta opción no podrás disfrutar de las estadísticas de Sumome ya que no estamos usando su formulario de suscripción. En mi caso no me importa, ya que creo que es mucho más relevante el hecho de tener un formulario de suscripción visualmente atractivo. De todas formas siempre podré saber cuántas suscripciones he adquirido dirigiéndome a mi FeedBurner o proveedor de E-mail Marketing (en mi caso Mailrelay)

Esto no puede ser más fácil, ya que ya tenemos clara la parte de personalización de nuestra caja de suscripción, que vimos hace poquito, y simplemente os voy a enseñar a añadir una imagen a esa caja de suscripción en la que podamos escribir y mostrar lo que queramos para crear una pop-up realmente atractiva y conseguir así muchas suscripciones a nuestro blog.

Voy a usar como base uno de los códigos de caja de suscripción que hemos usado en el post de personalización de formulario de suscripción y vamos a añadirle una imagen chula.

Para el caso he creado esta imagen de prueba, como si tuviesemos un PDF, o E-Book que sirviera como imán de suscripciones, lo que atrae a tu público a suscribirse.

Pero podría diseñar la imagen que quisieras (a través de picmonkey.com te resultará super fácil, con todos sus recursos y posibilidades)

He creado una imagen como si fuera el regalo de un E-Book y lo he hecho en su totalidad con PicMonkey y en 10 minutos.

imagen-para-pop-up-en-sumome


Una vez que tengamos nuestra imagen vamos a guardarla en una de neustras entradas que nunca se publicará para poder conseguir la URL de imagen (si no saber cómo conseguirla mira este vídeo)

Cuando tengamos la dirección de imagen la copiamos en nuestro bloc de notas y también vamos a pegar la caja de suscripción personalizada para el caso que nos ocupa.

El código en el que irá envuelto el enlace de la imagen es el siguiente:

<a><img border="0" src="URL DE IMAGEN" /></a>
Copiamos el código y sustituímos lo que está en naranja por el código que hemos copiado de nuestra imagen.

Para lograr el código completo simplemente añadimos ese código antes del código de nuestra caja de suscripción y listo!!

Quedaría algo así:

<a><img border="0" src="URL DE IMAGEN" /></a><form style="padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('NOMBRE DE TU FEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><input type="text" style="width:50%; height: 40px; margin: 0 5px; padding: 5px; font-size: 16px;" name="email" placeholder="Cuál es tu e-mail?" /><input type="hidden" value="NOMBRE DE TU FEEDBURNER" name="uri"/><input type="hidden" name="loc" value="es_ES"/><input style="background-color:#00A9FF; font-size: 16px; width: 40%; height: 40px; margin: 0 5px; padding: 5px; color: #FFF; cursor: pointer; border: 0px solid #eee;" type="submit" value="Suscríbete" /></form>
Que quedaría, con la imagen que he elegido yo,  así:

ejemplo-pop-up-suscripcion-personalizado


Ya tenemos nuestro código para el Pop-Up personalizado con Sumome, todo lo que necesitamos. ¡¡Vamos allá!! :D


Vídeo - Tutorial para añadir a tu blog Pop-Up de suscripción con Sumome


¿Qué te ha parecido? Seguro que ya has visto mi pop-up de suscripción, al final he caído en la tentación ;) y si no es así la verás. Tengo el mismo formato que ves al final de algunos de mis tutoriales  , como en este. 

Cuando lo hayas probado cuéntame si has notado resultados. En mi caso sin haber añadido imagen ni nada, hace un tiempo, no tuve un resultado notable, pero estos días en los que he hecho el tutorial y he añadido el pop-up la verdad que sí que he tenido resultados. Bueno, ya veré si lo mantengo ;)

Ya me contarás si te gusta encontrarte con estas ventanas, o si quizás vayas a usarlo en tu blog... Si tienes cualquier duda ya sabes que no me gusta que cargues con ella, deja tu duda aquí en los comentarios o ponte en contacto conmigo y la resolvemos :)


   


15 comentarios

22 jul. 2016

Tutorial Blogger: Poner Gadget de Instagram en el blog

Poner-instagram-en-blog-tutorial

Un post muy esperado, el de añadir nuestro Instagram en el blog, y la verdad que me gusta mucho esta opción porque todo lo que sea visual, enamora! De eso se trata todo, de encandilar, de enamorar con nuestro contenido a los lectores y las lectoras, y esta es una muy buena forma de hacerlo; con nuestro Instagram.

Para poder añadir nuestro Instagram tenemos gran variedad de opciones, pero muchas de ellas nos obligan a tener incluída una crispante publicidad que afea totalmente el widget en nuestro blog y hace que parezca menos propio y más "charramangueiro" como se dice por aquí. Lo que viene siendo una chapuza. 

Si añadimos varios widgets, y cada uno de estos, tiene su link , su texto publicitario y demás, no solo queda visualmente feo si no que además estamos añadiendo muchos enlaces a nuestro blog que no nos interesa tener. Esto último es así por el tema SEO que tanto nos preocupa y nos trae de cabeza. Pero no te preocupes, no debes preocuparte demasiado, simplemente que tenemos que evitar que nuestro blog tenga este tipo de enlaces que no tienen ninguna relación con nuestro blog.

Otro punto a tener en cuenta a la hora de añadir un widget de Instagram en nuestro blog es que tengamos fotos realmente interesantes para nuestro/a lector/a o que aporten beneficio o calidad visual. Esto quiere decir que , tenemos que tener unas imágenes chulas, bonicas, o bien que aporten valor o información relevante para nuestros/as visitantes.

Es como todo, en nuestro blog tiene que existir cierta armonía, ya sea en colores, imágenes...etc. Y coherencia en el contenido, por encima de todo.

Una vez expuesta esta pequeña introducción pasamos al tutorial.



COMENZAMOS el tutorial 

Instagram en tu blog con SnapWidget


1- Vamos a su página SnapWidget.com

2- Le damos a Get Started Today

3- Nos inscribimos con nuestro Nombre, e-mail y contraseña.

4- Una vez que entramos con nuestra cuenta, aparecemos en nuestro panel de control o Dashboard y le damos a Create a new Widget

5- Nos aparecen un montón de opciones diferentes para añadir nuestro Instagram ( y también nuestro Twitter ;) Pero debemos fijarnos y elegir los que tienen como etiqueta FREE porque el resto son PRO y significa que solo los puedes usar si estás suscrito/a a la versión de pago.

tutorial-snapwidget-pro-free


Yo he elegido la primera opción que aparece.

snapwidget-ejemplo

6- Una vez que le hemos dado cubrimos en primer lugar el nombre de nuestra cuenta de Instagram, la verificamos y cubrimos el resto de datos a nuestro gusto.

Os dejo un ejemplo de cada estilo por si lo queréis añadir en distintas partes de vuestro blog:

 - >  Opciones para añadir Widget de Instagram en el Footer, o pie del blog:


7- Le damos a Get Widget y nos aparece el código que tenemos que copiar. Lo copiamos y lo pegamos en el Footer de nuestro blog.

Quedaría así:
vista-previa-widget-instagram-en-blog

   EXTRA:   Como véis no llena el ancho completo del blog, porque para eso habría que modificar un detalle en la el código que nos facilitan. Este código no es responsive, y solo se verá en la vista normal de PC de tu blog. Pero si lo quieres usar aquí te dejo lo que en mi blog de pruebas he añadido para que aparezca al ancho total.

margin-left:-365px; min-width:1583px;

Esto es lo que he añadido, pero si no has seguido el curso desde el principio puede que no te sirva el margin-left , de hecho es muy probable que lo tengas que modificar para que te quede centrado, vas modificando la cantidad hasta que no aparezca la barra de scroll del navegador, y hasta que quede centrado. Además el min-width es el ancho del blog. Modifícalo por el ancho del tuyo, antes de nada.

Pero todo es complicarse, y de todas formas, el widget queda muy chulo igual sin ser tan ancho como el blog, ¿No crees? Queda como más minimalista.

  - >   Si lo que quieres es añadirlo en tu Sidebar, solo tendrás que modificar las opciones que te pide, en el vídeo te explico todo. Luego pegar el código añadiendo un widget HTML/Javascript en tu blog , en Diseño y listo.

Es muy sencillo e intuitivo pero por si las moscas te dejo un vídeo. :)





  

Instagram en tu blog con LightWidget

Esta es otra plataforma que te aporta el código que necesitas. Este tiene más opciones de efectos sobre las imágenes, como por ejemplo que puede aparecer el texto de cada imagen, en visión normal o al pasar el ratón por encima. Entre otros efectos como rotar la imagen cuando se pasa el ratón por encima. Lo hace más interactivo, pero no hay mayor diferencia.

1- Vamos a su página LightWidget.com

2- Nos logueamos con Instagram, dándole a Log in


3- Después cubrimos los datos. OJO porque te da opción a usar un hashtag pero no funciona, por lo menos en mi caso, así que lo ignoramos.

Te ofrece 3 posibilidades de formato, pudiendo elegir entre un collage (Grid) con las columnas y filas que elijas, una estética como la de Pinterest (Columns) con el texto de cada imagen (no te lo recomiendo si  tus textos son largos) y por último, un slider (Slideshow), o lo que es lo mismo, una imagen que va cambiando a las siguientes.

4- Elije todas las opciones que quieras, y si quieres ver como queda algún efecto, le vas dando a preview y vas probando en el ejemplo que aparece a tu izquierda.

5- Luego le damos a Get Code y nos aparece debajo el código.

6- Lo copiamos y lo pegamos donde queramos.


Otra vez os dejo un vídeo para usar esta plataforma :)






¿qué te ha parecido?  

Es un tutorial muy interesante, porque da bastante juego y nos ayuda a poner chulo nuestro blog, ¿No crees?

¿Por qué plataforma te has decantado? ¿Usas a menudo Instagram? Es una de las redes sociales del momento, estaría bien que la usaras. Además así educas el ojo ;) para tener cada vez mejor gusto para diseño y encuadre de fotografías.

Espero que te haya gustado, deja tus dudas aquí, no cargues con ellas, debajo del post tienes la posibilidad de dejarlas, en los comentarios :)



si no quieres perderte nada y quieres recibir una check-list para conseguir entradas perfectas, suscríbete



   


20 comentarios

19 jul. 2016

Freebies: Fondos de verano para descargar de uso libre

fondos-blogger-verano-gratis-descarga

¡ Sorpresa ! Hoy traigo un post no programado para haceros un regalo. Más y más regalos y ¡¡Que no se diga!!

Tenía muchas ganas de ponerme a diseñar fondos patterns bonitos para este verano, pero como he estado preparando las clases extras del curso gratis Crea y Diseña un blog desde cero , paso a paso, la cosa se me ha alargado. 

Pero no pasa nada, porque ayer me he liado la manta a la cabeza  y me he puesto a diseñar. Así que tengo 5 fondos fruteros y fresquitos diseñados especialmente para ti con todo mi amor al arte. 

Como están de moda las sandías he querido hacer algo con ellas, además he añadido un toque de frescura con un vaso con sombrilla de esos que tanto inspiran a un verano en el Caribe ;)

Te voy a dejar una muestra de lo que puedes hacer con ellas, aparte de crear las cabeceras de tus entradas. Probablemente las publique en mi Instagram :)







En fin, no te voy a liar con mis inspiraciones de diseño y te los dejo por aquí para que les eches un ojo, o los dos, como te apetezca :)



Pattern - Sandía y Resfresco con Sombrilla


Sandías y refrescos con sombrilla - Fondo

Sandías y refrescos con sombrilla - Fondo


 Cerezas - Pattern
 Cerezas - Pattern

 Cerezas - Fondo
 Cerezas - Fondo

Sandía - Fondo

Pattern - Sandía

Sandía - Fondo

Sandía - Fondo






Pattern Refresco con sombrilla

Refrescos con sombrilla - Fondo


pattern-sandias

Pattern - Sandías propio

freebie-fondo-sandias

Sandías propio - Fondo

Para usar los Patterns debes componer un collage o usarlos en mosaico, que casi casi es lo mismo. Desde picmonkey.com puedes crear collage y en este vídeo te explico cómo crear un collage.

Descargas estas imágenes y creas un collage solo con una de esas imágenes repetidas en cada uno de los recuadros y tendrás el fondo que quieras con las dimensiones que quieras. 

Para hacerte con estas imágenes solo tienes que hacer click derecho sobre ellas y darle a "Guardar imagen como..." le pones el nombre que quieras, te fijas en qué carpeta se guarda (probablemente una carpeta llamada "Descargas") y listo, ya las tienes en tu PC listas para usar en lo que quieras.

He creado , como ya te he comentado, el pattern y también he creado un fondo de 800 x 400 px para que puedas usarlos como fondo de títulos para tus posts. 

Todos los diseños son propios, hechos por mi , pero el de las sandías con el fondo amarillo que lo he creado en www.colourlovers.com donde se pueden crear un montón de fondos con patrones pre-diseñados. Es muy fácil crear el tuyo así que no te pierdas la oportunidad de crear el tuyo

Si los vas a usar o te haces con ellos estaría genial que lo compartieras en algún lugar mencionándome para que mi trabajo adquiriera el valor que le estás dando :) Que no sea llegar coger e irse ;)

Ahora te dejo un post que está relacionado con imágenes para que no olvides las buenas prácticas en tu blog respecto a ellas:



¿Te ha gustado mi sorpresa? ¿Te has quedado con algún diseño? ¿Cual te ha enamorado? ¿Creas por ti misma/o este tipo de recursos? Cuéntamelo todo aquí debajo, en los comentarios. 

Como siempre si tienes alguna duda, no cargues con ella y déjala también aquí debajo en los comentarios :)


Recuerda que si no quieres perderte nada y recibir una Check List que te ayudará a tener siempre tus entradas perfectas puedes suscribirte al blog ;)



     
4 comentarios

18 jul. 2016

Tutorial Blogger: Cómo añadir botón de suscripcion en tus entradas

poner-boton-suscripcion-en-entradas

Para este tutorial extra del curso, vamos a conocer una opción más para añadir nuestra caja de suscripción o formulario de suscripción en nuestras entradas, o sidebar. 

Ya hemos visto como hacerlo aquí pero en este caso hablamos de insertar un botón, o más bien una imagen que actúe de botón. Simplemente me refiero a una imagen creada o diseñada por ti, de forma atractiva, sobre la que podamos clickar e ir a otra página para suscribirnos.

Podemos añadir un botón de suscripción de dos formas.

La otra página a donde vamos , una vez hecho el click sobre el botón o imagen, para suscribirnos, puede ser una nuestra del blog, como en mi caso, en el menú donde pongo "suscríbete" o podemos usar nuestro propio proveedor de este servicio de newsletter.

En el caso que tratamos vamos a usar FeedBurner porque lo tenemos todo el mundo por defecto, ya que está unido a nuestro blog.

Así que nada, empezamos con la clase que es muy muy sencillita.


Botón de suscripción para nuestra página de suscripciones.


Este caso es el más sencillo y es el que recomiendo, ya que así nuestros lectores y nuestras lectoras permanecerán más tiempo en nuestro blog, con lo que generamos más tráfico en el blog (beneficio para SEO) además de aportar confianza a nuestros/as lectores/as y que quede mucho más personalizado.

Para ello simplemente tenemos que crear una página con nuestra caja de suscripción personalizada y añadir al final de cualquier post una imagen enlazada a la dirección, URL, de nuestra página de suscripción.

Muy fácil ¿Verdad? ¡¡Además es la opción más recomendada!!

   ** Consejo extra:   En esta página podremos añadir más imágenes, o texto que pueda ofrecer información relevante para la persona interesada, o dudosa de suscribirse, de manera que podamos explicar quizás qué tipo de información recibirá al suscribirse, o si ofreces algún regalo con la suscripción... Estos detalles son muy importantes porque dan el paso definitivo para que esa lectora o ese lector finalmente se atreva a dar el paso de suscribirse a tu blog. 

Ya que tenemos una página que podemos poner chula explicando los beneficios de suscripción ¿Por qué no aprovecharla al máximo? :)


Botón de suscripción para una página emergente de Feed Burner.


1- Para esto tenemos que ir a la gestión de suscripciones en nuestro Feed Burner y hacer click sobre el nombre de nuestro blog

2- Vamos a Publicize

3- Vamos a Email Subscriptions

4- y a Subscription Management

Y después del primer código que nos encontramos tenemos otro que es el que sirve para crear un link de suscripción. Concretamente lo encontramos en el apartado Subscription Link Code

5- Nosotras/os vamos a coger solamente una parte del código, que corresponde al link que nos interesa enlazar a la imagen que hace de botón en nuestros posts.

El mío es este

<a href="https://feedburner.google.com/fb/a/mailverify?uri=bloggerPasoAPaso&amp;loc=en_US">Subscribe to    Blogger Paso a Paso by Email</a>

y lo que nos interesa es lo que te he marcado en naranja, o lo que viene siendo lo que hay dentro de las comillas, después de

<a href="LO QUE HAY AQUÍ"



6- Una vez que lo tenemos, añadimos imagen en nuestra entrada y la enlazamos a ese enlace que acabamos de conseguir.

¿Qué te parece? Super fácil ambos pasos, ¿Verdad? Si en algún momento no quieres añadir una caja de suscripción y quieres cambiar la dinámica, es buena idea usar una imagen chula, ¿No crees?


Que no sea por opciones ;)

En este tutorial, creo que ya tenemos todos los conocimientos necesarios para conseguir realizar cada paso sin apoyo de vídeo, pero no obstante si me lo solicitáis lo haré con mucho gusto :)

De todas formas si tienes alguna duda, como siempre, puedes dejarla en comentarios.

¡Qué cerquita está Agosto! ¿Verdad? A ver si se puede disfrutar ;)







   


2 comentarios

15 jul. 2016

Tutorial Blogger: Poner caja de suscripcion en tus entradas o donde quieras

poner-caja-suscripcion-entradas-posts

De nuevo estamos aquí con un tutorial extra respondiendo a peticiones que me habéis hecho, y este tutorial completa el anterior, sobre cómo personalizar la caja de suscripción de Feed Burner para poder crear los estilos que más te gusten y después poder colocar el formulario de suscripción personalizado en tus entradas o en tu sidebar.

Esto último es lo que hoy nos ocupa. Vamos a añadir la caja de suscripción, o el formulario de suscripción, como prefieras llamarlo, al final de todas tus entradas a partir de este momento, de forma automática, sin que tengas que hacer nada más que lo que hoy hagas, y también vamos a ver cómo añadirlo en tu sidebar o en entradas separadas, y en el pie de página de tu blog.

Como ves tenemos muchas y variadas opciones para poder incrustar nuestro formulario de suscripción en el blog, de manera que según cómo sea el diseño de nuestro blog se ajuste más a nuestra interfaz, o parte visual de él.

Personalmente creo que lo que más resultados trae es la caja de suscripción que nos encontramos al final de cada entrada, o debajo de nuestra cabecera, o slider, si es que lo tenemos, así que si no sabes cual elegir, te recomiendo alguna de estas dos opciones. Sin olvidar nunca el Sidebar / barra lateral de nuestro blog, ya que ahí tendrán que encontrar siempre los detalles importantes y básicos de nuestro blog.



Añadir caja de suscripción al final de las futuras entradas


Para añadir nuestro formulario de suscripción al final de las entradas lo tenemos muy fácil. Ya que tenemos, gracias al tutorial anterior, nuestro formulario de suscripción personalizado, simplemente tenemos que:

Desde nuestro panel de contro de Blogger, en nuestro blog:

1- Ir a Configuración

2- Ir a Entradas, Comentarios y elementos compartidos

3- Hacer click en Añadir donde pone Plantilla de las entradas, aquí, mira:

añadir-caja-suscripcion-final-de-entradas
4- Se nos abre una caja de texto donde tenemos que copiar el código que hemos trabajado en el tutorial anterior.

5- Nos vamos a la parte derecha superior donde encontramos Guardar Configuración y ya lo tendríamos listo. 

En nuestras próximas entradas tendremos la caja de suscripción que nos aparecería por defecto. ¡Magnífico! Ya no tendremos que volver a añadir el código ni hacer nada más, siempre nos saldrá la caja de suscripción cuando creemos una nueva entrada.


Añadir caja de suscripción en las entradas ya publicadas, en borrador o programadas.

En el paso anterior hemos adelantado mucho trabajo, pero ¿Qué pasa con las antiguas entradas?

En este paso vamos a ver cómo modificarlo. Es muy sencillo pero nos llevará más tiempo.


1- Vamos a la entrada en la que queramos añadir el formulario de suscripción.

2- Arriba a la izquierda en el editor le damos a HTML que está junto a redactar. Es simplemente tu entrada en código HTML.

3- No toques nada más y al final de todo haz 2 Enter y pega el código que hayas elegido para la caja de suscripción.

4- Dale a Actualizar, Programar o Guardar, según sea una entrada publicada, programada, o en borrador, respectivamente, y listo!!


Añadir caja de suscripción en todas las entradas publicadas presentes y futuras.

Esta es la opción más fácil si tenemos mucho contenido antiguo en el que queremos añadir la caja de suscripción, pero no significa que sea la más adecuada. 

Esta opción no incluye la caja de suscripción en la entrada, si no en el blog, pero la vamos a colocar después de cada entrada. 

Puede que sea la mejor opción o puede que no. Si dentro de un tiempo quieres modificar en algunas entradas la caja de suscripción, porque tienes diferentes listas de suscripción, porque tienes grupos de personas interesadas en diferentes temáticas que tu blog trabaja, esta opción no te la recomiendo.

Sin embargo si no vas a cambiar tu método de Newsletter o envío de post al e-mail, ni tampoco el diseño de esta caja para diferentes entradas, puede ser la mejor opción.

Paso a paso te explico cómo hacerlo:

1- Vamos a Plantilla

2- Copia de seguridad

3- Editar HTML

4- Buscamos en plantilla el siguiente código (si no sabes cómo mira este vídeo)

<div class='post-footer'>

nos interesa el segundo (en el vídeo de este post encontrarás cómo saber cual es el que te interesa)

5- Justo después, debajo, pegamos el código de nuestra caja de suscripción.

6- Guardamos plantilla y listo!


Añadir caja de suscripción en nuestro sidebar / columna lateral del blog


1- Vamos a Diseño

2- Añadir Gadget en la columna lateral del blog

3- Elegimos HTML / Javascript 

4- Podemos ponerle título si queremos y si no dejarlo así, pero en el cuadro grande de texto debemos pegar el código de la caja de suscripción que hayamos elegido.

5- Guardamos.

6- Movemos el gadget a la posición que queramos.


Añadir caja de suscripción debajo de nuestra cabecera / Slider o al pie de página

1- Vamos a realizar todos los pasos anteriores y en el último paso vamos a arrastrarlo hasta debajo de nuestra cabecera, o hasta el Footer, o pie de página.

2- Guardamos disposición y listo!!

Qué fácil ¿Verdad?

vídeo tutorial
Si no te resulta sencillo y si quieres completar toda esta info, te aconsejo que realices el tutorial paso a paso con el vídeo :) Si es que... más fácil no te lo puedo dejar ;)



¿Qué te ha parecido? Si tienes algún tipo de duda por favor deja un comentario y la resolvemos ;)
El próximo día, Lunes, vamos a ver cómo añadir la suscripción con un botón directo.

   

15 comentarios

13 jul. 2016

Tutorial Blogger: Personalizar caja de suscripción de Feed Burner + 6 modelos

personalizar-caja-suscripcion-blog

Empezamos con los extras del curso gratuíto crea y diseña tu blog desde cero paso a paso, y en esta primera clase extra, que me habéis solicitado, vamos a ver, cómo modificar el diseño de nuestra caja de suscripción de Feedburner, a través de la cual nuestros/as suscriptores/as recibirán nuestros posts en su e-mail.

Este tutorial es algo extenso en el vídeo, porque te explico lo mejor que puedo, el significado del código que FeedBurner nos proporciona. Puede que no creas conveniente verlo, porque no quieras aprender esta parte, pero sin duda, son 5 minutos que te harán poder modificar a tu gusto el código si así  lo quisieras. Si no te ofrezco algunos códigos para cajas molonas de suscripción en las que tan solo tendrás que modificar una parte.

 Para esto lo primero que debemos hacer es ir a Feedburner  


    Aparece en inglés pero siempre podrás hacer Click derecho a un lado de la página, para traducir a español, click en Traducir a español. Así podrás leer todo lo que te explica FeedBurner al respecto de cada página.

   Click en el nombre de nuestro blog

   Click en Publicize

Aquí tendremos el código necesario para poder personalizar la caja de suscripción.

   En Language elegimos Español

   Copiamos el código que hay justo después. El mío es este:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=PruebasBloggerPasoAPaso', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="PruebasBloggerPasoAPaso" name="uri"/><input type="hidden" name="loc" value="es_ES"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

El formato quedaría en inglés y muy poco personalizado. Se vería tal que así:

caja-suscripcion-feedburner


 Te aconsejo que más abajo selecciones la opción de recibir un e-mail cuando tus suscriptores/as se den de baja, aquí, mira:


 Después de haber copiado el primer código que nos aparece y haber clicado en esta anterior opción, le damos a Save/Guardar y listo. Pasamos a personalizar nuestra caja de suscripción.

Para personalizar nuestro código, lo mejor es comprenderlo, y por eso te dejo un vídeo con:

 Otra forma de llegar a conseguir el código en FeedBurner si ya tienes suscriptoras/es

 Te explico qué partes corresponden a cada parte de tu caja de suscripción para poder personalizarla de forma más concreta y autónoma.



Ahora te comparto los códigos ya personalizados para que los uses como quieras :)

Caja de suscripción de FeedBurner personalizada

Ahora os dejo los diseños que he hecho por si se te complica el hecho de modificar código. Si quieres uno de estos códigos al final de ellos te lo explico.

  Caja de suscripción - Con borde de líneas:

caja-suscripcion-feed-burner-personalizada



  Caja de suscripción - En línea botón redondo

caja suscripción en línea redondo

Caja de suscripción - En línea botón cuadrado


caja suscripción en línea cuadrado


Caja de suscripción - Con fondo de color y botón redondo








Caja de suscripción - Con fondo de color y botón cuadrado






Caja de suscripción - Marco y efecto en botón

personalizacion de formulario de suscripcion



Para usar estos diseños / códigos antes debes hacer un par de cambios muy sencillos en el código que copies.

 Lo más importante es cambiar donde pone PruebasBloggerPasoAPaso y cambiarlo por lo que pone en tu código original de FeedBurner después de 

uri="

entre las comillas estará el nombre de tu feedburner, y es muy importante porque si no las personas que se suscriban no lo harás a tu blog, si no ¡¡Al mío de pruebas!! Modifícalo.

 Para hacer las modificaciones usa el Bloc de notas de tu PC que resulta muy cómodo. 

 También deberías cambiar el color de las líneas, de los fondos... Los colores ya sabes que van después de la almohadilla.

 background: #fff; Este código se refiere al fondo, le da un color blanco, si modificas lo que va después de la almohadilla con el código de color HTML que elijas ya lo tendrás modificado

 color: #fff; este código suele dar color al texto de la zona donde lo pongamos. Si lo modificas pasará lo mismo que en el caso anterior pero con el texto. 

 border: 1px solid #fff; Este otro código da forma y color a la línea que rodea "algo" según donde lo coloques. Se compone de un número de píxeles ( 1px ) que define el grosor de la línea, cuanto más grande el número más gruesa la línea. Le sigue la forma de la línea, que la puedes poner solid que será una línea normal, o dashed que serán líneas discontínuas, o bien dotted que son puntos (aunque en píxeles al final son cuadraditos ;) y por último encontramos el color, que viene siendo lo mismo que en los casos anteriores en los que te he hablado de modificar el color. Código HTML del color que elijas y listo.

VÍDEO QUE COMPLETA EL TUTORIAL




Una vez que lo tengamos todo listo y nuestro código modificado y personalizado en nuestro bloc de notas, vamos a añadirlo a nuestro blog. O bien en nuestro sidebar / barra lateral de nuestro blog, o bien al final de nuestras entradas, ¿Te apetece? En el próximo post te cuento cómo :)

¿Te ha resultado fácil? ¿Quieres modificar la caja de suscripción de otro proveedor de suscripciones? Déjame en comentarios todas las respuestas y todas tus dudas, porfa :)




   

6 comentarios
© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.