Google Translate Widget With Flags For Blogger

Tweets by @mrqasimashraf

The Google Translate Widget for Blogger allows the visitors to translate your site or blog in their own language.
This widget also auto-detect your blog language and then translate it to the readers chosen language.

It supports 12 different languages:
English, French, German, Spanish, Italian, Dutch, Brazilian, Russian, Japanese, Korean, Arabic And Chinese.

How To Add The Google Translate Widget To Blogger

Step 1. Go to your Blogger Dashboard >> Layout and click on "Add A Gadget" link

Step 2. From the pop-up window, scroll down and choose HTML/JavaScript

 Step 3. Paste the code below in the empty box:

<center> <div dir="ltr" style="text-align: center;" trbidi="on"> script type="text/javascript"><br /> function showHide(shID) {<br />     if (document.getElementById(shID)) {<br />         if (document.getElementById(shID+'-show').style.display != 'none') {<br />             document.getElementById(shID+'-show').style.display = 'none';<br />             document.getElementById(shID).style.display = 'block';<br />         }<br />         else {<br />             document.getElementById(shID+'-show').style.display = 'inline';<br />             document.getElementById(shID).style.display = 'none';<br />         }<br />     }<br /> }<br /> </script><br /> <br /> <style><br /> <br />  .google_translate img {<br /> margin: 10px 20px 0px 20px;<br />     height: 24px;<br />     width: 24px;<br />         }<br />         .google_translate:hover img {<br /> filter:alpha(opacity=0.30);<br />         -moz-opacity: 0.30;<br />         opacity: 0.30;<br />         border:0;<br />         }<br /> <br /> .more {<br />     display: none;<br /> a.showLink, a.hideLink {<br />     text-decoration: none;<br />     color: #0880C4;<br />     padding-left: 18px;<br />     background: transparent('down.gif') no-repeat left; }<br /> <br /> a.hideLink {<br />     background: transparent url('up.gif') no-repeat left; <br /> color: #0880C4;}<br /> <br /> a.showLink:hover, a.hideLink:hover {<br /> color: #0880C4;<br />  }<br /> <br />  </style><br /> <br />  <div> <br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5Rjln3VMNzF-0mzHXZiCvBe0xY8SrdkcvnGoyCyFXQLkNInYRw4UQzj3GZbgmHPCouE9ytAzG28lbaxbth9Y0hZLF5K-eO3C4ZOcJTlG_-zxVIL756v5grJVhRPGLUBSHNDWog9oN63L/s1600/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgVJobfEIVj1der9crN2no2NRyVNVDyiHBh_DxbZ0HUegd8s9wOsYPJZBYAsCgTRmsROj8zt6Pi8frD5-cI5CSqoITXuQICy_-zdXB5Pl2gTXy01F5VjvtqFmIHx1Yke1JnyrI46wBmIjO/s1600/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlo0IeA7eZ32m59R_HoS4UW6TCXkOxp0-aBODwdbbLo3tAiH3xyJ57gnjquLHVOWXBmy_dYg9lm4YTdV0b5PVlQ_87XYsRMCl2XVzNjvCb08i4127t-nIvvjCFwNDHjUcJprJRShFtemt_/s1600/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQKDczkkDwXBXZIt5c73YFyJPS4S_zNPitusrpKcvAqX8EfwIfcP8WJdh2Aq85-RBrgZourR8pHEYg0XcE7_FB8fYnH1sFbjB-7_j5pZITtLVEypljPIC3Vx8KmWtsCrrwX33DPstvyy4N/s1600/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a href="#" id="example-show" class="showLink" <br /> onclick="showHide('example');return false;">More</a><br /> <div id="example" class="more"> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMEv4mr0TOisfO0VwXN1_DDWWcnIh2BvJhzplmcEu8cvpxpUIeoLk6Sn4dUfqK7x2oLrOv2JIKp0hBXFha8PcNaMHMyyyN8sREe1ZSYli-qtQUYI-eQspZ7hX8TG2wPA99Su1pcHPyH5LP/s1600/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj850RTQiqYZWu3DTEXwugkfL2Osbg96D2MW5JWL6fQgYZp2ch64BXAHj-6zkvStEjnos8qDTj1dxBo3c0tzdbvBm4WQPVGQT1_uOhGH-1rdDm9w3BdrKxUkYXaWCHT2tMf41NqCyd0BjKb/s1600/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br />       <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrUejvI6lwHQZy9AnIiFkDAyXhQxyvG9LF1-JrwEVtUfvTaPaisGEMLeb9NeceY3GxUeMgBaKMgt53SgQHHqrm2M5MAQ6lZp94ykjzmf9eWd07Hv8Fn6lh0wHlo_F0GT7C-B5dlh1nzsvd/s1600/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-TDnfzbKC-z4GP1aUetoA2D9Vyn_OliUj6J8zytJAzZeH6ZYTtBjqmdmaMLBU9iF0c0jkzkM_5fqzag14EjlrNccT7XHeHrWAlVNv45vGFnhCxK7wy46KfkracY3JfPamr4EdKWrdY9jE/s1600/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br /><br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4lJwK9uGRxMo3IqugsjYdPjaWif0XKvLj2rU13Vaqig_Hm5mlcs0vNPCR9MAikUSqbmb9F8yLaDEl44p07eTZIpLcprDXiH9bHO2Vqb-r1p-j35_QOdTxiaUXB01RmpU3LiD9CNtLNWuM/s1600/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCsbBVWr-g_UZO1q4oyiLnceF8kR2zk8Gd3JDAdYOeTNfGOBaGL201_Fm-I-mtkm63YzC4pxNewGTLd9fqaQMbZWk_lco3ByDOyVZELwuTyi3nkfjGWzY6z5TYMr7ZT1ZmayV1u19E2Nv9/s1600/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzWwlF79lX4HcIkDWcrXbqNqhsfrIFzdK-XimQKM2884ancAV-j-p7AsXMd5iA9_WDR8Am-VzxnW5pq4vjizvop-DfeaQdGLkPo2hYHbZOcpgQb63-txXoFNBsR73tMjnxmsY12Wn4YLvc/s1600/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7czh-cn&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj0M3ROloZSmH4yo5SZ1m4J_Wd86jL-9BUi83WrYvPC7uoZwViYNjElzgdb7bO3gMkzgOpP6-N-xqJfZzs0tXtZbXS5Hi_bkbuFQdqxJ3Ug6fvyEM_hHZt5ttLqtGhVQ9h0soP3e_Q1H3V/s1600/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br />     <p> <a href="#" id="example-hide" class="hideLink" <br />     onclick="showHide('example');return false;">Hide / </a><a href="http://mrqasimashraf.blogspot.com"><font size="1px">Get this widget</font></a></p> <br /> </div> <br />      </div> </div> <br /> <span style="color: #0b5394;"><b>Step 4.</b></span> Now click on Save<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5UomUc5PrclhLXbY0ghYY0w2FDuMCUuwS-oUDcIxc1kB1Es2Pt-DgNQbEv2o94p1fJg1o0fLjn7H-S1jlqVQaQMSFupBMDdXV49GZbYtffEOl9nfoP6o-3w0TZUzJqkLCjnRqg0hAZZ22/s1600/save-html-javascript-blogger-widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="google translate, blogger widgets, gadgets for blogspot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5UomUc5PrclhLXbY0ghYY0w2FDuMCUuwS-oUDcIxc1kB1Es2Pt-DgNQbEv2o94p1fJg1o0fLjn7H-S1jlqVQaQMSFupBMDdXV49GZbYtffEOl9nfoP6o-3w0TZUzJqkLCjnRqg0hAZZ22/s1600/save-html-javascript-blogger-widget.png" title="Add google translate widget to blogger" /></a></div> And you're done! Enjoy (:<br /> <br /></div>

Enjoyed This Post? Subscribe For More Update!

Follow @mrqasimashraf