28 janeiro 2016

Como inserir uma barra de notificação em seu blog

Como inserir uma barra de notificação em seu blog

Chamar a atenção dos leitores de um blog pode não ser uma tarefa fácil e ser um grande desafio. Para quem não tem muito conhecimento em HTML e CSS fica complicado fazer alterações no blog e deixá-lo mais completo e bem desenhado para isso. O Hello Bar é um serviço que permite aos administradores de blogs e sites, criar uma mensagem para ser exibida no blog, tentando assim, chamar a atenção dos leitores para aquele comunicado.

Ele se torna uma ferramenta bastante útil quando você quer fazer algum comunicado aos leitores, anunciar uma novidade ou até mesmo, uma mensagem de agradecimento.

Não há muito mistério em utilizar o serviço, porém, a interface do site é totalmente em inglês. Talvez com o passo a passo abaixo, você consiga compreender como funciona o serviço e como criar sua própria barra de notificação.

Passo 1


Acesse o site do Hello Bar (www.hellobar.com)

Passo 2


No canto superior direito, clique no botão Sign In:

(clique na imagem acima para ampliar)

Passo 3


Na próxima tela, clique em Sign In with Google para facilitar o processo de login:

(clique na imagem acima para ampliar)

Passo 4


Autorize sua conta para o Hello Bar clicando no botão Permitir e aguarde ser redirecionado para uma página de gerenciamento.

Passo 5


Clique no botão Manage e em seguida em Create a bar for this rule para dar início à configuração da sua barra.

Passo 6


Na próxima tela, escolha a opção Other:

(clique na imagem acima para ampliar)

Conhecendo a interface


Você chegou à interface de gerenciamento da barra. Em Settings, você pode escolher a finalidade da barra em seu blog. Escolha a que mais se adequar à sua necessidade:

  • Collect Email - Capturar e-mails
  • Social - Linkar suas redes sociais
  • Click Link - Clicar em um link
  • Announcement - Fazer um anúncio ou comunicado

Em Style, você pode escolher o estilo em que a barra aparecerá no blog:

  • Bar - Estilo barra
  • Modal - Janela pop-up no centro da tela
  • Slider - Janela pop-up no canto interior direito
  • Page Takeover - Janela pop-up ocupando toda a tela

Em Color, você pode escolher as cores da barra e do botão. Assim, você pode adequar à cor do seu blog.

Em Text and Content, é o local onde você irá inserir o texto da barra de notificação do site:

  • Headline - Insira o texto com a mensagem que você deseja
  • Button text - Você pode inserir um breve texto que irá redirecionar para o link desejado. Ex: Acesse, Confira, Saiba mais, Leia mais, etc.
  • Font-family - Escolha um estilo de fonte dentre as opções.

Ao concluir, clique em Save & Publish para gerar o código HTML. Copie o código HTML e insira em seu blog como um gadget HTML/JavaScript:

(clique na imagem acima para ampliar)
Caso você queira alterar ou parar de exibir a barra em seu blog, clique em Manage e na roda dentada da sua barra, clique em Edit para editá-la ou em Remove para removê-la do seu blog:

(clique na imagem acima para ampliar)
Gostou do serviço? Deixe nos comentários a sua experiência.

Nenhum comentário:

Postar um comentário