Memasang Widget Google Translator Show Hide

Untuk memudahkan pengunjung blog dari beda negara memahami isi dari postingan disarankan sih memasang widget yang satu ini yaitu Google Translate di blog, widget ini sangat berguna sebagai penerjemah isi dari Postingan yang kita tampilkan didalam blog sebagai penambah trafik kunjungan organik luar negri tentunya. Namun kebanyakan dari Blogger jarang sekali memasang widget ini, mungkin dengan alasan dapat menambah beban loading pada blog.

Postingan sejenis ini juga pernah saya bahas sebelumnya yaitu Cara Memasang Google Website Translator di Blog namun yang kali ini sedikit berbeda dan ada beberapa modifikasi pemasangan yaitu menambahkan asynchronous di javascriptnya agar tidak menambah beban loading, karena dengan penambahan kode asynchronous di javascriptnya widget ini akan otomatis di muat setelah semua tampilan blog selesai sehingga beban loading tidak lambat dan tidak mempengaruhi widget ini akan tetap berjalan.

Di tampilan Widget ini juga akan dimodifikasi saat widget belum sempat ditampilkan kita akan menggantinya dengan div lalu akan kita sembunyikan widget translator ini menggunakan jquery, jadi jika ada pengunjung yang mau menggunakannya terlebih dahulu harus mengklik tombolnya seperti tampilan pada gambar animasi dibawah ini.

Bagaimana sobat tertarik untuk mencobanya, mari kita simak bersama Cara Memasang Widget Google Translator Show Hide berikut ini :


Langkah Pertama
Silahkan sobat salin kode CSS dibawah ini lalu letakkan diatas kode ]]></b:skin> atau di kode </style>

.translator-widget{position:relative;width:180px;padding:0;margin:0 auto}
.translator{position:absolute;top:0;left:0;text-align:center;width:100%;height:29px;line-height:29px;border:1px solid #333;background:#555;color:#efefef;cursor:pointer}
.translator:hover{background:#777}
.widget-translator{display:none;position:absolute;top:0;left:0;width:100%;height:29px;border:1px solid #333;background:#555;}
.close-translator{position:absolute;font-size:12px;color:red;top:6px;right:5px;cursor:pointer;font-weight:400;}
#google_translate_element{margin:2px 0 0 2px;}

Perhatikan kode yang ditandai, nanti kalau sobat mau pasang widget ini di sidebar untuk ukuran lebarnya bisa sampai 100% dan untuk menyesuaikan dengan lebar sidebar pada blog silahkan sobat ganti width:180px menjadi width:100%.


Langkah Ke Dua
Silahkan sobat salin kode jquery dibawah ini lalu letakkan diatas kode </body>

<script type='text/javascript'>
$(function() { 
    $(".translator").click(function () {
    $(".widget-translator").fadeIn();
});
    $(".close-translator").click(function() {
    $(".widget-translator").fadeOut();
});
 });
</script>

Langkah Ke Tiga
Silahkan sobat tambahkan kode HTML ini lalu letakkan bebas dimana sobat ingin memasang widget google translator ini, bisa juga di sidebar.

<div class='translator-widget'>
<div class='translator'>Translate This Blog</div>
<div class='widget-translator'>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'id', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true}, 'google_translate_element');
}
</script>
<script async="async" type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    <div class='close-translator' title='Close'>&#10006;</div>
 </div>
</div>

Perhatikan kode id yang ditandai silahkan sobat ganti kode negaranya dan sesuaikan dengan tampilan bahasa yang pertama kali ingin sobat tampilkan untuk melihat daftar kode negara sobat bisa lihat di Wikipedia.

RESULT Google Traslator

Demo

Lalu SAVE dan selesai, selamat mencoba.