Modifikasi Dan Solusi Mengatasi Loading Google Website Translator

Modifikasi Dan Solusi Mengatasi Loading Google Website Translator

Bola Hero Gawai

Modifikasi Dan Solusi Mengatasi Loading Google Website Translator

Google Website Translator
Sebenarnya translator tool sangat diperlukan apabila pengunjung yang datang ke blog berasal dari berbagai negara. Saya sendiri sudah mencoba beberapa translator tool, namun kendala pada loading blog dan tampilan translator tool yang sangat mencolok dengan desain tema blog maka saya memutuskan untuk tidak menggunakan translator tool.

Salah satu translator tool yang saya coba adalah Google Website Translator. Dibanding dengan translator tool lainnya, Google Website Translator cukup bagus dalam menerjemahkan isi website. Untuk itu saya terus mencoba untuk mengutak-ngatik translator yang satu ini dan akhirnya behasil.

Masalah pada Google Website Translator ini menurut saya 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 kemudian copy kodenya.

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

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

Google Website Translator
Untuk merubahnya, silahkan gunakan kode 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 bisa 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 tulisan 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 ketika 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 kode 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 ketika js-nya dimuat peramban karena menyebabkan blocking render js. Untuk itu gunakan kode javascript di bawah ini dan simpan di atas kode </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 saya marking kuning silahkan sesuaikan dengan kode dari javascript yang didapat dari Google Website Translator yang Anda buat tadi untuk blog Anda.

Kemudian simpan kode di bawah ini di tempat 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, jika saya tidak menghapusnya hehehe).

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×