14 febrero 2016

Cómo crear una barra informativa estilo Hello Bar


barra-hello-bar-personalizar



No sé si seré la única o le habrá pasado a más personas, pero cuando instalé la Hello Bar en mis plantillas prediseñadas, a veces me daba problemas, porque mostraba su publicidad en vez de la mía.


Vale que en la opción gratuita muestre su logotipo, hasta ahí me parece lógico, pero había veces que entraba en el blog y me encontraba una sorpresita como esta:







problemas-hello-bar


En lugar de mostrar el mensaje que yo había creado, que era este:


diseñar-hello-bar


Y no es que me pasara sólo en una plantilla. De haber sido así, hubiera pensado que era algún problema con mi HTML, pero no, me lo hacía en todas. Así que, cansada de que no estuviera cumpliendo con su labor, rastreé la red en busca de posibles opciones. Pero como no encontraba ninguna aplicación que pudiera personalizar a mi manera, al final opté por crearme yo misma un código HTML, para mostrar un mensaje de contacto a las personas que entraran a mirar la plantilla.


QUÉ ES LA HELLO BAR



Pero antes de nada, voy a contarte brevemente para qué sirve la herramienta Hello Bar, por si aún no la conoces. Se trata de un código script que puedes insertar en tu plantilla, para destacar mediante una barra superior un mensaje que comunique a tus visitas cualquier evento importante que quieras resaltar.

Por ejemplo:


  Has decidido hacer un sorteo y quieres lograr una mayor participación


  Quieres que más personas se apunten a tu lista de suscripción


  Necesitas avisar de algo importante


  Te gustaría que leyeran un post en particular


  Vas a ofrecer servicios profesionales


  Has creado una oferta y no quieres que se la pierdan


  Quieres enviarlos a una página o red social



Aquí tienes un gift con todos los ejemplos que te he propuesto, para que lo veas más claro:


diseñar-hello-bar




Como puedes comprobar se trata de una utilidad a la que se le puede sacar muchísimo partido. Encima la puedes personalizar con los colores de tu blog y no es difícil de configurar. Pero como ya te he comentado, mi pega es que cuando le da la gana, muestra su publicidad en vez de mi mensaje y eso le quita de un plumazo todo su encanto.




CÓMO INSTALAR UNA BARRA INFORMATIVA CON HTML








Si no tienes mucha idea de HTML, puede que te esté dando miedito, pero no problem, porque lo vamos a hacer con videotutorial y una copia de seguridad, como es costumbre. Vamos, que tu blog está a salvo y además instalar este código es una "chuminá", en menos de un minuto, lo tienes ventilado, no te preocupes. Al no llevar ningún script, ni nada raro, tampoco te va a ralentizar la página, así que puedes estar tranquila que es completamente inocuo.





VENTAJAS Y DESVENTAJAS



Pero antes de empezar, te cuento las ventajas y desventajas con respecto a la Hello Bar, para que valores si para ti suponen un problema o no. Empezamos primero por lo malo, (a mí me gusta siempre comenzar con lo peor, así termino con buen sabor de boca  ):



DESVENTAJAS 


  Si tienes un menú superior, te lo va a tapar. Con la Hello Bar, también pasa, pero tiene una flechita que puedes clicar para ocultarla y así acceder al elemento que esté tapando. Aún así, se puede optar por situar la barra informativa, bajo el menú superior (esto quedará bien, si tu menú no es desplegable). Esta sugerencia la ha aportado Yudy, de Ingenio Diy y se lo agradezco mucho, porque últimamente tengo las neuronas un poco aletargadas y no había caído  


  Tendrás que diseñar tu barra informativa. Con la Hello Bar, eliges los tonos, el texto y el enlace. Y una vez lo configuras todo, sólo tienes que copiar un código script y pegarlo en el blog. Con este código, lo que vas a mostrar es una imagen, previamente diseñada. Esto es fundamental que lo hagas tú, porque yo no puedo adivinar, qué mensaje quieres transmitir a tus lectores, así que no se puede arreglar de otra forma...



VENTAJAS


  El único mensaje que mostrará tu barra informativa, será el tuyo. Ni logotipo ajeno, ni riesgo de que le dé un ataque de protagonismo y sólo hable de ella.


  Al ser una imagen, podrás darle el diseño que te dé absolutamente la gana, estampados, brillos, texturas... imaginación al poder! (aunque yo te aconsejo que destaques el mensaje y no lo hagas pasar a un segundo plano, por exceso de parafernalia) y con los botones más de lo mismo. Además , te voy a contar paso a paso como diseñarla, tanto en Photoshop como en Photoscape, por si no tienes (o no entiendes) el primero. Y encima, vas a conocer 3 aplicaciones muy interesantes para tu blog: Tinypic, Tinypng y Colorzilla. Seguramente, te haya hablado alguna vez de ellas, pero hoy las vas a ver en acción.


  Es ligera (no ralentiza el blog) y se adapta perfectamente a vista móvil.



Bueno, pues ya está todo dicho. ¿Qué te parece? ¿te gusta la idea, prefieres Hello Bar o ninguna de las dos?


  Si es la última opción, te felicito por haber llegado hasta aquí, eres de las que te gusta leer y eso me encanta. Si ya de paso, me cuentas tu opinión en los comentarios, me encantaría aún mas.


  Si prefieres la Hello Bar, la instalación es muy sencilla, pero por si acaso, aquí tienes un tutorial de Cyball Brigitte, que lo explica muy bien.


  Si te ha molado mi propuesta, te invito a formar parte de la Comunidad Demo 2.0, en la que tendrás acceso al vídeotutorial y a los códigos que necesitas, para crearla.


Pero no sólo eso, al formar parte de la comunidad:



  Te descargarás automáticamente la Guía gratuita para usar imágenes en la red, que contiene 60 páginas repletas de todo tipo de recursos para usar gratis en tus trabajos.


  Tendrás acceso al Curso de e-mail marketing para conseguir llenar tu lista con suscriptores interesados en tus contenidos


  Podrás descargarte los recursos que he creado para San Valentín y conocer mis sugerencias para pasar una velada "diferente" .



Esto de momento, porque voy publicando nuevos recursos que te ayudarán a avanzar y conseguir lo que te propongas con tu proyecto.









 No lo pienses más y empieza a crecer con tu blog. Y por cierto, feliz día de San Valentín, que lo disfrutes!  






¿Te gustaría seguirme en tu lector de feeds favorito?





¿Quieres aprender a diseñar bonito y tener un blog atractivo? Échale un vistazo al Curso de Photoshop para Blogueras Creativas, con el que podrás perfeccionar tu manejo de Photoshop, a la vez que desarrollas tu marca y creas el blog que deseas tener. Es un curso muy completo, en el que sin duda, habrá un antes y un después en tus diseños. Échale un vistazo:




18 comentarios:

  1. Hola, muy buen tutorial, ideal para blogs que tiene algo importante que decir. Puede que para los que tengan un menu superior haya una solución, no lo probado pero si a la barra informativa le pones un (padding-top:50px) asi queda separado de la parte superior y le da visibilidad al menú pero como te digo no he probado. Si lo haces me cuentas... Un beso.

    ResponderEliminar
    Respuestas
    1. Gracias Yudy, la verdad es que es una buena idea, si el menú no es desplegable. Por supuesto que funciona y es una manera de no vetar la posibilidad en un blog con menú superior, así que incorporaré la propuesta al tutorial, mencionando tu inventiva, mil gracias, un beso!

      Eliminar
  2. Genial! Lo voy a utilizar para anunciar una promoción que tengo ahora en la que regalo una Conferencia skype gratuita sobre ceremonia civil. El fin de semana que tendré tiempo me pondré con ello. Ya te contaré. Mil gracias!

    ResponderEliminar
    Respuestas
    1. Me parece una idea fantástica Oiana, me alegro mucho de que te venga bien. Si tienes cualquier duda, ya sabes que me tienes para lo que haga falta. Un besote!

      Eliminar
  3. Gracias por el tutorial, muy interesante, probaré a ver como queda en mi blog.
    Besos

    ResponderEliminar
    Respuestas
    1. Claro Raquel, anímate y si quieres, dame un toque cuando la tengas, para que me asome a verla. Un beso!

      Eliminar
  4. Me ha encantado!!! Muy muy bien explicado y sobre todo, y algo que valoro mucho, con los pros y contras por delante.

    ResponderEliminar
    Respuestas
    1. Muchísimas gracias Patricia, es lo mejor, así no hacemos perder el tiempo al que no le interese ¿verdad? . Espero que te haya servido y si la incluyes, aquí estoy si necesitas resolver dudas. Un beso!

      Eliminar
  5. Gran post :) Me quedo como seguidora tuya! Me encanta tu blog y tus consejos e.e

    Un besazo ^^

    ResponderEliminar
    Respuestas
    1. Muchas gracias Sann, yo estoy encantada de que te sirvan y de tenerte por aqui, un besazo!

      Eliminar
  6. Me ha encantado! Me parece una idea buenísima. A ver si tengo un rato y me planteo poner algo así en el blog. Por cierto, ¿sirve para Wordpress, verdad? Un abrazo.

    ResponderEliminar
    Respuestas
    1. Creo que sí, al fin y al cabo, es sólo html, no creo que haya problema. Gracias por pasarte Rosa, un abrazo!

      Eliminar
  7. Muchísimas gracias por este post porque lo estaba esperando como agua de mayo jejeje besitos

    ResponderEliminar
    Respuestas
    1. Que bien Moni Xu, no sabes lo que me gusta oíros decir que os ha resultado útil. Ese es mi principal objetivo, sácale mucho partido, un besazo!

      Eliminar
  8. Gracias Raquel como todos tus post es ideal para mejorar nuestro blog .Deseando saber sobre photosho
    Saludos

    ResponderEliminar
    Respuestas
    1. Gracias a ti Elisa, por tu interés por aprender, con Photoshop nos iremos poniendo en breve ;) un beso!

      Eliminar

demo