Blogger Widgets are very useful way to add any functionality to your blogger blog. Today in this post, I’m sharing a Blogger Widget using which your visitors can translate your page to 16 different languages. These languages include English, French, German, Urdu , Italian, Dutch, Brazilian, Russian, Japanese, Korean, Arabic, Chinese, Spanish, Hindi, Persian And Bengali. This Blogger Widget comes with beautiful country flags. Using Google translate, this Blogger Widget will help your visitors a lot in translating your website to their native language. You can check the Demo of this Widget on Bloggerjin’s Lab. Let me share this Google Translate Widget for Blogger with you and tell you how to setup it.
Google Translate Widget for Blogger
1. Login to Blogger Dashboard >> Layout >> Add a Gadget >> select “HTML/Javascript” and paste below code in that Widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<!--Google Translate Widget by Bloggerjin.com Starts--> <script type="text/javascript"> function showHide(shID) { if (document.getElementById(shID)) { if (document.getElementById(shID+'-show').style.display != 'none') { document.getElementById(shID+'-show').style.display = 'none'; document.getElementById(shID).style.display = 'block'; } else { document.getElementById(shID+'-show').style.display = 'inline'; document.getElementById(shID).style.display = 'none'; } } } </script> <style> .google_translate img { margin: 10px 20px 0px 20px; height: 24px; width: 24px; } .google_translate:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .more { display: none; a.showLink, a.hideLink { text-decoration: none; color: #0880C4; padding-left: 18px; background: transparent('down.gif') no-repeat left; } a.hideLink { background: transparent url('up.gif') no-repeat left; color: #0880C4;} a.showLink:hover, a.hideLink:hover { color: #0880C4; } </style> <div> <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="http://1.bp.blogspot.com/-sXhoGx5s2dg/T5xOeRCOuYI/AAAAAAAAARo/ldYJIGQldwQ/s1600/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="http://2.bp.blogspot.com/-aklFaq6pPeQ/T5xOV1mPbcI/AAAAAAAAARg/CcBmt1ptN88/s1600/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="http://1.bp.blogspot.com/-nX0ktPsJQTA/T5xOMiiOGQI/AAAAAAAAARY/VXhAPARvh9E/s1600/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Pakistani Urdu" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cur&hl=en'); return false;"><img alt="Urdu" border="0" align="absbottom" title="Urdu" height="24" src="http://2.bp.blogspot.com/-ZL2iWWwQ0h8/UGqVB1MwjII/AAAAAAAAFkI/4Lc9kXzzdIY/s1600/Pakistan-Flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">More</a> <div id="example" class="more"> <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="http://3.bp.blogspot.com/-0QwKU5U8K2k/T5xN5VZK2tI/AAAAAAAAARI/SvXac8-EQEg/s1600/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="http://4.bp.blogspot.com/-vJtqiSEPK0A/T5xNup0Q3vI/AAAAAAAAARA/SyuRn3jZjgk/s1600/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="http://2.bp.blogspot.com/-Em4KegbEBmk/T5xNjs5f_NI/AAAAAAAAAQ4/yLtUCDesqGs/s1600/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="http://2.bp.blogspot.com/-IVx5Fq_02dE/T5xNZIbiHzI/AAAAAAAAAQw/dvI6mI6z3Dw/s1600/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="http://2.bp.blogspot.com/-O932f9wBvk4/T5xNO_hx5uI/AAAAAAAAAQo/n8-iF7S_R8A/s1600/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="http://3.bp.blogspot.com/-es7IkxUUK_4/T5xNGn7TXYI/AAAAAAAAAQg/jAp6OM-Zj9Q/s1600/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="http://3.bp.blogspot.com/-cx9e66I48yM/T5xM9L7uzoI/AAAAAAAAAQY/ftpOVX9YZEE/s1600/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="http://1.bp.blogspot.com/-eXup49w042c/T5xMxliSlmI/AAAAAAAAAQQ/v9efq8I4TI0/s1600/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="http://4.bp.blogspot.com/-QPXkbtHOD4c/T5xODxO-FVI/AAAAAAAAARQ/1jye5k8T0DI/s1600/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Hindi" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7chi&hl=en'); return false;"><img alt="Hindi" border="0" align="absbottom" title="Hindi" height="24" src="http://3.bp.blogspot.com/-56lOmsXpq-g/UGqVxKaOA8I/AAAAAAAAFkQ/zSVcm4RIewk/s1600/India-Flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Persian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cfa&hl=en'); return false;"><img alt="Persian" border="0" align="absbottom" title="Persian" height="24" src="http://1.bp.blogspot.com/-1HUQHvnS47k/UGqWdS_baYI/AAAAAAAAFkg/__M35Nb9LT8/s1600/Iran-Flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Bengali" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cbn&hl=en'); return false;"><img alt="Bengali" border="0" align="absbottom" title="Bengali" height="24" src="http://2.bp.blogspot.com/-XXseHremADk/UGqXOa20VlI/AAAAAAAAFko/ZPEvZxRpbJw/s1600/bangali.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a></p> </div> </div> <!--Google Translate Widget by Bloggerjin.com Ends--> |
2. Save the Widget and your Google Translate Widget is ready.
3. By default, this Translate Widget shows just first row of flags. And has a “More” link to show other flags. It is to basically to save the Sidebar space.
4. If you want to show all flags and remove the “More” link, then you can remove two highlighted pieces [Lines, 51 to 61 & 85 to 87] of code from the above code. After removing that, your Widget will show all flags by default.
Guys, I hope this widget will help you in engaging with your visitors more. This was all about Google Translate Widget for Blogger. I will suggest you to use it with default setting to save space on your blog. But you can always make changes according to your needs. Bookmark Bloggerjin.com to stay connected with new Blogger Widgets and Tutorials. Have a nice day!
very nice put up, i certainly love this website, keep on it