How to Add Translator Tab or Widget on Blogger Template // servicebloggers.com

How to Add Translator Tab or Widget on Blogger Template
Post Date: Jun 2016  Edited: Jan 2020.

As a Blog owner or Website Owner it is necessary to have a translator Tab or Widget. This option actually drives more visitors from other language speaking countries and at the same time it is useful for their easy understanding of your content. Some unique content writers post their article in their own language which might actually useful for English speaking countries too. So, it's a win win situation.

There are 2 options to Add Translator:

1. Default Blogger Translator.
2. Customized Translator Widget HTML/ Java script Code.

Customized Translator Widget:


This customized HTML widget fits with many designs and templates of Blogger which looks professional and used widely by Big shot companies too. Add-on feature here is you may change the color as per your design. This translator uses Google translator to translate content.

• 'LOGIN' to your Blogger Account.
• Go to 'LAYOUT' Tab.
• Click on 'ADD A GADGET' 
• Here Select 'HTML/JAVASCRIPT' widget.
• Copy the code given here and paste it.

<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 'SAVE TEMPLATE' finish.

For Editing:

• To change background color. Find "background-color:#4B8DF7;"
• Alter #4B8DF7 into your desired color code.

How to Add Translator Tab or Widget on Blogger Template

• To change Default website Language, Find "<option value="en" selected />English"
• Alter "en" selected />English to your desired language.

After saved template Go to view your website and click on 'translator drop down box' and select the language, click on Go.

Vaah! your website translated to the selected language.