Memasang Google Website Translator di Blog

Berawal dari rasa penasaran ketika 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 aneh yang intinya sih mereka agak kesulitan memahami bahasa postingan di blog ini adalah bahasa indonesia, alhasil aku coba memasang Google Website Translator di blog ini, namun kendala ditemukan loading blog menjadi berat tentu sangat mensugesti nilai SEO pada Blog ini.

Saya coba tanya-tanya di forum dan banyak juga komentar yang mengatakan bahwa tool Google Website Translator sebenarna tidak mensugesti loading blog, sebab Tools ini akan bekerja ketika ada perintah translate bahasa saja, namun hal berbeda yang aku alami setelah memasang tools Google Website Translator loading blog menjadi berat dan alhasil aku 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 sahabat yang ingin mencobanya silahkan di simak cara Memasang Google Website Translator di Blog.

Langkah Pertama

Silahkan sahabat 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 ibarat gambar dibawah ini 

Di tampilan gambar diatas menurut aku masih kurang enak dilihat sebab tampilannya terlihat tidak menyatu di blog sebab terdapat logo google di samping kirinya, tampilan tersebut alhasil aku modifikasi biar mampu menyatu dengan tampilan blog ibarat dibawah ini.

Untuk sahabat yang ingin mencobanya memodifikasi ibarat tampilan ke dua diatas silahkan salin instruksi 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 sahabat 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 jikalau 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 instruksi javascript dibawah ini letakkan diatas instruksi </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 instruksi yang ditandai silahkan sahabat ganti sesuia dengan instruksi yang didapat dari Google Website Translator yang sudah di salin sebelumnya di notepad. Kemudian sahabat silahkan salin kembali instruksi dibawah ini lalu letakkan di daerah yang akan sahabat tempatkan Google Website Translatornya.

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

Dan Selesai...Selamat mencoba