[Blogger] - Como adicionar um botão de notificação no final dos artigos no Blogger
Autor: Igor Sousa | Publicado: 2013-02-01T18:39:00-02:00

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.

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

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

&lt;div class='post-footer-line post-footer-line-3'/&gt;
&lt;/div&gt;

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:

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

...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.

]]&gt;&lt;/b:skin&gt;

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    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   
    dashed    borda tracejada    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   
    dotted    borda pontilhada    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   
    double    borda dupla    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   
 
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:
Você se preocupa com a experiência de leitura dos seus visitantes? - Hdblog
Melhore a leitura dos seus visitantes customizando seus textos - Hdblog
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!