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

How to Add Translator Tab or Widget on Blogger Template
Author: Pradeep   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.

Hurry! your website translated to the selected language.  

9 comments:

  1. This is a smart blog. I mean it. You have an excellent knowledge about this topic. Thanks for sharing such a great blogs to us. Language Translation Services USA

    ReplyDelete
  2. I appreciate your efforts which you have put into this article. This post provides a good idea about Translation. Genuinely, it is a useful article to increase our knowledge. Thanks for sharing such articles here.Translator Training Program in Riyadh

    ReplyDelete
  3. I am very thankful to you for sharing this best knowledge with us. This information is helpful for everyone. So please always share this kind of knowledge with everyone. Thanks. Experienced Arabic Language Translator

    ReplyDelete
  4. I read the above article and I got some knowledge from your article. It's actually great and useful data for us. Thai Innovative Language Learning Online App Thanks for share it.

    ReplyDelete
  5. I read the above article and I got some knowledge from your article. It's actually great and useful data for us. Any Language Translation Service to Chinese Thanks for share it.

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Thanks for a very interesting blog. What else may I get that kind of info written in such a perfect approach about Professional machine learning ? I’ve got an undertaking that I am simply now operating on, and I have been on the lookout for such info.

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Very interesting and amazing article about Learn Spanish On Zoom. I will surely share it with friends. Thanks for sharing.

    ReplyDelete