Last active
April 14, 2017 05:10
-
-
Save dimaslanjaka/d3cf160167d410978da1ed65f4934a1f to your computer and use it in GitHub Desktop.
Google Translate Widget
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | |
<style id="jsbin-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:#ff4400; | |
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">Choose Language</option> | |
<option value="en">English</option> | |
<option value="hi">Hindi</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="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="id">Indonesian</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 id="jsbin-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> | |
<script id="jsbin-source-css" 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:#ff4400; | |
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; | |
}</script> | |
<script id="jsbin-source-javascript" 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=' + parent.window.document.location + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en'); | |
return false; | |
}; | |
})();</script |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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:#ff4400; | |
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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; | |
}; | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment