分類: 網頁設計

<div id="google_translate_element"></div><script type="text/javascript">

function googleTranslateElementInit() {

new google.translate.TranslateElement({pageLanguage: 'zh-TW', includedLanguages: 'en,ja,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');

}

</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

想拿掉小icon可以增加css

<style type="text/css">
	#google_translate_element img {
		display: none;
	}
</style>

如果想客製化自己的外觀 可參考

<div id="google_translate_element"> </div>
<div class="menu-traslate-header">
<ul>
  <li><a href="#googtrans/en">English</a></li>
  <li><a href="#googtrans/zh-TW">繁體中文</a></li>
  <li><a href="#googtrans/zh-CN">簡體中文</a></li>
  <li><a href="#googtrans/es">Español</a></li>
  <li><a href="#googtrans/vi">Việt</a></li>
  <li><a href="#googtrans/ru">Русский</a></li>
  <li><a href="#googtrans/sq">SHQIP</a></li>
  <li><a href="#googtrans/km">ខ្មែរ</a></li>
  <li><a href="#googtrans/fr">Français</a></li>
  <li><a href="#googtrans/ar">عربي</a></li>
</ul>
</div>
 <script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en', 
    includedLanguages: 'ar,en,es,fr,km,ru,sq,vi,zh-CN', 
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE, 
    multilanguagePage: true, 
    gaTrack: true, 
  }, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
 <script type="text/javascript">
jQuery(document).ready(function($) {
  $('.menu-traslate-header ul li a').click(function(event) {
      window.location = $(this).attr('href');
      location.reload();
  });
});
</script>

資料來源: https://neohsuxoops.blogspot.com/2018/12/googlejs.html
資料來源: https://stackoverflow.com/questions/10486833/implementing-google-translate-with-custom-flag-icons/12999313#12999313