Instalando o Google Translate com Bandeiras

Instalando Google Translate com Bandeiras

Esse Tutorial foi Baseado no Tutorial do blogspottutorial no qual eu fiz algumas modificações.

Nesse Tutorial, irei mostrar a vocês como instalar o Google Translate Bandeira, tutorial no qual me baseei

em um tutorial do blogspottutoria em que fiz algumas adaptações. Colocarei aqui os dois modos o do blogspottutoria e o que eu fiz.

Obs: O Código dele esta para a tradução do Inglês para outras Línguas, e eu coloquei o Português para outras Línguas.

Vamos Lá.

Veja ilustração abaixo, por favor, aponte o mouse sobre as imagens das bandeira de modo que você vai encontrar o efeito de borrão, como um resultado atraiu:






Se você está interessado em instalar o widget, então você deve fazer os passos a seguir:


Entre em seu blogger com seu ID
Click em Layout
Click na Guia Elemento de Paginas
Click em Adicionar um Gadget

Clique no sinal de mais (+) para HTML / JavaScript




Copie e cole o código do Google Translate para a área disponível.
<style> .google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; border:0; } </style> <div> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cen&en=pt&en=UTF8'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCY5PodeMrqz4ZlvNZhpWVILwKeqt1yvpDIuk2Lg8lZ3M0qdcjczDT_Z2T8eKvvG7a6EhPI2WQfVOzYbCK99EAW6TxovGkOro-skOuk9wDGXi93dPVxbt0kg8sL3taEJKOx0qaQ5tnwgE/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cfr&hl=pt&ie=UTF8'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhysaGIbsecyCUbIYUGd8QVQE7bRAjyxlg3Nx4HHd3BK8A47K8fTIuOpbY91zNLqGyV3h5uIy0o0s2tvKTfGgHHBsVmsO6_y-AHZUrtTww6xBERRrGHl6j-2Q4HuR7zjtuuwOF17X5986o/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cde&hl=pt&ie=UTF8'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixiFcQiaPDxP1WVftZ3uJJKv_bbOcGwAT0068PaMbLkB1fVaHW9qEGnza4EWkj8yC5lQuu98-MwDO9sO3ajVPLTxFUAFieiKXYD2kson0QTg5WvWP0DA93_IzPduAgp_39kvxFh0PeMb2I/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Ces&hl=pt&ie=UTF8'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ANpRvVBid4j_rqwjTEQs_vqLLjVhche29EKIfUHLY2q0VTAxAbTue7fOzRpaE58Dlts-yfOIrppqLZ5xc03VvVKuep7bZb1wKi1NhkTCq-WDt6jiIJRQE7J4siVx__A1CkKnQjj6Zyyy/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cit&hl=pt&ie=UTF8'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJOdkwlScvV75tWwZxIVf-CdoFi7ZeD2H9op-OQGrtgKCR71qTCVU64BOjSYstR95FKbjBLe-dF30KZ86oYGEQCUT23S9tyGgUZv8SnGmm7j8MllPrp9VX9WpHxbEvmXZzOx78-aSUVIg/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cnl&hl=pt&ie=UTF8'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHai1naOdqdZlX5yyxndwcOCXfi5FGfj5E_KQN1KciQPJlTaONP-h8mI_OXXiqaXjEv5XvlrhFAulikdb42nXZ6QtqE-7Ig7NAzkU0FHDP_Lbrv1UUqmNb4V4HyOj6NJjCV_xnGCz0LRE/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <br/><br/> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cru&hl=pt&ie=UTF8'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPYMxjyKDi4oz1BX_AC2jjnjQem1PN_z8wGA6xiI4pPa4eUjQrKRHXbiFoMEAHdwUvN0k9kfuzQ9xtDP7ij12qSGyvBzhaPpr60Br-1flT59ITJ7An_1YKkdC8MWxqRWme3hoqk-4mc4g/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cja&hl=pt&ie=UTF8'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBVr8IyaSoKVrwk7GHj5mNh_dM8Z3SyU8-2UpfZ1M6ywaFqxb68kST-KPqfbC-GGvtMTRcShldeS-lm_0JNJ6yhB_3BdMSv9_ldXgC3tDimaTbfHExMZJrtFhhYoTSUw-BEMa0mFKelccm/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cko&hl=pt&ie=UTF8'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVpvf40eHX-iEYEh0x0ifb0zILqacXusOEMTADO8DaAwMJV5mvw1nfQoNqu4z_-hSOV_ZdOCLrhWjaBWUzwgr8eoI8kuklzGYI4NjJeqJEXHeLbqKlEQvGjVAnipKQuU9ZC4XJd_d5d_M/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Czh-CN&hl=pt&ie=UTF8'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2apmTZgZYHKArfW4kGNfiwzppV0k3t9wQ2UxIotKHBtNMDf7YkTIeKHUJVjAm9j3n9XiaSOQgyA1btYv2sQBOJtAdm4-_IVpGnIk1S-Qztdo2mZwgT89FkPJY_euJ6ZBYCuF8Q7_kHb0/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> </div> <div style="font-size:10px;margin:10px 0px 3px 0px"> </div>
 
Click no Botão Salvar e Beleza já esta Pronto.




Agora vamos fazer o modelo que eu que eu desenvolvi com as Bandeiras em linha reta, Observe que eu retirei duas bandeira a do Brasil e da Arábia, pois achei desnecessário.





Siga o Mesmo Procedimento das etapas acima e coloque os Códigos abaixo:

<style> .google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; float:right; style=cursor:pointer;margin-right:70px; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; border:0; } </style> <div> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Czh-CN&hl=pt&ie=UTF8'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2apmTZgZYHKArfW4kGNfiwzppV0k3t9wQ2UxIotKHBtNMDf7YkTIeKHUJVjAm9j3n9XiaSOQgyA1btYv2sQBOJtAdm4-_IVpGnIk1S-Qztdo2mZwgT89FkPJY_euJ6ZBYCuF8Q7_kHb0/?imgmax=800" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Car&hl=pt&ie=UTF8'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRZtwN-4V4m-gQMI4BDOPV7kAFJhWd-6fP_V9K0JSMOvYUDGPYOybTUonWOA6xxn1qHF1xiZ97JoHkd-BhQnCeUOeqRh7qwzeFsSykqFnEN5sT7uMpbyqgdZX8ny-aDiPfs1rmxj7Dixk/?imgmax=800" style="cursor: pointer;margin-right:5px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cko&hl=pt&ie=UTF8'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVpvf40eHX-iEYEh0x0ifb0zILqacXusOEMTADO8DaAwMJV5mvw1nfQoNqu4z_-hSOV_ZdOCLrhWjaBWUzwgr8eoI8kuklzGYI4NjJeqJEXHeLbqKlEQvGjVAnipKQuU9ZC4XJd_d5d_M/?imgmax=800" style="cursor: pointer;margin-right:5px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cja&hl=pt&ie=UTF8'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBVr8IyaSoKVrwk7GHj5mNh_dM8Z3SyU8-2UpfZ1M6ywaFqxb68kST-KPqfbC-GGvtMTRcShldeS-lm_0JNJ6yhB_3BdMSv9_ldXgC3tDimaTbfHExMZJrtFhhYoTSUw-BEMa0mFKelccm/?imgmax=800" style="cursor: pointer;margin-right:5px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cnl&hl=pt&ie=UTF8'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHai1naOdqdZlX5yyxndwcOCXfi5FGfj5E_KQN1KciQPJlTaONP-h8mI_OXXiqaXjEv5XvlrhFAulikdb42nXZ6QtqE-7Ig7NAzkU0FHDP_Lbrv1UUqmNb4V4HyOj6NJjCV_xnGCz0LRE/?imgmax=800" style="cursor: pointer;margin-right:5px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cru&hl=pt&ie=UTF8'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPYMxjyKDi4oz1BX_AC2jjnjQem1PN_z8wGA6xiI4pPa4eUjQrKRHXbiFoMEAHdwUvN0k9kfuzQ9xtDP7ij12qSGyvBzhaPpr60Br-1flT59ITJ7An_1YKkdC8MWxqRWme3hoqk-4mc4g/?imgmax=800" style="cursor: pointer;margin-right:5px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cde&hl=pt&ie=UTF8'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixiFcQiaPDxP1WVftZ3uJJKv_bbOcGwAT0068PaMbLkB1fVaHW9qEGnza4EWkj8yC5lQuu98-MwDO9sO3ajVPLTxFUAFieiKXYD2kson0QTg5WvWP0DA93_IzPduAgp_39kvxFh0PeMb2I/?imgmax=800" style="cursor: pointer;margin-right:5px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cit&hl=pt&ie=UTF8'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJOdkwlScvV75tWwZxIVf-CdoFi7ZeD2H9op-OQGrtgKCR71qTCVU64BOjSYstR95FKbjBLe-dF30KZ86oYGEQCUT23S9tyGgUZv8SnGmm7j8MllPrp9VX9WpHxbEvmXZzOx78-aSUVIg/?imgmax=800" style="cursor: pointer;margin-right:5px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cfr&hl=pt&ie=UTF8'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhysaGIbsecyCUbIYUGd8QVQE7bRAjyxlg3Nx4HHd3BK8A47K8fTIuOpbY91zNLqGyV3h5uIy0o0s2tvKTfGgHHBsVmsO6_y-AHZUrtTww6xBERRrGHl6j-2Q4HuR7zjtuuwOF17X5986o/?imgmax=800" style="cursor: pointer;margin-right:5px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Ces&hl=pt&ie=UTF8'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ANpRvVBid4j_rqwjTEQs_vqLLjVhche29EKIfUHLY2q0VTAxAbTue7fOzRpaE58Dlts-yfOIrppqLZ5xc03VvVKuep7bZb1wKi1NhkTCq-WDt6jiIJRQE7J4siVx__A1CkKnQjj6Zyyy/?imgmax=800" style="cursor: pointer;margin-right:5px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cen&en=pt&en=UTF8'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCY5PodeMrqz4ZlvNZhpWVILwKeqt1yvpDIuk2Lg8lZ3M0qdcjczDT_Z2T8eKvvG7a6EhPI2WQfVOzYbCK99EAW6TxovGkOro-skOuk9wDGXi93dPVxbt0kg8sL3taEJKOx0qaQ5tnwgE/?imgmax=800" style="cursor:pointer;margin-right:5px;" width="24"/></a> </div> <!--Fecha header_tradução--> </div> <div align="right" style="font-size:10px;margin:10px 0px 3px 0px"> </div>



Pronto! Feito Isso é só Salvar e ir pro abraço.