Google Translate for Blogger and Wordpress Widget with Image Map Transparent Background

A small file size Google Translate Widget with transparent background using a image map (6.83 KB PNG + 3.31 KB HTML).

1. Add to css section

Edit Template select Expand Widget Templates, find:
]]></b:skin>

just before add this CSS code:

#translate{position:fixed;text-align:center;bottom:0;right:0;width:100%;height:25px;z-index:1;background-color:rgba(0,0,0,0.35);}

2. Add a HTML/Javascript Gadget

place it on the button with this content:

<div id="translate"><img id="Image-Maps_flags" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgnok1CqeAKL2AkJeyQEblq1NLjDy6_0ed2IefaBDWnocViegdv7mwsYEbm4ArhtbVv2n9VMDJHDd-9X2-SnqXBDRoDx3qd27kX-kkLEHDqAt7Cc26f6qHoUrYP6BxRy9Fk_fWHcX-xDA/" usemap="#Image-Maps_flags" border="0" width="428" height="21" alt="" />
<map id="Image-Maps_flags" name="Image-Maps_flags">
<area shape="rect" coords="1,0,30,16" onclick="window.open(&#39;http://www.google.com/translate?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;sl=auto&amp;tl=en&#39;); return false;" style="cursor: pointer;" title="English" alt="English" />
<area shape="rect" coords="37,0,66,16" onclick="window.open(&#39;http://www.google.com/translate?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;sl=auto&amp;tl=fr&#39;); return false;" style="cursor: pointer;" alt="France" title="France" />
<area shape="rect" coords="72,0,101,16" onclick="window.open(&#39;http://translate.google.com/translate?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=auto%7Cde&amp;hl=en&#39;); return false;" target="_self" href="#" alt="German" title="German" />
<area shape="rect" coords="108,0,137,16" onclick="window.open(&#39;http://translate.google.com/translate?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=auto%7Ces&amp;hl=en&#39;); return false;" target="_self" href="#" alt="Spain" title="Spain" />
<area shape="rect" coords="145,0,174,16" onclick="window.open(&#39;http://translate.google.com/translate?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=auto%7Cit&amp;hl=en&#39;); return false;" target="_self" href="#" alt="Italy" title="Italy" />
<area shape="rect" coords="180,0,209,16" onclick="window.open(&#39;http://translate.google.com/translate?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=auto%7Cnl&amp;hl=en&#39;); return false;" target="_self" href="#" alt="Dutch" title="Dutch" />
<area shape="rect" coords="216,0,245,16" onclick="window.open(&#39;http://translate.google.com/translate?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=auto%7Cru&amp;hl=en&#39;); return false;" target="_self" href="#" alt="Russia" title="Russia" />
<area shape="rect" coords="252,0,281,16" onclick="window.open(&#39;http://translate.google.com/translate?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=auto%7Cpt&amp;hl=en&#39;); return false;" target="_self" href="#" alt="Brasil" title="Brazil" />
<area shape="rect" coords="288,0,317,16" onclick="window.open(&#39;http://translate.google.com/translate?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=auto%7Cja&amp;hl=en&#39;); return false;" target="_self" href="#" alt="Japan" title="Japan" />
<area shape="rect" coords="324,0,353,16" onclick="window.open(&#39;http://translate.google.com/translate?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=auto%7Cko&amp;hl=en&#39;); return false;" target="_self" href="#" alt="Korea" title="Korea" />
<area shape="rect" coords="360,0,389,16" onclick="window.open(&#39;http://translate.google.com/translate?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=auto%7Car&amp;hl=en&#39;); return false;" target="_self" href="#" alt="Arabic" title="Arabic" />
<area shape="rect" coords="396,0,423,16" onclick="window.open(&#39;http://translate.google.com/translate?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=auto%7Czh-CN&amp;hl=en&#39;); return false;" target="_self" href="#" alt="China" title="China" /></map></div>

3. Optional Customization
To change color pick a matching color in RGB from your background and edit: color:rgba(0,0,0,0.35)
i.e. on this theme color:rgba(56, 24, 246, 0.35)

4. Optional Show only on Mouse Hover:
#translate {opacity:0;filter:alpha(opacity=0);}
#translate:hover {opacity:0.9;filter:alpha(opacity=90);}