Google Translate for Blogger Widget with Image Map Transparent Background

A small size Google Translate Widget with transparent background using a image map.
Demo: Wordpress - Google Blogger

Add to css section -
Edit Template, 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);}

Add in html for example in footer (Design, elements, add a Gadget, html/javascript):

<div id="translate">
<img id="Image-Maps_flags" src="http://lh4.ggpht.com/_ewREQ2z7SjM/TESi8lIV56I/AAAAAAAAD_U/sbd7RvCjzBY/flags-map1.png" 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('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&sl=auto&tl=en'); return false;" style="cursor: pointer;" title="English" alt="English" />
<area shape="rect" coords="37,0,66,16" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&sl=auto&tl=fr'); return false;" style="cursor: pointer;" alt="France" title="France" />
<area shape="rect" coords="72,0,101,16" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;" target="_self" href="#" alt="German" title="German" />
<area shape="rect" coords="108,0,137,16" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;" target="_self" href="#" alt="Spain" title="Spain" />
<area shape="rect" coords="145,0,174,16" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;" target="_self" href="#" alt="Italy" title="Italy" />
<area shape="rect" coords="180,0,209,16" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;" target="_self" href="#" alt="Dutch" title="Dutch" />
<area shape="rect" coords="216,0,245,16" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;" target="_self" href="#" alt="Russia" title="Russia" />
<area shape="rect" coords="252,0,281,16" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;" target="_self" href="#" alt="Brasil" title="Brasil" />
<area shape="rect" coords="288,0,317,16" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;" target="_self" href="#" alt="Japan" title="Japan" />
<area shape="rect" coords="324,0,353,16" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;" target="_self" href="#" alt="Korea" title="Korea" />
<area shape="rect" coords="360,0,389,16" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;" target="_self" href="#" alt="Arabic" title="Arabic" />
<area shape="rect" coords="396,0,423,16" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;" target="_self" href="#" alt="China" title="China" />
</map>
</div>

0 comments:

Post a Comment