Tradutor personalizado para blog com bandeiras

Posted by LucaSs™ - -

Aqui no meu blog e utilizo um tradutor (conforme você pode observar) com bandeirinhas. Existe uma ferramenta do Google que você pode inserir no blog. É muito completo e traduz para os idiomais mais conhecidos do mundo. Masss.....se você quer a bendida bandeirinha para que o querido estrangeiro clique e traduza seu conteúdo, além de tudo seja completamente personalizável, vamos fazer. É bem facinho e você entenderá o funcionamento.

> As bandeirinhas
A primeira coisa que você irá precisar ter são as bandeirinhas. Como eu sou um cara legal (rs), disponibilizo aqui as bandeirinhas já hospedadas na web. Estão em um blog de arquivos que tenho, podem usar o link original da imagem, não tem problema.

 - Italiano 
 - Japones
 - Holandês
 - Português (Portugal)
 - Rússo
 - Inglês EUA
 - Alemão
 - Grego
 - Espanhol
 - Francês
> Estrutura HTML e CSS
Bom, para cada bandeirinha, você irá utilizar um endereço de imagem, um título  e um link. Conforme o código abaixo:
<div style="color: #c6c6c6; font-family: "Arial"; width: 160px; float: left; position: relative;">
Translate
<!--INGLES-->
<a href="ENDEREÇO DO BLOG TRADUZIDO" title="TITULO"><img src="IMAGEM" /></a>
</div>
  • IMAGEM - É o endereço da imagem da bandeira. Como eu já disponibilizei aqui no blog as bandeirinhas, basta você clicar nelas (para mostrá-las sozinhas no navegador) e copiar o endereço da iamgem.
  • TÍTULO - Será mostrado quando se passar o mouse sobre a bandeira. É legal você colocar o título traduzido de acordo com o idioma da bandeira.
  • ENDEREÇO DO BLOG TRADUZIDO - Esta opção é a mais importante, vamos aprender a seguir.

> Traduzindo
Agora vamos traduzir o blog. Mas fique tranquilo! O Google Translate faz isso pra você!

Acesse o Google Translate.

Insira o URL do seu blog, selecione o idioma do seu blog (à esquerda) e o idioma que deseja traduzir (à direita). Clique em Traduzir.


Será mostrado o seu blog traduzido. Copie o endereço que aparecerá no seu navegador.


 Vá mudando as opções de idiomas conforme você deseja, copiando o endereço do blog traduzido e adicionando no código do seu tradutor.

Exemplo final:
<div style="color: #c6c6c6; font-family: "Arial"; width: 160px; float: left; position: relative;">
Translate
<!--INGLES-->
<a href="http://translate.google.com/translate?js=y&prev=_t&hl=pt-BR&ie=UTF-8&u=jhonnymoraes.blogspot.com&sl=pt&tl=en&history_state0=" title="English"><img src="http://imagem.gif" /></a>

<!--ESPANHOL-->
<a href="http://translate.google.com/translate?js=y&prev=_t&hl=pt-BR&ie=UTF-8&u=jhonnymoraes.blogspot.com&sl=pt&tl=es&history_state0=" title="Espanol"><img src="http://imagem.gif" /></a>
</div>
> Dentro do Blogger 

Acesse a aba "Design / Elementos de Página" e clique em "Adicionar Gadget" . Escolha o gadget HTML / Javascript e clique em  para adicioná-lo. Dentro do campo que apareceu, cole o código e salve. Depois visualize o template para ver como ficou.

Leave a Reply