Alternative Widget Translator for blog

Example Translator Languages

English Indonesian Afrikaans Albanian Arabic Armenian Azerbaijani Basque Belarusian Bengali Bulgarian Catalan Chinese Croatian Czech Danish Dutch English Esperanto Estonian Filipino Finnish French Galician Georgian German Greek Gujarati Haitian Creole Hebrew Hindi Hungarian Icelandic Indonesian Irish Italian Japanese Kannada Korean Latin Latvian Lithuanian Macedonian Malay Maltese Norwegian Persian Polish Portuguese Romanian Russian Serbian Slovak Slovenian Spanish Swahili Swedish Tamil Telugu Thai Turkish Ukrainian Urdu Vietnamese Welsh Yiddish

Code source

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

Share this post