Alternative Widget Translator for blog
Example Translator Languages
Source code
<style type="text/css">
#translator-wrapper {
display: block;
width: 90%;
max-width: 300px;
border: none;
background-color: #fff;
color: #444;
overflow: hidden;
position: relative;
height: 40px;
line-height: 40px;
border: 1px solid #e0e0e0;
}
#translator-wrapper select {
border: none;
background: transparent;
font-family: "Verdana", Arial, Sans-Serif;
font-size: 12px;
width: 100%;
color: #444;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
cursor: text;
padding: 5px 10px;
}
#translator-wrapper a,
#translator-wrapper a:hover {
display: block;
background-color: #4791d2;
border: none;
color: #fff;
margin: 0 0;
text-decoration: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
cursor: pointer;
width: 14%;
transition: all 0.3s ease;
}
#translator-wrapper a:before {
content: "";
display: block;
width: 0;
height: 0;
border: 6px solid transparent;
border-left-color: white;
position: absolute;
top: 50%;
left: 45%;
margin-top: -5px;
}
#translator-wrapper a:hover {
opacity: 0.9;
}
#translator-wrapper a:active {
opacity: 0.9;
}
#translator-wrapper select:focus,
#translator-wrapper a:focus,
#translator-wrapper select:active,
#translator-wrapper a:active {
border: none;
outline: none;
cursor: pointer;
}
option {
background: #444;
color: #e0e0e0;
}
</style>
<div id="translator-wrapper">
<select id="translate-language">
<option value="en" selected="selected">English</option>
<option value="id">Indonesian</option>
<option value="af">Afrikaans</option>
<option value="sq">Albanian</option>
<option value="ar">Arabic</option>
<option value="hy">Armenian</option>
<option value="az">Azerbaijani</option>
<option value="eu">Basque</option>
<option value="be">Belarusian</option>
<option value="bn">Bengali</option>
<option value="bg">Bulgarian</option>
<option value="ca">Catalan</option>
<option value="zh-CN">Chinese</option>
<option value="hr">Croatian</option>
<option value="cs">Czech</option>
<option value="da">Danish</option>
<option value="nl">Dutch</option>
<option value="en">English</option>
<option value="eo">Esperanto</option>
<option value="et">Estonian</option>
<option value="tl">Filipino</option>
<option value="fi">Finnish</option>
<option value="fr">French</option>
<option value="gl">Galician</option>
<option value="ka">Georgian</option>
<option value="de">German</option>
<option value="el">Greek</option>
<option value="gu">Gujarati</option>
<option value="ht">Haitian Creole</option>
<option value="iw">Hebrew</option>
<option value="hi">Hindi</option>
<option value="hu">Hungarian</option>
<option value="is">Icelandic</option>
<option value="id">Indonesian</option>
<option value="ga">Irish</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="kn">Kannada</option>
<option value="ko">Korean</option>
<option value="la">Latin</option>
<option value="lv">Latvian</option>
<option value="lt">Lithuanian</option>
<option value="mk">Macedonian</option>
<option value="ms">Malay</option>
<option value="mt">Maltese</option>
<option value="no">Norwegian</option>
<option value="fa">Persian</option>
<option value="pl">Polish</option>
<option value="pt">Portuguese</option>
<option value="ro">Romanian</option>
<option value="ru">Russian</option>
<option value="sr">Serbian</option>
<option value="sk">Slovak</option>
<option value="sl">Slovenian</option>
<option value="es">Spanish</option>
<option value="sw">Swahili</option>
<option value="sv">Swedish</option>
<option value="ta">Tamil</option>
<option value="te">Telugu</option>
<option value="th">Thai</option>
<option value="tr">Turkish</option>
<option value="uk">Ukrainian</option>
<option value="ur">Urdu</option>
<option value="vi">Vietnamese</option>
<option value="cy">Welsh</option>
<option value="yi">Yiddish</option>
</select>
<a id="translate-me" href="#" title="Translate"></a>
</div>
<script type="text/javascript">
(function () {
var mylang = "id", // Your website language
anchor = document.getElementById("translate-me");
anchor.onclick = function () {
window.open(
"http://translate.google.com/translate?u=" +
encodeURIComponent(location.href) +
"&langpair=" +
mylang +
"%7C" +
document.getElementById("translate-language").value +
"&hl=en",
);
return false;
};
})();
</script>Related Articles
