Add Custom Google Translator Widget in Blogger Template

Add Custom Google Translator Widget in Blogger Template

Comments: 11
data:blog.title
translator widget

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.


Whatever for adding this widget please follow the below steps-

blog translator

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

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>

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. 

Speak Your Mind

posti ek kothai darun hoyeche widget/translator tao awesome..

tanx for nice widget awesome post..

This is just a custom widget. hope your visitor will like it.

Fine post bro.

Hi mohmmad, i like it... it's design is very nice thanks...

Welcome Vijay. Thanks for dropping your comment.

This is what I'm looking for..

Thanks Mohammad

Hi Precious Pinkest, I am glade to hear that. And thanks for dropping your comment. :sp

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *