Add Custom Google Translator Widget in Blogger Template

Add Custom Google Translator Widget in Blogger Template

Translator widget is necessary for any native website or Blog. Suppose your site is in Bangla or Hindi language but containing some unique articles, in this case by using translator people from any other language speaker can read your contain and enrich their knowledge. In many cases we have seen that some local website with native language publish article or information first at that case if that website or Blog content translator widget then readers from around the world can read that article. Similarly in Google Blogger we have a default widget but may users don't like to add it because of generic style and looks. 

                                                So I have created a custom translator widget which will looking professional and this will match with many types of template. Another feature of this widget your can change the translator button color easily and this is very easy to install in Blogger template. And note that this widget will use Google translator to translate your Blog. So custom code has added to customize the original Google translator.

please follow the below steps for adding this widget -

DEMO

Step 1: Log in to your Blogger account and Go to your Blogger Dashboard

Step 2: Go to your Layout tab.


Step 3: Click on "Add a Gadget" then Select "HTML/JavaScript" Widget.

HTML/JavaScript

Step 4: Now Copy the below code and Paste it into "HTML/JavaScript" Gadget.

<style type="text/css">
#gt-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;
}
#gt-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;
}
#gt-wrapper a,
#gt-wrapper a:hover {
  display:block;
  background-color:#4B8DF7;
  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;  
}
#gt-wrapper a:before {
  content:" ";
  display:block;
  width:0;
  height:0;
  border:6px solid transparent;
  border-left-color:#FFFFFF;
  position:absolute;
  top:50%;
  left:45%;
  margin-top:-5px;
}
#gt-wrapper a:hover {opacity:0.9;}
#gt-wrapper a:active {opacity:0.9;}
#gt-wrapper select:focus,
#gt-wrapper a:focus,
#gt-wrapper select:active,
#gt-wrapper a:active {
 border:none;
 outline:none;
 cursor:pointer;
}
option {
 background:#444;
 color:#e0e0e0;
}
</style>
<div id="gt-wrapper">
<select id="language">
<option value="en" selected />English
<option value="af" />Afrikaans
<option value="sq" />Albanian
<option value="ar" />Arabic
<option value="hy" />Armenian
<option value="az" />Azerbaijani
<option value="bn" />Bengali
<option value="eu" />Basque
<option value="be" />Belarusian
<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="id" />Indonesian
<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 mylang = "en", // 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('language').value + '&hl=en');
return false;
};
})();
</script>

click here to download code 

Google Translator Widget

Step 5: Now simply hit the Save Template button.

Customization

• From line number 32 alter #4B8DF7 color code for changing the widget button color.
• Alter en with your website language from line number 144.

This widget will work very simply, after installing this widget just click on the translator box to select the language and after that click on Go and see your site has translated into your native language. Hope you would like this widget and people from around the world can read your blog by using this custom translator widget. Thank you.