Memasang Widget Google Translator Show Hide

Untuk memudahkan pengunjung blog dari beda negara memahami isi dari postingan disarankan sih memasang widget yang satu ini yakni Google Translate di blog, widget ini sangat memiliki kegunaan 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 aku bahas sebelumnya yakni Cara Memasang Google Website Translator di Blog namun yang kali ini sedikit berbeda dan ada beberapa modifikasi pemasangan yakni menambahkan asynchronous di javascriptnya biar tidak menambah beban loading, sebab dengan penambahan arahan asynchronous di javascriptnya widget ini akan otomatis di muat setelah semua tampilan blog simpulan sehingga beban loading tidak lambat dan tidak mensugesti widget ini akan tetap berjalan.

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

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


Langkah Pertama
Silahkan sahabat salin arahan CSS dibawah ini lalu letakkan diatas arahan ]]></b:skin> atau di arahan </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 arahan yang ditandai, nanti kalau sahabat mau pasang widget ini di sidebar untuk ukuran lebarnya mampu hingga 100% dan untuk menyesuaikan dengan lebar sidebar pada blog silahkan sahabat ganti width:180px menjadi width:100%.


Langkah Ke Dua
Silahkan sahabat salin arahan jquery dibawah ini lalu letakkan diatas arahan </body>

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

Langkah Ke Tiga
Silahkan sahabat tambahkan arahan HTML ini lalu letakkan bebas dimana sahabat ingin memasang widget google translator ini, mampu 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 arahan id yang ditandai silahkan sahabat ganti arahan negaranya dan sesuaikan dengan tampilan bahasa yang pertama kali ingin sahabat tampilkan untuk melihat daftar arahan negara sahabat mampu lihat di Wikipedia.

RESULT Google Traslator

Demo

Lalu SAVE dan selesai, selamat mencoba.