Show Hide Google Translator Widget

Salah satu widget yang penting untuk disimpan di blog adalah widget translator atau widget untuk menerjemahkan bahasa yang digunakan di blog ke bahasa lain yang didukung widget tersebut agar sesuai dengn bahasa pengunjung blog. 

Salah satu widget translator yang bisa kita simpan di blog adalah Google Translator. Namun widget Google Translator ini menambah beban ketika blog dimuat atau cukup berat loadingnya ketika mengakses kode js-nya. Oleh karena itu banyak blog yang tidak menggunakan widget ini.

Untuk itu saya mencoba menambahkan asynchronous pada javascriptnya agar dapat dimuat setelah blog selesai dimuat sehingga tidak menambah beban loading blog dan ternyata widget tetap berjalan normal.

Untuk memanipulasi tampilan widget translatornya ketika widget belum dimuat, saya menggantinya dengan div dan menyembunyikan widgetnya dengan jquery. Untuk memunculkan widgetnya maka div harus di klik seperti gambar gif di bawah ini.

Show Hide Google Translator Widget


Bagaimana tertarik untuk mencobanya? Silahkan ikuti langkah-langkahnya di bawah ini.

Silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>

Kode CSS

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

Kemudian tambahkan kode jquery di bawah ini dan simpan di atas kode </body>

JavaScript

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

Dan silahkan gunakan kode HTML di bawah ini, silahkan simpan di mana Anda ingin menampilkan widgetnya.

HTML

<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>

Untuk pengguna blog yang bukan bahasa Indonesia, silahkan ganti kode id pada pageLanguage di atas sesuai dengan bahasa blog Anda, misalnya untuk blog Vietnam silahkan ganti dengan vi

Jika Anda menyimpannya di gadget sidebar, Anda bisa mengganti lebar widgetnya menjadi 100% agar lebarnya sesuai dengan lebar sidebar. Silahkan ganti kode width:180px pada class translator-widget menjadi width:100% pada kode CSS di atas. 

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments