Usar barra de progresso no blog é uma maneira eficaz de melhorar a navegação do usuário e contribuir para a construção da sua marca além de deixar seu site mais bonito e original.
Neste post, vou lhe dar a Prompt que usei e os códigos prontos que eu uso para exibir a barra de progresso e dar dicas para você melhorar seus posts no blog.
Índice do Post
- Passo a passo de Como colocar a barra personalizada em seu blog/site?
- Dicas Extras
- Para que serve uma barra de Progresso em seu blog?
- Conclusão
Lembrando que você não precisa entender de códigos HTML, o Chat-GPT faz tudo por você. O único trabalho que você terá será copiar e colar dentro do código HTML do seu post, o que é muito fácil. Vou ensinar a seguir.
Passo a passo: Como colocar a barra de progresso de leitura em seu blog?
Antes de tudo, copie uma das seguintes opções a seguir (Estão em documentos no Google docs, para facilitar na hora de copiar):
Opção 1 (Parte superior, cor laranja)
Opção 2 (Parte superior, cor laranja degradê)
Opção 3 (Parte inferior, cor laranja)
Caso você queira criar sua barra de progresso de leitura diretamente no chat GPT, use a seguinte prompt:
Crie uma barra de Progresso de leitura de página em html, posicione no topo da página. Deixe na cor (cor-de-sua-preferência).
Após isso, siga os próximos passos para adicionar a barra à página do blog.
Na Página de edição de "novo Post" no Blogger, clique no ícone do lápis no canto superior esquerdo.
Em seguida, clique em "visualização em HTML", para mudar para o modo HTML.
Após isso, insira o código HTML que você copiou na parte de cima ou embaixo do conteúdo do post e pronto.
Nota: Eu não fiz esse tutorial em blogs no WordPress. Se você fez e conseguiu nele, por favor, compartilhe com a gente nos comentários.
Dicas Extras:
Onde colocar as barras de progresso no seu blog?
Aqui estão algumas opções recomendadas:
- Topo da Página: A posição mais comum e recomendada é no topo, logo abaixo do cabeçalho ou menu de navegação. Isso permite que o usuário acompanhe seu progresso sem que a barra interfira na leitura do conteúdo.
- Rodapé Fixo: Outra opção é uma barra de progresso fixa no rodapé da página. Esse posicionamento é mais discreto e não ocupa tanto espaço visual, mas ainda oferece um feedback constante ao leitor.
- Laterais da Página: Em blogs com layout de uma ou duas colunas, uma barra de progresso vertical nas laterais pode ser uma solução interessante. Ela fica visível, mas sem atrapalhar a leitura do conteúdo central.
Lembrando que você pode ajustar a espessura da sua barra de progresso de duas maneiras: pedindo diretamente ao Chat-GPT para configurá-la ou fazendo isso manualmente na seção do HTML responsável por editar a espessura da barra, mas para fazer isso você deve entender o básico de HTML.
Também é possível alterar a cor, aplicar RGB gradiente e mudar a espessura da barra para que atenda melhor às suas necessidades.
De modo geral, barras com uma espessura entre 4 e 8px, são consideradas ideais, pois garantem boa visibilidade sem interferir no design da página. Portanto, escolher a posição ideal é crucial para manter a funcionalidade e a estética do site.
Para que serve uma barra de Progresso em seu blog?
A barra de indicação de progresso em sites e blogs tem várias utilidades que melhoram a experiência do usuário. Aqui estão os principais benefícios:
- Melhor Experiência do Usuário (UX): Uma barra de progresso mostra visualmente o quanto do conteúdo já foi consumido e quanto ainda falta. Isso ajuda o leitor a ter uma noção clara do tempo que vai gastar, aumentando a sensação de controle.
- Engajamento: Ao ver o progresso, muitos usuários se sentem mais motivados a concluir a leitura, especialmente em artigos longos. A barra de progresso pode funcionar como um incentivo para continuar navegando pela página.
- Redução da Taxa de Rejeição: Sites que apresentam artigos muito longos podem intimidar os visitantes. Com a barra de progresso, os leitores têm uma percepção clara de quanto já avançaram, o que pode reduzir a probabilidade de eles abandonarem a página antes de terminar.
- Indicativo de Conteúdo Estruturado: A barra de progresso sugere que o conteúdo é bem organizado e pensado, o que pode aumentar a confiança do leitor na qualidade do site.
- Funcionalidade em Cursos Online e Formulários: Em sites educacionais ou e-commerce, barras de progresso são amplamente usadas para mostrar ao usuário em que fase ele está em um formulário ou processo de inscrição, tornando a navegação mais intuitiva.
Contribui para a identidade visual do seu blog: Uma barra de progresso personalizada pode contribuir significativamente para a identidade visual do seu blog, principalmente se você está começando agora e deseja construir uma marca.
Concluindo: a barra de progresso torna a experiência mais dinâmica e interativa, além de ajudar a manter o público engajado até o final.
Ao ajustar cores, estilos e tamanhos, você pode alinhar a barra com a paleta de cores e o design geral do site, criando uma experiência mais coerente e profissional para os leitores. Além disso, ela reforça a estética do seu blog, diferenciando-o de outros e tornando-o mais memorável.
Espero que essas dicas tenham sido úteis para você, não se esqueça de se inscrever para receber mais dicas para melhorar o seu blog e conferir mais dicas e tutoriais aqui no blog. Até a próxima.
O que você achou?
