Ditulis oleh: Ditulis pada: 12/02/2015
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.
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.
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).