Shos Hide Widget Google Translator

Wodget Translator atau Translator Widget merupakan salah satu widget penting untuk di simpan di dalam Blog Kita ini...Namun Google Translator ini menambah beban ketika Blog Kita dimuat dalam keadaan Berat / Loadingnya berat ketika di akses kode Jsnya.


Tak perlu lama-lama lagi, kita langsung saja kamu cukup ikuti langkah - langkah di bawah ini dan lihat Gambar dari cara penerapannya ,,,, Langsung saja Cauuu

[DEMO]

• Copy / Paste kan Kode di bawah ini simpan di atas kode ]]></b:skin> atau </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;}

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

<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

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

SELAMAT MENCOBA....| Jangan Lupa Berkomentar ya.....

Share :

Tweet

✚

Related Post