Porém, como muitos, não curto nem um pouco aquela inscrição Tecnologia do Blogger que as templates do sistema impõem aos usuários e assim como muitos, opto por remover. Nada contra usar essa plataforma, apenas entendo que ali, cabe uma mensagem pessoal. Todavia, é preciso ter ciência que essa ação infringe uma regra de utilização do Blogger e com isso, quem assim age, pode sofrer sanções do Google, o que obviamente é extremamente inconveniente e deve ser evitado. Uma solução para driblar tal problema é, após essa remoção, incluir um selo do Blogger em outro ponto que entender mais adequado.
Entretanto, meu assunto aqui não é mais um tuto para remoção da tal frase (que existem aos montes pela net). O que quero compartilhar são duas formas para inclusão de um rodapé personalizado ao seu projeto, com imagens customizadas, via widget HTML e consequentemente, sem necessidade de alterações na template. A primeira e mais simples é através do código a seguir, que deve ser instalado por meio de um novo widget HTML e alocado no final do layout do blog;
<p align="center">
<table border="0" cellspacing="5" width="310" align="center"><tbody>
<tr>
<td valign="top" width="62"><a href="digite_aqui_sua_ URL"target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: inline; margin-left: 0px; border-top: 0px; margin-right: 0px; border-right: 0px" title="aqui escreva o que deseja que seja visualizado ao passar o mouse sobre a imagem" border="0" alt="" src="cole_aqui_o_endereço_da_imagem_desejada" width="1000" height="60" /></a> </td>
</tr>
</tbody></table>
</p>
As variáveis em vermelho são o que pode ser ajustado nesse código, como medidas da imagem e customização para suas informações. No caso das medidas, irão depender do formato da sua template versus o desenho que definiu para sua imagem, entrando ai a velha e boa, tentativa e erro para chegar ao ideal. A em azul abre o link associado, em uma nova aba do navegador. Caso deseje que abra na mesma página, altere essa para self.
Além disso, naturalmente, por se tratar de uma imagem, essa deve primeiramente ser hospedada na internet. Ainda que existam muitos serviços para esse fim, prefiro usar o próprio Blogger para manter as imagens que uso nos meus projetos e é algo bastante simples e prático de fazer;
- Crie uma nova postagem, dando um nome que faça referência a sua utilização, para prevenir uma exclusão acidental. Isso obviamente removeria a imagem ou imagens ali contidas;
- Inclua a imagem que deseja utilizar e salve a postagem sem NUNCA publicá-la. Essa deve ser mantida sempre em modo rascunho.
- Clique sobre a imagem em questão com o botão direito do mouse, navegue até Copiar endereço do link no menu recém carregado e clique nesse com o botão esquerdo do mouse. Com essa ação, o endereço é copiado para a área de transferência do sistema operacional;
- Finalmente, vá até o campo em que deseja incluir o endereço e tecle Ctrl V para colá-lo.
Aqui uma observação importante. Enquanto na primeira opção, as dimensões do arquivo de imagem possam ser facilmente ajustadas através do código, o que permite que seja criada (para esse caso), uma imagem maior que a efetivamente visualizada, com a opção seguinte isso não acontece e a imagem deve ser ajustada para as dimensões corretas (volta à tentativa e erro até encontrar a estética mais adequada), antes da transferência para a plataforma.
A segunda opção que também utiliza um widget é bem mais poderosa e se mostra perfeita para situações em que o usuário do blog deseja incluir dois ou mais links numa mesma imagem. Isso era bem simples nos primórdios da criação de sites, principalmente para quem usou o Microsoft ProntPage que tinha uma função super bacana de atribuir coordenadas a uma imagem qualquer e transformando-as num link. E é exatamente isso o que o Image-Maps faz. Outra excelente aplicação para esse app online é a criação de uma assinatura de e-mail pessoal, que uso aqui (acima) para exemplificar as possibilidades dessa ótima e gratuita ferramenta.
O app
Para usar o Image-Maps, e necessário um cadastro que pode ser feito rapidamente via e-mail ou rede social. Depois de feito o login, clique no ícone do Image-Maps no canto superior direito para ser direcionado à página inicial. Nessa, clique no botão Browse for File e localize no computador, a imagem que deseja trabalhar. Ao concluir a inclusão, o botão Start Mapping surge. Aguarde enquanto o app faz a carga da imagem. Quando essa surgir, clique em click to continue (abaixo).
Aqui, uma mensagem em amarelo aparecerá junto. Clique em close para prosseguir.
Em seguida, clique sobre a área de trabalho do Image-Maps com o botão direito do mouse. No menu que surge, clique na primeira opção Create Rect com o botão esquerdo do mouse para iniciar a seleção da área retangular (nesse caso) em que deseja o link.
Agora associe essa área ao endereço desejado, informando-o no primeiro campo Map URL do menu que aparece nessa etapa (imagem abaixo). No campo Title, escreva o que deseja que seja visualizado ao passar o mouse sobre a imagem. Ao final clique em Save nesse menu.
No passo seguinte, a área definida deve aparecer marcada em vermelho. Nesse ponto, clique novamente com o botão direito do mouse sobre a área do Image-Maps e clique com o esquerdo sobre a opção Save Map para salvar o projeto. Em seguida, ainda sobre a área de trabalho do app, clique com o botão direito do mouse e selecione Get Code para obter o código HTML desse projeto. Selecione a guia HTML Code, navegue com scroll para baixo até encontrar o código. Copie e cole onde deseja utiliza-lo.
O código a seguir, foi o gerado pelo app que logicamente será diferente conforme suas informações. No entanto, esse pode ser facilmente adicionado ao Blogger, como rodapé com um simples widget HTML.
Por padrão, o código criado com o Image-Maps coloca as imagens à esquerda, o que no caso de uma assinatura de e-mail, funciona bem. Já para utilização como uma mensagem de rodapé, essa pode ser mais interessante centralizada. Para isso, acrescente no inicio desse código <center> e no final </center>. Isso sem qualquer espaçamento.
