Como poner una barra informativa en el Blog

¿Habéis visto que barra informativa más chula tengo abajo?

Como veis, os indica que tenéis un curso sobre SEO y SEM en el Blog de forma totalmente gratuita.
Pero se puede usar para mil cosas más.



¿Os doy unas cuantas ideas?

1. Para resaltar un post importante
2. Para animar a vuestros lectores a que os sigan por alguna red social
3. Para informar de un sorteo
4. Para que se descarguen algún Freebie
5. Para vender algún producto
6. Para que se suscriban a vuestra Newsletter

Por lo pronto son solo 6 ideas que se me han venido a la mente, pero seguro que vosotras tenéis muchísimas más ideas para esta barra informativa tan chula.
Desde luego esta entrada bien podría ser una entrada típica de un Lunes Molón, pero teniendo en cuenta que la web que vamos a utilizar lleva mucho tiempo por las redes no me parecía una buena idea.
Yo desde luego la había visto en algún que otro blog pero siempre se me olvidaba averiguar de donde era la dichosa barrita o simplemente no sabia como escribirlo en Google para que me saliera el tutorial.

Así que creo que es buena idea tener el tutorial por el Blog y además recordaros que la podéis usar para muchísimas cosas.

Por cierto sirve tanto para Blogger como para Wordpress.

¿Queréis que os diga como se hace? ¡Pues vamos al lío!

Lo primero que tengo que decir es, que como yo ya estoy registrada al haber trasteado la página seguramente no tendréis que seguir mis pasos al pie de la letra, pero al menos os podré guiar.

El ejemplo lo he hecho imaginando que tengo una tienda y que vendo los nuevos Washitapes físicos con motivos navideños que me han llegado.

1. Entramos en la pagina web Hello Bar, la cual nos creará a través de  código HTML la barra informativa.



2. Añadimos la URL de nuestro sitio web para que el programa pueda previsualizar como quedará la barra que creemos.

3. Nos registramos, yo prefiero hacerlo a través de Google para ahorrarme líos.

4. Como os decía este es el menú que a mi me sale al meterme en la web y estos son los elementos del menú principal.



5. Aquí tenemos los tipos de barras mas comunes.


6. Yo para el ejemplo seleccione la de "promote" y estas eran sus opciones.


7. En las siguientes imágenes podréis ver algunos aspectos básicos de personalización. Como veis la barra informativa aparece arriba con nuestro blog a modo de previsualización.





8. Una vez la tengamos como queremos es hora de darle al botón "Save & Publish" donde nos parecerá una ventana con varias opciones.

9. En Blogger seleccionamos la opción de "I Can Install Code Myself" y nos abrirá un código HTML.

Este código los pegaremos en el HTML de nuestro blog. Teniendo en cuenta que:

- Es un único código por Blog (es decir no esperéis varios códigos según creáis nuevas barras)

- No hace falta modificar el código, cuando creas barras informativas nuevas puedes elegir en las opciones de Hello Bar si quieres que salgan todas a la vez, solo 1 o 3 de varios tipos.

- Además sirve para llevar un recuento de cuanta gente pincha en el enlace en cuestión.

Cuando tengamos el código nos vamos a nuestra plantilla de HTML y como siempre, recordar hacer una copia de seguridad del Blog.

10. Con Ctrl + F buscamos </Body>
Y justamente en la linea de arriba añadimos el código facilitado por la pagina web de Hello Bar.



¡Y listo!

Si tenéis cualquier duda o veis que no os sale, como siempre me lo podéis indicar por comentarios o por email y os ayudaré encantada.

¡Un beso enorme y nos leemos este viernes! Espero que os haya gustado muchísimo ¡Muack!