Install the Google Translate Widget

Installing the Google Translate Widget on the Blog - I often find websites that install translate widgets with styles of flags from various countries that function to translate a page into a particular language and in blogger itself already has a default widget Google Translate with the same function with 3 different styles namely Vertical , Horizontal and Drop Down.

Well this time I will share this Google Translate widget with a different style that you can install in the sidebar or footer section of the blog. Here's how to apply it:

Open your blogger> Layout> Then click on Add Gadget> Click HTML / JavaScript> Copy and apply all the code below in it> Save the widget.

<style type="text/css">
#translator-wrapper {
  display:block;
  width:90%;
  max-width:300px;  
  border:none;  
  background-color:#fff;
  color:#444;
  overflow:hidden;
  position:relative;
  height:40px;
  line-height:40px;
  border:1px solid #e0e0e0;
}
#translator-wrapper select {
  border:none;
  background:transparent;
  font-family:'Verdana',Arial,Sans-Serif;
  font-size:12px;
  width:100%;
  color:#444;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-appearance:none;
  cursor:text;
  padding:5px 10px;
}
#translator-wrapper a,
#translator-wrapper a:hover {
  display:block;
  background-color:#4791d2;
  border:none;
  color:#fff;
  margin:0 0;
  text-decoration:none;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  cursor:pointer;
  width:14%; 
  transition:all 0.3s ease;  
}
#translator-wrapper a:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border:6px solid transparent;
  border-left-color:white;
  position:absolute;
  top:50%;
  left:45%;
  margin-top:-5px;
}
#translator-wrapper a:hover {opacity:0.9;}
#translator-wrapper a:active {opacity:0.9;}
#translator-wrapper select:focus,
#translator-wrapper a:focus,
#translator-wrapper select:active,
#translator-wrapper a:active {
  border:none;
  outline:none;
  cursor:pointer;
}
option {
  background:#444;
  color:#e0e0e0;
}
</style>
<div id="translator-wrapper">
    <select id="translate-language">
        <option value="en" selected="selected">English</option>
        <option value="id">Indonesian</option>
        <option value="af">Afrikaans</option>
        <option value="sq">Albanian</option>
        <option value="ar">Arabic</option>
        <option value="hy">Armenian</option>
        <option value="az">Azerbaijani</option>
        <option value="eu">Basque</option>
        <option value="be">Belarusian</option>
        <option value="bn">Bengali</option>
        <option value="bg">Bulgarian</option>
        <option value="ca">Catalan</option>
        <option value="zh-CN">Chinese</option>
        <option value="hr">Croatian</option>
        <option value="cs">Czech</option>
        <option value="da">Danish</option>
        <option value="nl">Dutch</option>
        <option value="en">English</option>
        <option value="eo">Esperanto</option>
        <option value="et">Estonian</option>
        <option value="tl">Filipino</option>
        <option value="fi">Finnish</option>
        <option value="fr">French</option>
        <option value="gl">Galician</option>
        <option value="ka">Georgian</option>
        <option value="de">German</option>
        <option value="el">Greek</option>
        <option value="gu">Gujarati</option>
        <option value="ht">Haitian Creole</option>
        <option value="iw">Hebrew</option>
        <option value="hi">Hindi</option>
        <option value="hu">Hungarian</option>
        <option value="is">Icelandic</option>
        <option value="id">Indonesian</option>
        <option value="ga">Irish</option>
        <option value="it">Italian</option>
        <option value="ja">Japanese</option>
        <option value="kn">Kannada</option>
        <option value="ko">Korean</option>
        <option value="la">Latin</option>
        <option value="lv">Latvian</option>
        <option value="lt">Lithuanian</option>
        <option value="mk">Macedonian</option>
        <option value="ms">Malay</option>
        <option value="mt">Maltese</option>
        <option value="no">Norwegian</option>
        <option value="fa">Persian</option>
        <option value="pl">Polish</option>
        <option value="pt">Portuguese</option>
        <option value="ro">Romanian</option>
        <option value="ru">Russian</option>
        <option value="sr">Serbian</option>
        <option value="sk">Slovak</option>
        <option value="sl">Slovenian</option>
        <option value="es">Spanish</option>
        <option value="sw">Swahili</option>
        <option value="sv">Swedish</option>
        <option value="ta">Tamil</option>
        <option value="te">Telugu</option>
        <option value="th">Thai</option>
        <option value="tr">Turkish</option>
        <option value="uk">Ukrainian</option>
        <option value="ur">Urdu</option>
        <option value="vi">Vietnamese</option>
        <option value="cy">Welsh</option>
        <option value="yi">Yiddish</option>
    </select><a id="translate-me" href="#" title="Translate"></a>
</div>
<script type="text/javascript">
(function() {
    var mylang = "id", // Your website language
        anchor = document.getElementById('translate-me');
    anchor.onclick = function() {
        window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
        return false;
    };
})();
</script>

After that, see the results.

Results

For setting the widget width, color, and more you can customize the theme of your blog. Good luck.