Google Translate Flags Widget for Blogger

With the increasing number of blogs all over the world, it has become a big issue for some regional bloggers who want readers globally but can't get it because they don't know that particular language. In this case Google Translate Flags widget may be very helpful for you.

Everyone knows about Google Translate. It is an online tool which helps you to translate a page/text to your desired language but it becomes tedious when everytime you have to go to Google Translates site to translate something. So fellow bloggers, for enhancing your visitors visits this widget may be very helpful.

The demo of this widget can be seen right under this line. (The width on which flags are appearing may differ as per your sidebar/Widget width)

Once you have seen the demo we can proceed with the tutorial on how you can add Google Translate Flags to Blogger.
For adding this widget you can use two methods -
1. 1 Click Installation
2. Manual Installation

1 Click Installation

For adding this widget just click the above button. You will be redirected to Blogger.com and your widget will be added.

Manual Installation

If you think that you need to make some changes in the code or the above button is not working for you then you may use this method.

Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Paste the below code.

<!-- Translate flag BEGIN by AllBloggerTricks.com -->
<style>
ul#translate-flag {padding:0;margin:0;}
#translate-flag li {list-style: none;float:left;_display:inline;padding:0;margin:1px;width:16px;height:11px;background-image:url(http://2.bp.blogspot.com/_nHEt80wjI5c/S_42HER5gPI/AAAAAAAABVk/wUbSc00BTeY/s1600/flags+sprite.png);background-repeat:no-repeat;}
#translate-flag li a{display:block;width:16px;height:11px;cursor: pointer;}
</style>
<ul id="translate-flag">
<li id="malay" style="background-position:0px 0px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|ms&amp;hl=ms'" title="Translate to Malay"></a></li>
<li id="arabic" style="background-position:0px -11px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|ar&amp;hl=ar'" title="Translate to Arabic" ></a></li>
<li id="chinese" style="background-position:0px -22px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|zh-CN&amp;hl=zh-CN'" title="Translate to Chinese"></a></li>
<li id="estonia" style="background-position:0px -33px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|et&amp;hl=et'" title="Translate to Estonian"></a></li>
<li id="finnish" style="background-position:0px -44px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|fi&amp;hl=fi'" title="Translate to Finnish"></a></li>
<li id="french" style="background-position:0px -55px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|fr&amp;hl=fr'" title="Translate to French"></a></li>
<li id="german" style="background-position:0px -66px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|de&amp;hl=de'" title="Translate to German"></a></li>
<li id="greek" style="background-position:0px -77px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|el&amp;hl=el'" title="Translate to Greek" id="greek" ></a></li>
<li id="hindi" style="background-position:0px -88px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|hi&amp;hl=hi'" title="Translate to Hindi"></a></li>
<li id="indonesian" style="background-position:0px -99px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|id&amp;hl=id'" title="Translate to Indonesian" ></a></li>
<li id="italian" style="background-position:0px -110px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|it&amp;hl=it'" title="Translate to Italian"></a></li>
<li id="japanese" style="background-position:0px -121px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|ja&amp;hl=ja'" title="Translate to Japanese"></a></li>
<li id="persian" style="background-position:0px -132px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|fa&amp;hl=fa'" title="Translate to Persian"></a></li>
<li id="norwegian" style="background-position:0px -143px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|no&amp;hl=no'" title="Translate to Norwegian"></a></li>
<li id="portuguese" style="background-position:0px -154px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|pt&amp;hl=pt'" title="Translate to Portuguese" ></a></li>
<li id="romanian" style="background-position:0px -165px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|ro&amp;hl=ro'" title="Translate to Romanian"></a></li>
<li id="russian" style="background-position:0px -176px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|ru&amp;hl=ru'" title="Translate to Russian" ></a></li>

<li id="slovak" style="background-position:0px -187px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|sk&amp;hl=sk'" title="Translate to Slovak"></a></li>
<li id="spanish" style="background-position:0px -198px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|es&amp;hl=es'" title="Translate to Spanish"></a></li>
<li id="swedish" style="background-position:0px -209px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|sv&amp;hl=sv'" title="Translate to Swedish"></a></li>
<li id="thai" style="background-position:0px -231px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|th&amp;hl=th'" title="Translate to Thai"></a></li>
<li id="turkish" style="background-position:0px -242px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|tr&amp;hl=tr'" title="Translate to Turkish" ></a></li>
<li id="vietnamese" style="background-position:0px -253px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|vi&amp;hl=vi'" title="Translate to Vietnamese" ></a></li>
<li id="dutch" style="background:url(http://i632.photobucket.com/albums/uu50/GreenLava/flags/nl.png) no-repeat;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|nl&amp;hl=nl'" title="Translate to Dutch" ></a></li>
</ul>
<!-- Translate flag END by AllBloggerTricks.com -->

After adding the code save the widget and finally save the template.

You are done now. Now you and your visitors can see and use this Google Translate Flags widget in your blog.

<<<<<****************************************************************>>>>>

We hope you have Enjoyed this Widget & find it useful for you. If you have any Problem or Issue with this Widget, Please do visit the Official page of this Widget here and directly ask the developer of this Widget for the Solution by Commenting there.

---

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible

---