Show Hide Google Translator Widget

One important widget to put on the blog is a translator widget or a widget to translate the language used in the blog into other languages ​​supported the widget to fit with less language blog visitors.
One translator widget which you can save on a blog is Google Translator. But Google Translator widget is adding to the burden when the blog is loaded or quite heavy loading when accessing its js code. Therefore many blogs that do not use these widgets.
For that I am trying to add the asynchronous javascript in order to be loaded once the blog is finished loading so as not to increase the burden of loading blog and turns widget continue to run normally.
Demo
Please copy the CSS code below and save the above code ]]></b:skin> or </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;}

Then add jquery code below and save the above code </body>

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

And please use the HTML code below, please save it where you want to display the widget.

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

For users who are not Indonesian blog, please replace the id code on PAGELANGUAGE above in accordance with the language of your blog, for example for blog Vietnam please replace with vi.

If you keep it in the sidebar gadgets, you can change the width of the widget to be 100% in order to fit the width of the sidebar width. Please replace the code width: 180px in-class translator widget becomes width: 100% in the CSS code above.

Remember add Jquery into your template
http://www.kompiajaib.com/2014/05/show-hide-google-translator-widget.html