Cara custom floating widget google translate

 بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ

 

Sekedar berbagi kode snippet floating widget (Google Translate) semisal dengan yang dipasang di blog ini. Adapun fitur translate cukup dibutuhkan karena yang demikian memudahkan orang lain yang tidak mengerti bahasa kita menjadi paham apa yang kita maksud (tentunya setelah tawfik dari Allah, biidznillah).

 

Walhamdulillah sekarang banyak kemudahan antum juga bisa cari custom style nya di google, blog ikhwah lain atau di codepen.io. (Untuk menambahkan di blogspot, masuk Dashboard Blogger, Pilih Tema / Template lalu klik Edit HTML, kemudian copy kode dibawah dan paste diatas kode tag </body> dan klik Simpan Tema / Save Template). Barokallahufiikum.

<div id='googleTranslate'>
<div class='posthidden' id='google_translate_element'/>
   <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/>
      <script type='text/javascript'>
        function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'id'}, 'google_translate_element');
      }
   </script>
   <ul>
      <li class='translate-toggle'><a href='javascript:expandcollapse('google_translate_element')' title='Translate'>Translate</a></li>
   </ul>
</div>
<style>
   .posthidden {display:none}
   .postshown {display:inline}
   .translated-ltr{margin-top:-40px;}
   .translated-ltr{margin-top:-40px;}
   .goog-te-banner-frame {display: none;margin-top:-20px;}
   .goog-logo-link {
   display:none !important;
   } 
   .goog-te-gadget{
   color: transparent !important;
   }
   #googleTranslate{
   position:fixed;
   bottom:0;
   left:0;
   transition:left .5s linear;
   z-index:+99999999999999999999;
   }
   .translate-toggle a {
   display:block;
   width: 2.5em;
   height: 2.5em;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4RTY3MTQ2QUEyQTAxMUUzODE2MUYwMEFENDUyM0VDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4RTY3MTQ2QkEyQTAxMUUzODE2MUYwMEFENDUyM0VDNCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjhFNjcxNDY4QTJBMDExRTM4MTYxRjAwQUQ0NTIzRUM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhFNjcxNDY5QTJBMDExRTM4MTYxRjAwQUQ0NTIzRUM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+BTosqwAAC+RJREFUeNrMWWt0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);
   background-repeat: no-repeat;
   text-indent: -999em;
   overflow: hidden;
   }
</style>
<script type='text/Javascript'> 
   function expandcollapse (postid) { 
   
      whichpost = document.getElementById(postid); 
      
      if (whichpost.className=="postshown") { 
         whichpost.className="posthidden"; 
      } 
      else { 
         whichpost.className="postshown"; 
      } 
   } 
</script>

Demikian, Semoga bermanfaat dan Semoga Allah memberi kita tawfik.

اَللّٰهُ أَعْلَم‎