Add Custom Google Translator Widget in Blogger Template

Add Custom Google Translator Widget in Blogger Template

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. 
Add Custom Google Translator Widget in Blogger Template
4 Stars stars - "Add Custom Google Translator Widget in Blogger Template" Translator widget is necessary for any native website or Blog. Suppose your site is in Bangla ...

Post a Comment

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.

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 Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *