Modifikasi Dan Solusi Mengatasi Loading Google Website Translator

Sebenarnya translator tool sangat diharapkan apabila pengunjung yang tiba ke blog berasal dari banyak sekali negara. Saya sendiri sudah mencoba beberapa translator tool, namun hambatan pada loading blog dan tampilan translator tool yang sangat mencolok dengan desain tema blog maka aku memutuskan untuk tidak memakai translator tool.

Salah satu translator tool yang aku coba yakni Google Website Translator. Dibanding dengan translator tool lainnya, Google Website Translator cukup anggun dalam menerjemahkan isi website. Untuk itu aku terus mencoba untuk mengutak-ngatik translator yang satu ini dan kesannya behasil.

Masalah pada Google Website Translator ini berdasarkan aku ada beberapa di antaranya:

Namun sebelum momodifikasi serta mengatasi loading dari Google Website Translator ini, silahkan buat dulu Google Website Translator untuk blog Anda sendiri DI SINI, pilih Display mode: Dropdown Only lalu copy kodenya.

1. Tampilan
Tampilan default-nya berdasarkan aku tidak sanggup menyatu dengan tampilan blog dengan logo Google di samping kiri tombol yang cukup mencolok, sanggup dilihat pada gambar di bawah ini.

Tampilan tersebut sanggup kita modifikasi dengan merubah warna background, warna border, warna tulisan, dan menghilangkan logo Google menyerupai gambar di bawah ini. Serta yang cukup mengganggu tampilan blog yakni munculnya navbar Google Translator di atas blog.

Untuk merubahnya, silahkan gunakan arahan css di bawah ini:
1.1. Untuk menghilangkan Navbar dan logo Google:

 .goog-te-banner-frame.skiptranslate,.goog-te-gadget-simple img,img.goog-te-gadget-icon {
     display: none !important;
     }

1.2. Untuk merubah tampilan tombol:

 .goog-te-gadget-simple{
     display: inline-block;
     font-weight: 400;
     line-height: 1.8;
     padding:0 6px;
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
     -ms-touch-action: manipulation;
     touch-action: manipulation;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     background-color:#f3f3f3!important;
     background-image: none;
     border-left: 1px solid #ddd!important;
     border-top: 1px solid #ddd!important;
     border-bottom: 1px solid #ddd!important;
     border-right: 1px solid #ddd!important;
     border-radius: 4px;
 }

Di sini Anda sanggup mengatur background tombol (background-color:), warna border (border-left, border-top, border-bottom, border-right), atau garis lengkung tombol (border-radius).

1.3. Merubah warna goresan pena dan ikon toggle:

 .goog-te-menu-value span {
     margin-right:5px!important;
     color:#666!important;
 }
 .goog-te-menu-value {
     margin-right: 0!important;
 }

1.4. Untuk menghilangkan box shadow pada daftar bahasa yang muncul dikala tombol diklik:

 .goog-te-menu-frame{
   box-shadow:none!important;
 }

1.5. Untuk menghilangkan jarak body blog ke tepi atas.
Karena navbar translator dihilangkan, biasanya ini akan meninggalkan ruang kosong di atas blog yang cukup mengganggu.

 body{top:0!important}

Nah semua arahan CSS di atas silahkan simpan di atas kode ]]></b:skin>

2. Loading Google Website Translator
Google Website Translator ini menyumbangkan beban loading pada blog yang cukup terasa dikala js-nya dimuat peramban alasannya menjadikan blocking render js. Untuk itu gunakan arahan javascript di bawah ini dan simpan di atas arahan </body>

 <script>
 //<![CDATA[
 function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'id', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
 };
 function downloadJSAtOnload(){var e=document.createElement("script");e.src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
 //]]>
 </script>

Kode yang aku marking kuning silahkan sesuaikan dengan arahan dari javascript yang didapat dari Google Website Translator yang Anda buat tadi untuk blog Anda.

Kemudian simpan arahan di bawah ini di daerah di mana Anda ingin menampilkan tombol Google Website Translator.

<div id="google_translate_element"></div>

Sekarang silahkan coba loading pada demo JsFiddle ini, atau pada blog ini (saya pasang di bawah blog, kalau aku tidak menghapusnya hehehe).


Sumber https://www.kompiajaib.com/

Share this post