TEMA: Idioma
ARTIGO: Revisado e Melhorado
VERSÃO: WARC | WA 4
Olá Galera do bem!!
Penso assim, quando a idéia é boa por que não aproveitar?
Pois o artigo de hoje os créditos principais vão para Rafael Clares criador do código original, eu só fiz uma aplicaçãozinha.
Pois
hoje vamos ver como por umas bandeirinhas para mudar o idioma do site.
Muito bom para sites de hotéis, empresas de turismo, eventos
internacionais e etc e até mesmos músicos.
Então o
site vai ganhar umas bandeirinhas de países, e ao clicar nas
bandeirinhas o site vai traduzir para o idioma correspondente.
Obviamente conteúdos de vídeos, figuras, ou Textos que na verdade são figuras e ou os quais foram marcados no WebAcappella para Transformar o Texto em Imagens não serão traduzidos.
Outro detalhe importante que se deve observar é a área do texto ocupada para que não se transforme em frame e nem ficam encavalados sobre outros componentes do site. Pois em algumas linguagens a tradução ocupa muito mais espaço do que o texto na língua Brasileira.(isto no caso esteja usando algum sistema administrativo de conteúdo que utilize frames)
Mas tem uma boa notícia, se você usa sistemas de administração de conteúdo , visualmente o conteúdo mostrado no site é traduzido.
Primeiramente baixe o arquivo compactado
clicando aqui e descompacte.
Poste a pasta tradutor com seus respectivos arquivos para sua hospedagem:
Código para inserir no HEAD do site
<meta http-equiv="Content-Type" content="text/html;" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="tradutor/js/tradutor.js"></script>
<style>
#google_translate_element, .goog-te-banner-frame, .goog-te-balloon-frame, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-tooltip:hover { display:none !important; }
html, body { top: 0 !important; }
font { background: transparent !important; color: inherit !important; font: inherit !important; }
font:hover, .goog-text-highlight:hover, .goog-text-highlight { -webkit-box-shadow: inherit !important; -moz-box-shadow: inherit !important; box-shadow: inherit !important; box-sizing: inherit !important; -webkit-box-sizing: inherit !important; -moz-box-sizing: inherit !important; }
.topo-box-bandeira{display:inline-block}
</style>
Para utilizar as bandeiras na horizontal utilize este código:
<body>
<div id="google_translate_element"></div>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<center><div class="topo-box-idioma">
<div class="topo-box-bandeira">
<a href="javascript:void(0)" class="pt" onclick="ChangeLang('pt')" title="Traduzir para português"><img src="tradutor/images/portugues.gif" border="0" alt="Portugues" /></a>
</div>
<div class="topo-box-bandeira">
<a href="javascript:void(0)" class="en" onclick="ChangeLang('en')" title="Translate to English"><img src="tradutor/images/english.gif" border="0" alt="English" /></a>
</div>
<div class="topo-box-bandeira">
<a href="javascript:void(0)" class="es" onclick="ChangeLang('es')" title="Traducir al español"><img src="tradutor/images/espanol.gif" border="0" alt="Spanish" /></a>
</div>
<div class="topo-box-bandeira">
<a href="javascript:void(0)" class="it" onclick="ChangeLang('it')" title="Traduci in italiano"><img src="tradutor/images/italiano.png" border="0" alt="Italian" /></a>
</div>
<div class="topo-box-bandeira">
<a href="javascript:void(0)" class="de" onclick="ChangeLang('de')" title="Übersetzen in Deutsch"><img src="tradutor/images/alemao.png" border="0" alt="Deutsch" /></a>
</div>
<div class="topo-box-bandeira">
<a href="javascript:void(0)" class="fr" onclick="ChangeLang('fr')" title="Traduire en français"><img src="tradutor/images/frances.png" border="0" alt="French" /></a>
</div>
</div>
</body>
</html>
Para utilizar as bandeiras na vertical utilize este código:
<body>
<div id="google_translate_element"></div>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<br />
<div class="navbar">
<center><div class="navbar-inner">
<ul class="nav">
<li><a href="javascript:void(0)" class="pt" onclick="ChangeLang('pt')" title="Traduzir para português"><img src="tradutor/images/portugues.gif" border="0" alt="Portugues" /></a></li>
<li><a href="javascript:void(0)" class="en" onclick="ChangeLang('en')" title="Translate to English"><img src="tradutor/images/english.gif" border="0" alt="English" /></a></li>
<li><a href="javascript:void(0)" class="es" onclick="ChangeLang('es')" title="Traducir al español"><img src="tradutor/images/espanol.gif" border="0" alt="Spanish" /></a></li>
<li><a href="javascript:void(0)" class="it" onclick="ChangeLang('it')" title="Traduci in italiano"><img src="tradutor/images/italiano.png" border="0" alt="Italian" /></a></li>
<li><a href="javascript:void(0)" class="de" onclick="ChangeLang('de')" title="Übersetzen in Deutsch"><img src="tradutor/images/alemao.png" border="0" alt="Deutsch" /></a></li>
<li><a href="javascript:void(0)" class="fr" onclick="ChangeLang('fr')" title="Traduire en français"><img src="tradutor/images/frances.png" border="0" alt="French" /></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
IMPLANTANDO NO WEBACAPPELLA 4
Primeiramente deve ser inserido o código no head do site
Para isso selecione a opção no menu principal SITE>> PROPRIEDADES DO SITE
Na tela que se abrir clique no ícone da catraca
Insira o código do head logo no início do campo Código Html
Ná página que for inserir as bandeiras adicione um elemento HTML
Cole o código no último campo
Posicione e ajuste as dimensões na página conforme desejar.
IMPLANTANDO NO WEBACAPPELLA RC (v5 - responsive)
Primeiramente deve ser inserido o código no head do site
Logo na página inicial após abrir o projeto clicque em Website sttings
Rele a página até HTML custom code e clique em Edit Html Code
Cole logo no inicio o código do head fornecido no inicio deste artigo
Selecione o box onde deseja inserir as bandeiras.
Insira no box um componente HTML
Cole o código desejado no campo de código conforme imagem abaixo:
PERSONZALIZANDO
Esta é a parte no código referente a cada bandeira
class="
pt" onclick="ChangeLang('
pt')" title="
Traduzir para
português"><img src="tradutor/images/
portugues.gif"
border="0" alt="Portugues"
Então se quiser trocar o idioma escolhido faça as devidas substituições nas partes em negrito
Caso deseje trocar as bandeiras, substitua as imagens dentro da pasta /tradutor/images na hospedagem
Neste site você encontra bandeiras de todos os países em circulo.
http://aimore.net/bandeiras.htm
Prontinho.. Agora seu site tem bandeirinhas de idioma pra ficar traduzindo os textos.
Lembrando que a tradução segue o mesmo padrão do google Tradutor.
Uma boa semana a todos e grande abraço
