Tutorial: Cómo agregar fácilmente una barra de información en Blogger

  • Autor Autor Xauen
  • Fecha de inicio Fecha de inicio
Xauen

Xauen

Xi
Verificación en dos pasos activada
Verificado por Whatsapp
¡Hola betas!

Supongo que en diferentes ocasiones habrán visto este tipo de barras de información en diversos blogs.

Antes de ninguna otra cosa, me gustaría aclarar qué es eso de "barra de información" y como entiendo que la mejor manera de explicar algo es haciéndolo con un ejemplo, aquí tienen uno para que vean a lo que me refiero exactamente:


barra-informativa001.webp


Imagen 1: Ejemplo de barra de información que podremos colocar de forma sencilla en nuestra plantilla de Blogger


Una vez se ha aclarado esta pequeña duda que podrían tener con respecto al título escogido, procederé a explicarles los pasos a seguir para implementarla en sus blogs de Blogger si gustan hacerlo.


PASOS:
1. Iremos a la web de hellobar
2. Click para registrarnos
3. Iremos rellenando los campos
4. Ejemplo de captura de pantalla de lo que veremos
5. Procedimiento a seguir, paso a paso
6. Ejemplo de captura de pantalla de lo que veremos
7. Obtendremos el codigo




PASO 1.

Encontraremos una página web similar a esta


barra-informativa002.webp


Imagen 2: Captura de pantalla de lo que encontraremos cuando entremos en la web




PASO 2.

Haremos click en registrarnos para acceder a este servicio y sus posibilidades

barra-informativa003.webp

Imagen 3: Nos registraremos en la web con nuestro correo electrónico.





PASO 3.

Una vez registrados, rellenaremos los campos y accederemos al servicio.

barra-informativa004.webp

Imagen 4: Nos registramos y entramos a la web





PASO 3.1.

Veremos algo similar a esta captura.


barra-informativa005.webp

Imagen 5: Ejemplo de captura de pantalla con diferentes opciones





PASO 4.

Veamos las posibilidades que ofrece esta herramienta:


barra-informativa006.webp

Imagen 6: Apartado Settings


barra-informativa007.webp

Imagen 7: Seguimos configurando en función de nuestros gustos.





PASO 5. Iremos dando a Done, hasta que lleguemos a una pantalla donde veremos lo siguiente:

barra-informativa008.webp

Imagen 8: Captura de ejemplo





PASO 6.

Posteriormente veremos una pantalla como la que figura a continuación o muy similar

barra-informativa009.webp

Imagen 9: Captura de ejemplo





PASO 7. Copiaremos el código que nos da en nuestra plantilla de Blogger, de esta manera:

7.1. Plantilla
7.2. Editar HTML
7.3. Click dentro y seguidamente hacemos Control + F
7.4. Buscaremos
HTML:
</body>
y justo encima de esto colocaremos el código que nos dieron en la web.



Y ya está:


barra-informativa001.webp


Imagen 10: Lo tendremos colocado en nuestra página de blogger de manera sencilla.





Si te ha servido este Tutorial por favor no dudes en darle ME AGRADA y si tienes alguna duda, solo deja un comentario y trataré de solucionarla lo antes posible.
 
Atrás
Arriba