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, pues aquí tienes el vídeotutorial y justo a continuación, los códigos que necesitas.




Aquí tienes los enlaces a las herramientas de las que te he hablado en tutorial:
















Y ahora, vamos al lío!

Dirígete a Plantilla y haz una copia de seguridad primero. Una vez dentro de Plantilla >Editar HTML, haz clic en cualquier sitio (dentro de la plantilla) y pulsa Ctrl+F para que aparezca la caja de búsqueda. Pega esto y dale a intro:

<body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>

Justo debajo, añade este código:

<div id='barrainformativa'>
<a href='enlace al que quieres llevar a tus lectores' target='_blank'><img border='0' src='enlace de tu imagen'/></a></div>


Ahora vamos a dirigirnos a las parte del CSS dentro de tu plantilla, para pegar este código. Sigue paso a paso el videotutorial, para que sepas dónde colocarlo:

#barrainformativa {
margin-left: -40px;
width: 100%
float: center;
position: fixed;
z-index: 601;
}




*Si eres de las que tiene un menú superior y no quieres que te lo tape, puedes incluir este código padding-top: 40px; e ir jugando con el valor, hasta situarlo justo debajo de tu menú. (Esto me lo sugirió Yudy de Ingenio Diy, y en buena hora, porque la verdad es que yo no había caído). Quedaría así:

#barrainformativa {
margin-left: -40px;
padding-top: 40px;
width: 100%
float: center;
position: fixed;
z-index: 601;
}


Para terminar, vamos a añadir un último código CSS para que tu barra, se adapte perfectamente a la vista móvil:

.mobile #barrainformativa img{
height: auto; 
max-width: 100%;
}




Y ya la tienes lista! ¿qué te parece? ¿ha sido sencillo, verdad? pues ahora espero que te dé muchas alegrías, en cualquier objetivo que la emplees. Y ya que sigues ahí, déjame un comentario anda, que me hace mucha ilusión y me cuentas qué te ha parecido o si tienes alguna duda ¿vale?

Aprovecha lo que queda de Domingo y que tengas una gran semana. Un abrazo!




¿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:




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
  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

Publicar un comentario