[Blogger] - Como adicionar um botão de notificação no final dos artigos no Blogger

Olá querido leitor, no artigo de hoje eu atenderei ao pedido do leitor Samuel, e mostrarei a você como inserir um botão de notificação no rodapé de todos os seus artigos, onde você poderá solicitar que seus leitores lhe avisem caso o artigo esteja desatualizado, com erros de gramática, ou qualquer outro motivo que você julgar importante — assim como o botão que eu estou usando nesse exato momento no rodapé dos artigos do blog.

Inserindo os códigos para gerar a frase e o botão


Antes de começar a instalar esse recurso, é importante que você possua um formulário de contato que será usado unicamente para o funcionamento desse recurso — você pode usar seu formulário de contato padrão caso queira, mas aconselho que você separe as coisas. Caso você não tenha um formulário de contato, leia o artigo: Como colocar um formulário de contato em um blog, para saber como criar um; caso você já tenha um formulário, basta seguir os passos descritos abaixo.

1. Primeiramente iremos adicionar a estrutura do recurso, que conterá uma frase e um link para o formulário. Para isso, faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

<div class='post-footer-line post-footer-line-3'><span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span> </div>
</div>
</div>


...caso não encontre o código acima, tente procurar por esse outro código:

<div class='post-footer-line post-footer-line-3'/>
</div>


NOTA: repare que se você estiver usando um template que não tenha sido criado pelo Blogger, você poderá não encontrar os códigos citados acima. Nesse caso você deverá localizar o código que indica o rodapé dos artigos do seu blog.

3. Ao encontrar um dos códigos que foram informados acima — ou o código referente ao rodapé dos artigos no seu template —, adicione este outro código logo abaixo dele:

<b:if cond='data:blog.pageType == "item"'>
<div id='update-box'>
As informações contidas neste artigo estão desatualizadas? <a class='update-link' href='javascript:window.open('LINK-DIRETO-DO-SEU-FORMULÁRIO-DE-CONTATO', 'blank','scrollbars=yes,toolbar=no,width=700,height=500')'>Notifique-me!</a>
</div>
</b:if>


...a parte destacada em azul deve ser substituída por uma frase que lhe agrade, e a parte destacada em vermelho, deve ser substituída pelo link direto do seu formulário de contato. Note que ao clicar no link, o formulário de contato se abrirá em uma janela pop-up, sendo assim, você pode alterar o tamanho da janela mudando os valores destacados em rosa: width e height, largura e altura, respectivamente. A frase do link pode ser alterada mudando a parte destacada em roxo.

NOTA: caso você tenha criado seu formulário através do site Wufoo, você poderá pegar o link direto dele clicando sobre a opção "Code" do formulário, e escolhendo o primeiro link da opção "Permanent Shortlink URL".

4. Após ter feito as substituições como deseja, clique sobre o botão Visualizar modelo e, se estiver tudo certo, clique sobre o botão Salvar modelo. A partir desse momento o recurso já estará disponível e em funcionamento no rodapé dos artigos de seu blog.

Customizando o recurso de notificação com estilos CSS


Embora o recurso já esteja funcionando, é importante que você dê um destaque a ele para chamar a atenção de seus leitores. Portanto, nos passos descritos abaixo, você verá como adicionar estilos CSS para customizar a fonte e a cor do recurso.

1. Ainda no menu Modelo, pressione Ctrl+F novamente para abrir a janela Localizar do navegador, e procure o código abaixo.

]]></b:skin>

2. Imediatamente acima desse código, adicione esse outro código:

/* ----- CSS do Recurso de Notificação ----- */

div.update-box {
font: normal normal 12px Arial, serif, sans-serif; /* customização da fonte do recurso */
color: #000000; /* cor da fonte do recurso */
background: #EEEEEE; /* cor de fundo do recurso */
border: 1px solid #DDDDDD; /* customização da borda do recurso */
padding: 10px;
}


  • Font
Essa propriedade é responsável por adicionar estilos à fonte (texto) do recurso de notificação. Caso você queira que o texto fique automaticamente em itálico, mude o primeiro "normal" para "italic"; se você quiser que o texto apareça automaticamente em negrito, mude o segundo "normal" para "bold". Você pode alterar também o tamanho do texto, mudando o valor "12" e a fonte do texto, mudando o nome "Arial" para outro que você queira.
  • Color
Essa propriedade é responsável por adicionar a cor da fonte (texto), o valor "#000000", representa a cor preta, mas você pode mudá-lo para qualquer outra cor que desejar, basta informar o código hexadecimal da cor que você quer.
  • Background
Essa propriedade é responsável por adicionar a cor de fundo ao recurso. Você pode mudar a cor de fundo para a que mais lhe agradar, basta inserir o código hexadecimal da cor que você quer — o código "#EEEEEE" se refere a um cinza claro.
  • Border
Essa é a propriedade responsável por adicionar uma borda ao redor da tag. O valor "1" informa a grossura da borda, o valor "solid" indica o tipo de borda (veja a tabela abaixo) e, por fim, você pode escolher também a cor da borda alterando o código hexadecimal da mesma.

Estilos de bordas disponíveis
Valor Estilo Demonstração
solid borda sólida                                         
dashed borda tracejada                                         
dotted borda pontilhada                                         
double borda dupla                                         

Caso você tenha conhecimentos sobre CSS você poderá alterar o código como achar melhor. Você pode alterar as cores como bem desejar mudando o código hexadecimal das mesmas de acordo com essa tabela de cores.

3. Após alterar o código como achar melhor, clique sobre o botão Visualizar modelo e, se estiver tudo certo, clique sobre o botão Salvar modelo. Pronto, a partir desse momento o recurso já estará disponível e com um destaque adequado para a sua importância. Caso queira saber como transformar o link do formulário de contato em um botão, leia o artigo: Como transformar links em botões utilizando CSS3 no Blogger.

E se você tem interesse em melhorar a experiência de leitura dos seus artigos, por parte dos leitores, não deixe de ler também os artigos citados abaixo:
Gostou do artigo, achou ele útil ou ficou com dúvidas, sinta-se a vontade para participar postando um comentário. E se tiver alguma sugestão de artigo, faça como o leitor Samuel e envie-a para nós!
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 3 comentários neste artigo!

  1. Não conseguir achar esse código, achei só que é o 1 e o2

    ResponderExcluir
    Respostas
    1. Olá Giso, cada template possui uma codificação diferente, então depende do template que você está utilizando. Por favor, informe o endereço do blog aonde você está tentando implantar o recurso para que eu dê uma olhada.

      Excluir
  2. :o
    Choquei com o código! Ainda não tentei colocar, mas é realmente útil!

    ResponderExcluir