Mostrando postagens com marcador IDIOMA. Mostrar todas as postagens
Mostrando postagens com marcador IDIOMA. Mostrar todas as postagens

24/02/2017

Bandeiras para tradução de idioma automático no website Webacappella



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&ecirc;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&ntilde;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="&Uuml;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&ccedil;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&ecirc;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&ntilde;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="&Uuml;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&ccedil;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&ecirc;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



http://www.webacappellashow.com.br/templates/wasrockinroll/




Related Posts Plugin for WordPress, Blogger...