Memasang Google Website Translator di Blog

Berawal dari rasa penasaran saat mengecek trafik blog di Google Analytics ternyata banyak juga pengunjung organik dari negara lain yang mengunjungi blog dibalik seo ini, dan ada beberapa juga yang bertanya melalui email menggunakan bahasa asing yang intinya sih mereka agak kesulitan memahami bahasa postingan di blog ini yaitu bahasa indonesia, akhirnya saya coba memasang Google Website Translator di blog ini, namun kendala ditemukan loading blog menjadi berat tentu sangat mempengaruhi nilai SEO pada Blog ini.

Saya coba tanya-tanya di forum dan banyak juga komentar yang mengatakan bahwa tool Google Website Translator sebenarna tidak mempengaruhi loading blog, karena Tools ini akan bekerja saat ada perintah translate bahasa saja, namun hal berbeda yang saya alami setelah memasang tools Google Website Translator loading blog menjadi berat dan akhirnya saya putuskan untuk tidak memasangnya kembali.

Di postingan kali ini akan dibahas Cara Memasang Google Website Translator di Blog yang sudah di modifikasi baik loading maupun tampilannya, bagi sobat yang ingin mencobanya silahkan di simak cara Memasang Google Website Translator di Blog.

Langkah Pertama

Silahkan sobat buat terlebih dahulu Google Website Translator Tools untuk blog DISINI lalu pilih Display mode: Dropdown Only dan silahkan salin di notepad kodenya nantinya akan tampil seperti gambar dibawah ini 

Di tampilan gambar diatas menurut saya masih kurang enak dilihat karena tampilannya terlihat tidak menyatu di blog karena terdapat logo google di samping kirinya, tampilan tersebut akhirnya saya modifikasi agar bisa menyatu dengan tampilan blog seperti dibawah ini.

Untuk sobat yang ingin mencobanya memodifikasi seperti tampilan ke dua diatas silahkan salin kode CSS berikut ini

Kode untuk merubah atau menghilangkan Logo Google dan Navbar

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

Kode untuk merubah tampilan pada tombolnya

.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;
}

Silahkan sobat atur warna background tombolnya (background-color:) warna bordernya (border-left:, border-top:, border-bottom:, border-right:, border-radius:)

Cara Merubah warna tulisannya dan ikon toggle :

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

Cara Menghilangkan Box Shadow di daftar bahasa yang akan tampil jika di klik

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

Jika ingin menghilangkan jaraknya body blog ke pojok atas

body{top:0!important}

Langkah Ke Dua
Untuk Mempercepat loading Google Website Translator di Blog silahkan salin dan gunakan kode javascript dibawah ini letakkan diatas 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>

Perhatikan kode yang ditandai silahkan sobat ganti sesuia dengan kode yang didapat dari Google Website Translator yang sudah di salin sebelumnya di notepad. Kemudian sobat silahkan salin kembali kode dibawah ini lalu letakkan di tempat yang akan sobat tempatkan Google Website Translatornya.

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

Dan Selesai...Selamat mencoba