Como poner una barra informativa en el Blog


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.

Barra-informativa-para-blog - (1)

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.
Barra-informativa-para-blog - (3)

6. Yo para el ejemplo seleccione la de "promote" y estas eran sus opciones.
Barra-informativa-para-blog - (4)

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.

Barra-informativa-para-blog - (5)
Barra-informativa-para-blog - (7)
Barra-informativa-para-blog - (6)

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.

Barra-informativa-para-blog - (9)

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


46 comentarios

  1. Qué guay!! Ves? Por estas cositas voy a seguirte siempreeeeee, jijijiji.
    Besotes ^^

    ResponderEliminar
    Respuestas
    1. aaaiiinss y por comentarios así voy a seguir haciendo esto siempre ¡Muchas gracias guapa!
      Un beso enorme :)

      Eliminar
  2. Hola guapa!!
    Me ha parecido muy interesante! Me lo apunto para utilizarlo en un futuro. Muchas gracias por descubrirnos siempre cositas tan chulas.
    Un besazo!

    ResponderEliminar
    Respuestas
    1. ¡Hola Lara!
      Claro que sí anímate a usarla, en tu blog además quedaría muy bien :)
      Muchas gracias a tí por pasarte cielo.
      ¡Mil besos!

      Eliminar
  3. Muy chulo, pero creo que ya alguna vez habré comentado que para mí cualquier tontería informativa me colapsa jajaja. Cuando tenga un día tranquilito lo pondré en práctica, muchas gracias por la claridad de las explicaciones preciosa. ¡Un besazo!

    ResponderEliminar
    Respuestas
    1. ¡Hola cielo!
      Hay muchos tipos de barras informativas, es cierto que algunas molestan más que otra cosa, pero las puedes hacer más pequeñas como esta y solo ponerla en momentos puntuales.
      ¡Un beso enorme! :)

      Eliminar
  4. Qué bien conocer tu blog! Soy una loca del html y de estas frikadas, he hecho ya algunos cursos pero me falta tiempo para ponerme. Me va a venir genial darme una vuelta por tu blog y probar los consejos, de hecho cuando tenga un rato tranquilo probaré lo de la barra para mis cursos de formación cosmética.

    Me ha parecido un tutorial muy sencillo, no creo que tenga problemas sino ya te preguntaré aprovechando que nos das esa posibilidad.

    Un besazo y buen martes! ^^

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa!
      Claro que sí anímate a probarla, en tu blog quedará genial. Y por supuesto avísanos si tienes alguna duda.
      Me alegro de que te guste el blog y de que te parezca util :)
      Nos seguimos leyendo, ¡Mil besitos!

      Eliminar
  5. Gracais guapa. No sabes lo que aprendo contigo. Un beso

    ResponderEliminar
    Respuestas
    1. ¡Gracias a tí por pasarte! Nos alegramos mucho de que te sirvan nuestros post :)
      ¡Un beso enorme!

      Eliminar
  6. HOla guapa
    No suelo usar estas barras y la verdad es que no tenía ni idea de como funcionaban jeje
    Un post muy útil
    Un besazo

    ResponderEliminar
    Respuestas
    1. ¡Hola Arien!
      Me alegro de que te guste ^^ Cada vez se ven más en los Blog y pueden ser muy útiles.
      ¡Mil besitos cielo!

      Eliminar
  7. Te juro que me leíste la mente porque necesitaba un tutorial para hacer una barra informativa. Así en cuanto tenga más tiempo haré sin dudarlo este pedazo de tutorial. Por cierto me gusta como se mueve el cuadrito negro "¡Lo quiero!" que tienes en la barra informativa ja ja

    ResponderEliminar
    Respuestas
    1. ¡Hola Ingrid!
      Que bien jaja pues entonces este tutorial te vendrá ni que pintado. Esperamos que le des muchísimo uso :)
      ¡Un beso enorme, gracias por pasarte!

      Eliminar
  8. Hola guapa!!
    anda que genial, voy a aprender un montonazo de cosas contigo!!
    Sobre lo que me has dicho del tónico... te va mal? a mi me va de lujo... no será que tienes la piel seca o sensible? porque si la tienes grasa se me hace raro que no te seque los granitos y te elimine el exceso de sebo y eso de que te salgan rojeces, ufff lo mismo es porque tiene bastante alcohol...
    Besines

    ResponderEliminar
    Respuestas
    1. ¡Hola Nikki! Me alegro de tenerte por aquí y esperamos que te haya gustado muchísimo el tutorial :)
      En cuanto a lo del tónico, parece ser que mi piel es grasa pero al usar productos tan astringentes para controlar el exceso de sebo se ha vuelto deshidratada. Y es una mezcla muy rara y difícil. Creo que ese tónico me empeoró la deshidratación o que tuviese algún componente que no me sentó muy bien.
      ¡Un besito enorme!

      Eliminar
  9. Anónimo9/12/15

    Guapísima!
    Gracias por este tutorial tan interesante, me lo apunto ya que en alguna ocasión alomejor le doy algún uso! Luego pasare a echarle un vistazo a la web :)
    A ti te ha quedado monísima!!!
    Un besazo enorme!

    ResponderEliminar
    Respuestas
    1. ¡Hola cielo!
      Me alegro un montón de que te guste :)
      Se le pueden dar muchos usos la verdad, seguro que a tí se te ocurre alguno genial.
      ¡Un beso enorme!

      Eliminar
  10. Muy buena idea. Gracias por compartir.

    Besos

    ResponderEliminar
    Respuestas
    1. ¡Hola Joanna! Gracias y muchas gracias a tí por pasarte cielo. ¡Un beso enorme!

      Eliminar
  11. Muy buena idea! Gracias por el tutorial :) lo utilizaré seguro.
    Besitos!

    ResponderEliminar
    Respuestas
    1. ¡Hola Irene! Me alegro de que te guste :) Gracias a tí por pasarte guapa ¡MUACK!

      Eliminar
  12. A mi estas cosas me vienen de maravilla :3

    ResponderEliminar
    Respuestas
    1. Nos alegramos un montón :) Muchos besitos

      Eliminar
  13. De lo mas interesante este post!!besos

    ResponderEliminar
    Respuestas
    1. ¡Muchas gracias! Esperamos que te guste mucho :)

      Eliminar
  14. Mil gracias por compartirlas, yo pierdo mucho tiempo en estas cositas informáticas así que vienen genial estos post, muy útil y práctico. Me quedo por aquí como sguidora. Un besazo

    ResponderEliminar
    Respuestas
    1. ¡Hola Natalia!
      Esperamos que te sea super útil :) y muchas gracias por quedarte con nosotros.
      ¡Muchos besos!

      Eliminar
  15. Creo que lo voy a intentar!! :D

    ResponderEliminar
    Respuestas
    1. ¡Claro que sí Camila! Ya me contarás por e-mail :)
      ¡Muchos besitos!

      Eliminar
  16. Esto lo tengo que hacer ¡¡me ha fliiiipado!! Gracias por compartir. Un besazo Alexa me encantan tus contenidos ;* Mua

    ResponderEliminar
    Respuestas
    1. ¡Hola Natalia!
      Me alegro un montón de que te guste ^^
      Un beso enorme y muchas gracias por pasarte y por tus palabras cielo ¡MUACK!

      Eliminar
  17. Me guardo este psot en favoritos porque si un día hago un sorteo me gustaría poner algo parecido. Un saludo guapa y gracias por compartir

    ResponderEliminar
    Respuestas
    1. ¡Hola cielo! Claro que si, precisamente para sorteos viene genial :) Un beso enorme y muchas gracia a tí por pasarte.

      Eliminar
  18. Anónimo10/12/15

    Me ha parecido muy muy interesante, me lo apunto porque seguro que la pongo!! Gracias!!!

    ResponderEliminar
    Respuestas
    1. ¡Hola cielo! Me alegro un montón, ya nos contarás si lo pones en práctica. ¡Un beso enorme!

      Eliminar
  19. Gracias por compartir!!. Es muy útil e interesante. Me encanta!!.
    Un besito preciosa!!

    ResponderEliminar
    Respuestas
    1. ¡Hola Bimba!
      Que alegría de que te guste y te resulte interesante :)
      Mil besos cielo

      Eliminar
  20. Wow me encanto el tutorial porque se ve muy fácil!! Lo tendré muy en cuenta para varias cosas :D
    Muchas gracias linda ^^

    ResponderEliminar
    Respuestas
    1. ¡Hola Cher! Claro que sí, seguro que en tu blog queda genial :)
      Mil besos guapa

      Eliminar
  21. Hola Alexxa!!
    Pues genial!! la verdad es que la he visto por varios blogs, pero no sabía instalarla, así que me guardo el tutorial en favoritos, que me va a venir de perlas para la sección que tengo de que eligan mis lecturas, así no tengo que estar cambiando la fecha de los post!! :D
    Besos y feliz semana! <3

    ResponderEliminar
    Respuestas
    1. ¡Hola Sandra!
      Claro que sí, se le puede dar miles de usos. No sabes lo que nos alegra de que te sea de utilidad :D
      Si tienes alguna duda nos dudes en comentárnosla guapa
      ¡Un beso enorme! y una MUY FELIZ SEMANA a tí también ¡MUACK!

      Eliminar
  22. Muchas gracias!!! me parece super interesante. Ahora que quiero volver con la tienda creo que me va a venir de perlas :D

    Besines

    ResponderEliminar
    Respuestas
    1. ¡Hola Alba!
      Nos alegramos un montón de que te guste la idea. Seguro que le das mucho uso :)
      Un beso enorme ¡MUAK!

      Eliminar



¡Anímate a comentar! Tu opinión es muy importante para mí.

Por eso, cualquier comentario escrito desde el respeto será bien recibido.
Por tanto, nos gustaría aconsejarte, que si además de tu fantástico comentario deseas añadir la URL de tu sitio WEB,
debes "Comentar como: Nombre/URL" así Google no nos castigará y tu comentario no será tratado como SPAM :)

No aceptamos ningún tipo de SPAM ¡Gracias por vuestra comprensión!

© Alexxa 26. All rights reserved.