Stylish Google Translator Widget for Website/Blogger

Hello Friends, today we are introducing a cool blogger widget that you needs! If you want to collaborate with other countries around the wo...

Hello Friends, today we are introducing a cool blogger widget that you needs!
If you want to collaborate with other countries around the world, you’ll want to find a way to translate your blog into multiple languages.

It supports 65 languages..!

Follow this steps to add this widget to your Blogger blog

1. Login to your blogger account
2. Got to your Layout section
3.  Add a Gadget (anywhere) and select gadget type as HTML/JavaScript
4. Copy the entire code given in below, and paste to the HTML/JavaScript gadget  Content section
5. Click Save button
6. You can change the color of the widget.(Replace the highlighted color code)
7. Replace the blue colored language code with your blog writing language.

Features

• Responsive
• Flat Design
• Supports 65 languages

Code :

<center>
<style type="text/css">/*Cybup Translator Widget */
#cybup-trans-warp {
  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;
}
#cybup-trans-warp 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;
}
#cybup-trans-warp a,
#cybup-trans-warp a:hover {
  display:block;
  background-color:#0AC4FC;
  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;
}
#cybup-trans-warp 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;
}
#cybup-trans-warp a:hover {opacity:0.9;}
#cybup-trans-warp a:active {opacity:0.9;}
#cybup-trans-warp select:focus,
#cybup-trans-warp a:focus,
#cybup-trans-warp select:active,
#cybup-trans-warp a:active {
  border:none;
  outline:none;
  cursor:pointer;
}
option {
  background:#82B638;
  color:#fff;
}
</style>
<div id="cybup-trans-warp">
    <select id="translate-language">
        <option value="" selected />Select Your Language..
        <option value="ml"/>Malayalam
        <option value="af" />Afrikaans
        <option value="sq" />Albanian
        <option value="ar" />Arabic
        <option value="hy" />Armenian
        <option value="az" />Azerbaijani
        <option value="eu" />Basque
        <option value="be" />Belarusian
        <option value="bn" />Bengali
        <option value="bg" />Bulgarian
        <option value="ca" />Catalan
        <option value="zh-CN" />Chinese
        <option value="hr" />Croatian
        <option value="cs" />Czech
        <option value="da" />Danish
        <option value="nl" />Dutch
        <option value="en" />English
        <option value="eo" />Esperanto
        <option value="et" />Estonian
        <option value="tl" />Filipino
        <option value="fi" />Finnish
        <option value="fr" />French
        <option value="gl" />Galician
        <option value="ka" />Georgian
        <option value="de" />German
        <option value="el" />Greek
        <option value="gu" />Gujarati
        <option value="ht" />Haitian Creole
        <option value="iw" />Hebrew
        <option value="hi" />Hindi
        <option value="hu" />Hungarian
        <option value="is" />Icelandic
        <option value="id" />Indonesian
        <option value="ga" />Irish
        <option value="it" />Italian
        <option value="ja" />Japanese
        <option value="kn" />Kannada
        <option value="ko" />Korean
        <option value="la" />Latin
        <option value="lv" />Latvian
        <option value="lt" />Lithuanian
        <option value="mk" />Macedonian
        <option value="ms" />Malay
        <option value="mt" />Maltese
        <option value="no" />Norwegian
        <option value="fa" />Persian
        <option value="pl" />Polish
        <option value="pt" />Portuguese
        <option value="ro" />Romanian
        <option value="ru" />Russian
        <option value="sr" />Serbian
        <option value="sk" />Slovak
        <option value="sl" />Slovenian
        <option value="es" />Spanish
        <option value="sw" />Swahili
        <option value="sv" />Swedish
        <option value="ta" />Tamil
        <option value="te" />Telugu
        <option value="th" />Thai
        <option value="tr" />Turkish
        <option value="uk" />Ukrainian
        <option value="ur" />Urdu
        <option value="vi" />Vietnamese
        <option value="cy" />Welsh
        <option value="yi" />Yiddish
    </select><a id="translate-me" href="#" title="Translate"></a>
</div>
<script type="text/javascript">
(function() {
    var lang = "en", /* Your website language */
        anchor = document.getElementById('translate-me');
    anchor.onclick = function() {
        window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + lang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
        return false;
    };
})();
</script><font size="1">Widget powered by <a href="htpp://cypup.blogspot.com" rel="dofollow">Cybup</a></font>
</center>

Demo Click here

 If you're unable to get it working then you can leave a comment with your blog URL and I'll surely check it.

Our Facebook page: https://www.facebook.com/CybUp

Follow us on Codepen: http://codepen.io/Cybup