가벼운 번역 위젯 (Lightweight translation widget)

가벼운 번역 위젯(Lightweight translation Widget) 을 만들었습니다. 블로그는 물론, 웹사이트라면 어느 곳에나 달 수 있습니다.

Do you want to see a International version? Click here.

검색엔진을 통해 필요한 것을 찾다 보면,
반드시 자국어로 된 사이트만 찾아 주는 것이 아닙니다.
글로벌 시대의 인터넷엔 국경이 없기 때문이죠.
전혀 알 수 없는 언어로 쓰여진 사이트에 들어갔을 때,
번역을 지원한다면, 좀 더 머물게 됩니다.
필요한 자료를 찾아 들어온 방문자 이니까요.
완벽한 번역이 아니라도, 몇몇 키워드 만으로도 충분히 원하는 내용을 얻어 나갈 수 있습니다.
가벼운 번역 위젯으로 전세계의 방문자들과 소통하세요!
by 月風

가벼운 번역 위젯 (Lightweight translation widget)

한국어 블로그, 웹사이트용  번역 위젯

한국어 블로그,웹사이트용 가벼운 번역 위젯(Lightweight translation widget) 에선 8개 언어로 번역을 지원합니다.
우선 국제 연합(UN)의 여섯 개 언어 번역을 지원합니다.
그리고 형제의 나라 터키어로 번역을 지원하고,
마지막으로 이웃 나라 일본어 번역을 지원합니다.

가벼운 번역 위젯 사용법

1. 원하는 배경색과 모양을 선택합니다.
2. 코드를 복사하여 위젯 페이지나, 웹페이지의 원하는 부분에 붙여넣습니다.
3. 잘 사용합니다.

가벼운 번역 위젯의 특징

• 단순합니다.
• 직관적인 유저 인터페이스를 제공합니다.
• 가볍습니다. (HTTP 요청을 줄여주는CSS Sprite를 사용 했습니다.)

한 줄 모양의 번역 위젯

웹사이트의 상단이나 하단 메뉴, 툴바에 붙이기 좋습니다.
혹은 글의 상단,하단에 붙이기 좋은 모양의 번역 위젯 입니다.

흰색 배경 사용자를 위한 구글 번역 위젯
(Single line style google translate widget for korean with white background)
<style>
#google_translate_bar a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj12vmtNK0PBSz9UZX1tXkHFtsgIle6W3GPI9YYBq1zwJsOZ2SdtmTPBrTW6vHVcyvymV3Qi-zvOpbmW79TLWAvD7EjGVUZRBaEEcuk6Fu2u2JGLMsojLVCggQfxg9D-I7GjDs6/');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#google_translate_bar a.english_tr { background-position: 0 0;}
#google_translate_bar a:hover.english_tr {background-position: 0 -32px;}
#google_translate_bar a.spanish_tr { background-position: 0 -64px;}
#google_translate_bar a:hover.spanish_tr {background-position: 0 -96px;}
#google_translate_bar a.french_tr { background-position: 0 -128px;}
#google_translate_bar a:hover.french_tr {background-position: 0 -160px;}
#google_translate_bar a.arabic_tr { background-position: 0 -192px;}
#google_translate_bar a:hover.arabic_tr {background-position: 0 -224px;}
#google_translate_bar a.russian_tr { background-position: 0 -256px;}
#google_translate_bar a:hover.russian_tr {background-position: 0 -288px;}
#google_translate_bar a.turkish_tr { background-position: 0 -320px;}
#google_translate_bar a:hover.turkish_tr {background-position: 0 -352px;}
#google_translate_bar a.chinese_tr { background-position: 0 -384px;}
#google_translate_bar a:hover.chinese_tr {background-position: 0 -416px;}
#google_translate_bar a.japanese_tr { background-position: 0 -448px;}
#google_translate_bar a:hover.japanese_tr {background-position: 0 -480px;}
</style>
<span style="font-size:14px;font-weight:bold;float:left;display:block;padding-top:4px;padding-right:12px;">번역(Translate to) </span><div id='google_translate_bar'>
<a class="english_tr" href="#" title="영어(English)" onclick="google_translate('en')"></a>
<a class="spanish_tr" href="#" title="스페인어(Español)" onclick="google_translate('es')"></a>
<a class="french_tr" href="#" title="불어(français)" onclick="google_translate('fr')"></a>
<a class="arabic_tr" href="#" title="아랍어(العربية)" onclick="google_translate('ar')"></a>
<a class="russian_tr" href="#" title="러시아어(русский язык)" onclick="google_translate('ru')"></a>
<a class="turkish_tr" href="#" title="터키어(Türkçe)" onclick="google_translate('tr')"></a>
<a class="chinese_tr" href="#" title="중국어(中文)" onclick="google_translate('zh-CN')"></a>
<a class="japanese_tr" href="#" title="일본어(日本語)" onclick="google_translate('ja')"></a>
</div><span style="font-size:12x;float:left;display:block;padding-top:5px;padding-left:12px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function google_translate(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


검정색 배경 사용자를 위한 구글 번역 위젯
(Single line style google translate widget for korean with black background)

<style>
#google_translate_bar a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXrBcGKozcUEAEVuCvvjh6mQUjQui5kfF5nksRnp9rBiiaMpBF5Xl_7gGvdDeaYRuyZ5SOpApaJ6uEn0LZgKfZ6drqjAEXpn5e7cueqvoiDxiXnoaF6aRaa_mCmxRgG7gxBmL/');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#google_translate_bar a.english_tr { background-position: 0 0;}
#google_translate_bar a:hover.english_tr {background-position: 0 -32px;}
#google_translate_bar a.spanish_tr { background-position: 0 -64px;}
#google_translate_bar a:hover.spanish_tr {background-position: 0 -96px;}
#google_translate_bar a.french_tr { background-position: 0 -128px;}
#google_translate_bar a:hover.french_tr {background-position: 0 -160px;}
#google_translate_bar a.arabic_tr { background-position: 0 -192px;}
#google_translate_bar a:hover.arabic_tr {background-position: 0 -224px;}
#google_translate_bar a.russian_tr { background-position: 0 -256px;}
#google_translate_bar a:hover.russian_tr {background-position: 0 -288px;}
#google_translate_bar a.turkish_tr { background-position: 0 -320px;}
#google_translate_bar a:hover.turkish_tr {background-position: 0 -352px;}
#google_translate_bar a.chinese_tr { background-position: 0 -384px;}
#google_translate_bar a:hover.chinese_tr {background-position: 0 -416px;}
#google_translate_bar a.japanese_tr { background-position: 0 -448px;}
#google_translate_bar a:hover.japanese_tr {background-position: 0 -480px;}
</style>
<span style="font-size:14px;font-weight:bold;float:left;display:block;padding-top:4px;padding-right:12px;">번역(Translate to) </span><div id='google_translate_bar'>
<a class="english_tr" href="#" title="영어(English)" onclick="google_translate('en')"></a>
<a class="spanish_tr" href="#" title="스페인어(Español)" onclick="google_translate('es')"></a>
<a class="french_tr" href="#" title="불어(français)" onclick="google_translate('fr')"></a>
<a class="arabic_tr" href="#" title="아랍어(العربية)" onclick="google_translate('ar')"></a>
<a class="russian_tr" href="#" title="러시아어(русский язык)" onclick="google_translate('ru')"></a>
<a class="turkish_tr" href="#" title="터키어(Türkçe)" onclick="google_translate('tr')"></a>
<a class="chinese_tr" href="#" title="중국어(中文)" onclick="google_translate('zh-CN')"></a>
<a class="japanese_tr" href="#" title="일본어(日本語)" onclick="google_translate('ja')"></a>
</div><span style="font-size:12x;float:left;display:block;padding-top:5px;padding-left:12px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function google_translate(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


흰색 배경 사용자를 위한 마이크로 소프트 번역기 위젯
(Oneline style microsoft translator widget for korean with white background)

<style>
#microsoft_translator_bar a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj12vmtNK0PBSz9UZX1tXkHFtsgIle6W3GPI9YYBq1zwJsOZ2SdtmTPBrTW6vHVcyvymV3Qi-zvOpbmW79TLWAvD7EjGVUZRBaEEcuk6Fu2u2JGLMsojLVCggQfxg9D-I7GjDs6/');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#microsoft_translator_bar a.english_tr { background-position: 0 0;}
#microsoft_translator_bar a:hover.english_tr {background-position: 0 -32px;}
#microsoft_translator_bar a.spanish_tr { background-position: 0 -64px;}
#microsoft_translator_bar a:hover.spanish_tr {background-position: 0 -96px;}
#microsoft_translator_bar a.french_tr { background-position: 0 -128px;}
#microsoft_translator_bar a:hover.french_tr {background-position: 0 -160px;}
#microsoft_translator_bar a.arabic_tr { background-position: 0 -192px;}
#microsoft_translator_bar a:hover.arabic_tr {background-position: 0 -224px;}
#microsoft_translator_bar a.russian_tr { background-position: 0 -256px;}
#microsoft_translator_bar a:hover.russian_tr {background-position: 0 -288px;}
#microsoft_translator_bar a.turkish_tr { background-position: 0 -320px;}
#microsoft_translator_bar a:hover.turkish_tr {background-position: 0 -352px;}
#microsoft_translator_bar a.chinese_tr { background-position: 0 -384px;}
#microsoft_translator_bar a:hover.chinese_tr {background-position: 0 -416px;}
#microsoft_translator_bar a.japanese_tr { background-position: 0 -448px;}
#microsoft_translator_bar a:hover.japanese_tr {background-position: 0 -480px;}
</style>
<span style="font-size:14px;font-weight:bold;float:left;display:block;padding-top:4px;padding-right:12px;">번역(Translate to) </span><div id='microsoft_translator_bar'>
<a class="english_tr" href="#" title="영어(English)" onclick="microsoft_translator('en')"></a>
<a class="spanish_tr" href="#" title="스페인어(Español)" onclick="microsoft_translator('es')"></a>
<a class="french_tr" href="#" title="불어(français)" onclick="microsoft_translator('fr')"></a>
<a class="arabic_tr" href="#" title="아랍어(العربية)" onclick="microsoft_translator('ar')"></a>
<a class="russian_tr" href="#" title="러시아어(русский язык)" onclick="microsoft_translator('ru')"></a>
<a class="turkish_tr" href="#" title="터키어(Türkçe)" onclick="microsoft_translator('tr')"></a>
<a class="chinese_tr" href="#" title="중국어(中文)" onclick="microsoft_translator('zh-CN')"></a>
<a class="japanese_tr" href="#" title="일본어(日本語)" onclick="microsoft_translator('ja')"></a>
</div><span style="font-size:12x;float:left;display:block;padding-top:5px;padding-left:12px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function microsoft_translator(language){
window.open('http://www.microsofttranslator.com/bv.aspx?ref=Internal&a='+encodeURIComponent(location.href)+'&from=&to='+language);
return false;
}
//]]>
</script>


검은색 배경 사용자를 위한 마이크로 소프트 번역기 위젯
(Single line style microsoft translator widget for korean with black background)
<style>
#microsoft_translator_bar a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXrBcGKozcUEAEVuCvvjh6mQUjQui5kfF5nksRnp9rBiiaMpBF5Xl_7gGvdDeaYRuyZ5SOpApaJ6uEn0LZgKfZ6drqjAEXpn5e7cueqvoiDxiXnoaF6aRaa_mCmxRgG7gxBmL/');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#microsoft_translator_bar a.english_tr { background-position: 0 0;}
#microsoft_translator_bar a:hover.english_tr {background-position: 0 -32px;}
#microsoft_translator_bar a.spanish_tr { background-position: 0 -64px;}
#microsoft_translator_bar a:hover.spanish_tr {background-position: 0 -96px;}
#microsoft_translator_bar a.french_tr { background-position: 0 -128px;}
#microsoft_translator_bar a:hover.french_tr {background-position: 0 -160px;}
#microsoft_translator_bar a.arabic_tr { background-position: 0 -192px;}
#microsoft_translator_bar a:hover.arabic_tr {background-position: 0 -224px;}
#microsoft_translator_bar a.russian_tr { background-position: 0 -256px;}
#microsoft_translator_bar a:hover.russian_tr {background-position: 0 -288px;}
#microsoft_translator_bar a.turkish_tr { background-position: 0 -320px;}
#microsoft_translator_bar a:hover.turkish_tr {background-position: 0 -352px;}
#microsoft_translator_bar a.chinese_tr { background-position: 0 -384px;}
#microsoft_translator_bar a:hover.chinese_tr {background-position: 0 -416px;}
#microsoft_translator_bar a.japanese_tr { background-position: 0 -448px;}
#microsoft_translator_bar a:hover.japanese_tr {background-position: 0 -480px;}
</style>
<span style="font-size:14px;font-weight:bold;float:left;display:block;padding-top:4px;padding-right:12px;">번역(Translate to) </span><div id='microsoft_translator_bar'>
<a class="english_tr" href="#" title="영어(English)" onclick="microsoft_translator('en')"></a>
<a class="spanish_tr" href="#" title="스페인어(Español)" onclick="microsoft_translator('es')"></a>
<a class="french_tr" href="#" title="불어(français)" onclick="microsoft_translator('fr')"></a>
<a class="arabic_tr" href="#" title="아랍어(العربية)" onclick="microsoft_translator('ar')"></a>
<a class="russian_tr" href="#" title="러시아어(русский язык)" onclick="microsoft_translator('ru')"></a>
<a class="turkish_tr" href="#" title="터키어(Türkçe)" onclick="microsoft_translator('tr')"></a>
<a class="chinese_tr" href="#" title="중국어(中文)" onclick="microsoft_translator('zh-CN')"></a>
<a class="japanese_tr" href="#" title="일본어(日本語)" onclick="microsoft_translator('ja')"></a>
</div><span style="font-size:12x;float:left;display:block;padding-top:5px;padding-left:12px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function microsoft_translator(language){
window.open('http://www.microsofttranslator.com/bv.aspx?ref=Internal&a='+encodeURIComponent(location.href)+'&from=&to='+language);
return false;
}
//]]>
</script>


사이드바 모양의 번역 위젯

블로그의 사이드바에 적합한 모양의 위젯입니다.



흰색 배경 사용자를 위한 구글 번역 위젯
(Sidebar style google translate widget for korean with white background)
<style>
#google_translate_bar a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj12vmtNK0PBSz9UZX1tXkHFtsgIle6W3GPI9YYBq1zwJsOZ2SdtmTPBrTW6vHVcyvymV3Qi-zvOpbmW79TLWAvD7EjGVUZRBaEEcuk6Fu2u2JGLMsojLVCggQfxg9D-I7GjDs6/');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#google_translate_bar a.english_tr { background-position: 0 0;}
#google_translate_bar a:hover.english_tr {background-position: 0 -32px;}
#google_translate_bar a.spanish_tr { background-position: 0 -64px;}
#google_translate_bar a:hover.spanish_tr {background-position: 0 -96px;}
#google_translate_bar a.french_tr { background-position: 0 -128px;}
#google_translate_bar a:hover.french_tr {background-position: 0 -160px;}
#google_translate_bar a.arabic_tr { background-position: 0 -192px;}
#google_translate_bar a:hover.arabic_tr {background-position: 0 -224px;}
#google_translate_bar a.russian_tr { background-position: 0 -256px;}
#google_translate_bar a:hover.russian_tr {background-position: 0 -288px;}
#google_translate_bar a.turkish_tr { background-position: 0 -320px;}
#google_translate_bar a:hover.turkish_tr {background-position: 0 -352px;}
#google_translate_bar a.chinese_tr { background-position: 0 -384px;}
#google_translate_bar a:hover.chinese_tr {background-position: 0 -416px;}
#google_translate_bar a.japanese_tr { background-position: 0 -448px;}
#google_translate_bar a:hover.japanese_tr {background-position: 0 -480px;}
</style>
<span style="font-size:14px;font-weight:bold;padding-bottom:8px;padding-left:6px;">번역(Translate to) </span><br/><br/>
<div id='google_translate_bar'>
<a class="english_tr" href="#" title="영어(English)" onclick="google_translate('en')"></a>
<a class="spanish_tr" href="#" title="스페인어(Español)" onclick="google_translate('es')"></a>
<a class="french_tr" href="#" title="불어(français)" onclick="google_translate('fr')"></a>
<a class="arabic_tr" href="#" title="아랍어(العربية)" onclick="google_translate('ar')"></a>
<br/><br/>
<a class="russian_tr" href="#" title="러시아어(русский язык)" onclick="google_translate('ru')"></a>
<a class="turkish_tr" href="#" title="터키어(Türkçe)" onclick="google_translate('tr')"></a>
<a class="chinese_tr" href="#" title="중국어(中文)" onclick="google_translate('zh-CN')"></a>
<a class="japanese_tr" href="#" title="일본어(日本語)" onclick="google_translate('ja')"></a>
</div><br/><br/>
<span style="font-size:12x;padding-top:-2px;padding-left:32px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function google_translate(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


검은색 배경 사용자를 위한 구글 번역 위젯
(Sidebar style google translate widget for korean with black background)
<style>
#google_translate_bar a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXrBcGKozcUEAEVuCvvjh6mQUjQui5kfF5nksRnp9rBiiaMpBF5Xl_7gGvdDeaYRuyZ5SOpApaJ6uEn0LZgKfZ6drqjAEXpn5e7cueqvoiDxiXnoaF6aRaa_mCmxRgG7gxBmL/');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#google_translate_bar a.english_tr { background-position: 0 0;}
#google_translate_bar a:hover.english_tr {background-position: 0 -32px;}
#google_translate_bar a.spanish_tr { background-position: 0 -64px;}
#google_translate_bar a:hover.spanish_tr {background-position: 0 -96px;}
#google_translate_bar a.french_tr { background-position: 0 -128px;}
#google_translate_bar a:hover.french_tr {background-position: 0 -160px;}
#google_translate_bar a.arabic_tr { background-position: 0 -192px;}
#google_translate_bar a:hover.arabic_tr {background-position: 0 -224px;}
#google_translate_bar a.russian_tr { background-position: 0 -256px;}
#google_translate_bar a:hover.russian_tr {background-position: 0 -288px;}
#google_translate_bar a.turkish_tr { background-position: 0 -320px;}
#google_translate_bar a:hover.turkish_tr {background-position: 0 -352px;}
#google_translate_bar a.chinese_tr { background-position: 0 -384px;}
#google_translate_bar a:hover.chinese_tr {background-position: 0 -416px;}
#google_translate_bar a.japanese_tr { background-position: 0 -448px;}
#google_translate_bar a:hover.japanese_tr {background-position: 0 -480px;}
</style>
<span style="font-size:14px;font-weight:bold;padding-bottom:8px;padding-left:6px;">번역(Translate to) </span><br/><br/>
<div id='google_translate_bar'>
<a class="english_tr" href="#" title="영어(English)" onclick="google_translate('en')"></a>
<a class="spanish_tr" href="#" title="스페인어(Español)" onclick="google_translate('es')"></a>
<a class="french_tr" href="#" title="불어(français)" onclick="google_translate('fr')"></a>
<a class="arabic_tr" href="#" title="아랍어(العربية)" onclick="google_translate('ar')"></a>
<br/><br/>
<a class="russian_tr" href="#" title="러시아어(русский язык)" onclick="google_translate('ru')"></a>
<a class="turkish_tr" href="#" title="터키어(Türkçe)" onclick="google_translate('tr')"></a>
<a class="chinese_tr" href="#" title="중국어(中文)" onclick="google_translate('zh-CN')"></a>
<a class="japanese_tr" href="#" title="일본어(日本語)" onclick="google_translate('ja')"></a>
</div><br/><br/>
<span style="font-size:12x;padding-top:-2px;padding-left:32px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function google_translate(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


흰색 배경 사용자를 위한 마이크로소프트 번역기 위젯
(Sidebar style microsoft translator widget for korean with white background)
<style>
#microsoft_translator_bar a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj12vmtNK0PBSz9UZX1tXkHFtsgIle6W3GPI9YYBq1zwJsOZ2SdtmTPBrTW6vHVcyvymV3Qi-zvOpbmW79TLWAvD7EjGVUZRBaEEcuk6Fu2u2JGLMsojLVCggQfxg9D-I7GjDs6/');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#microsoft_translator_bar a.english_tr { background-position: 0 0;}
#microsoft_translator_bar a:hover.english_tr {background-position: 0 -32px;}
#microsoft_translator_bar a.spanish_tr { background-position: 0 -64px;}
#microsoft_translator_bar a:hover.spanish_tr {background-position: 0 -96px;}
#microsoft_translator_bar a.french_tr { background-position: 0 -128px;}
#microsoft_translator_bar a:hover.french_tr {background-position: 0 -160px;}
#microsoft_translator_bar a.arabic_tr { background-position: 0 -192px;}
#microsoft_translator_bar a:hover.arabic_tr {background-position: 0 -224px;}
#microsoft_translator_bar a.russian_tr { background-position: 0 -256px;}
#microsoft_translator_bar a:hover.russian_tr {background-position: 0 -288px;}
#microsoft_translator_bar a.turkish_tr { background-position: 0 -320px;}
#microsoft_translator_bar a:hover.turkish_tr {background-position: 0 -352px;}
#microsoft_translator_bar a.chinese_tr { background-position: 0 -384px;}
#microsoft_translator_bar a:hover.chinese_tr {background-position: 0 -416px;}
#microsoft_translator_bar a.japanese_tr { background-position: 0 -448px;}
#microsoft_translator_bar a:hover.japanese_tr {background-position: 0 -480px;}
</style>
<span style="font-size:14px;font-weight:bold;padding-bottom:8px;padding-left:6px;">번역(Translate to) </span><br/><br/>
<div id='microsoft_translator_bar'>
<a class="english_tr" href="#" title="영어(English)" onclick="microsoft_translator('en')"></a>
<a class="spanish_tr" href="#" title="스페인어(Español)" onclick="microsoft_translator('es')"></a>
<a class="french_tr" href="#" title="불어(français)" onclick="microsoft_translator('fr')"></a>
<a class="arabic_tr" href="#" title="아랍어(العربية)" onclick="microsoft_translator('ar')"></a>
<br/><br/>
<a class="russian_tr" href="#" title="러시아어(русский язык)" onclick="microsoft_translator('ru')"></a>
<a class="turkish_tr" href="#" title="터키어(Türkçe)" onclick="microsoft_translator('tr')"></a>
<a class="chinese_tr" href="#" title="중국어(中文)" onclick="microsoft_translator('zh-CN')"></a>
<a class="japanese_tr" href="#" title="일본어(日本語)" onclick="microsoft_translator('ja')"></a>
</div><br/><br/>
<span style="font-size:12x;padding-top:-2px;padding-left:32px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function microsoft_translator(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


검정색 배경 사용자를 위한 마이크로소프트 번역기 위젯
(Sidebar style microsoft translator widget for korean with black background)
<style>
#microsoft_translator_bar a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXrBcGKozcUEAEVuCvvjh6mQUjQui5kfF5nksRnp9rBiiaMpBF5Xl_7gGvdDeaYRuyZ5SOpApaJ6uEn0LZgKfZ6drqjAEXpn5e7cueqvoiDxiXnoaF6aRaa_mCmxRgG7gxBmL/');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#microsoft_translator_bar a.english_tr { background-position: 0 0;}
#microsoft_translator_bar a:hover.english_tr {background-position: 0 -32px;}
#microsoft_translator_bar a.spanish_tr { background-position: 0 -64px;}
#microsoft_translator_bar a:hover.spanish_tr {background-position: 0 -96px;}
#microsoft_translator_bar a.french_tr { background-position: 0 -128px;}
#microsoft_translator_bar a:hover.french_tr {background-position: 0 -160px;}
#microsoft_translator_bar a.arabic_tr { background-position: 0 -192px;}
#microsoft_translator_bar a:hover.arabic_tr {background-position: 0 -224px;}
#microsoft_translator_bar a.russian_tr { background-position: 0 -256px;}
#microsoft_translator_bar a:hover.russian_tr {background-position: 0 -288px;}
#microsoft_translator_bar a.turkish_tr { background-position: 0 -320px;}
#microsoft_translator_bar a:hover.turkish_tr {background-position: 0 -352px;}
#microsoft_translator_bar a.chinese_tr { background-position: 0 -384px;}
#microsoft_translator_bar a:hover.chinese_tr {background-position: 0 -416px;}
#microsoft_translator_bar a.japanese_tr { background-position: 0 -448px;}
#microsoft_translator_bar a:hover.japanese_tr {background-position: 0 -480px;}
</style>
<span style="font-size:14px;font-weight:bold;padding-bottom:8px;padding-left:6px;">번역(Translate to) </span><br/><br/>
<div id='microsoft_translator_bar'>
<a class="english_tr" href="#" title="영어(English)" onclick="microsoft_translator('en')"></a>
<a class="spanish_tr" href="#" title="스페인어(Español)" onclick="microsoft_translator('es')"></a>
<a class="french_tr" href="#" title="불어(français)" onclick="microsoft_translator('fr')"></a>
<a class="arabic_tr" href="#" title="아랍어(العربية)" onclick="microsoft_translator('ar')"></a>
<br/><br/>
<a class="russian_tr" href="#" title="러시아어(русский язык)" onclick="microsoft_translator('ru')"></a>
<a class="turkish_tr" href="#" title="터키어(Türkçe)" onclick="microsoft_translator('tr')"></a>
<a class="chinese_tr" href="#" title="중국어(中文)" onclick="microsoft_translator('zh-CN')"></a>
<a class="japanese_tr" href="#" title="일본어(日本語)" onclick="microsoft_translator('ja')"></a>
</div><br/><br/>
<span style="font-size:12x;padding-top:-2px;padding-left:32px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function microsoft_translator(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


Lightweight Translation Widget International Version

Lightweight translation widget support 12 languages.
Six Official languages of the United Nations.
And four languages based on Global Internet usage language.
Also two languages based on population of native speakers.

How to use

1. Choose a widget style.
2. Copy and Paste one of the code into your website or blog widget page.
3. Finish

Features

• Simple
• Intuitive UI
• Lightweight (using CSS Sprite)

Single line style translation widget

Single line style google translate widget with white background
<style>
#google_translate_bar a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh56-dicAlqqfDSiJl7VG-Fxcg2uu-CTMvqy49aiyqNDtU-jsOQ695y6dwJBLUQQR4JF_mcaL6H9md7gdX-817O1eUVzbP9GL3dbPoJEFn1D5InMLaafmG4WeYfJ87lxkMNbZWD/');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#google_translate_bar a.english_tr { background-position: 0 0;}
#google_translate_bar a:hover.english_tr {background-position: 0 -32px;}
#google_translate_bar a.spanish_tr { background-position: 0 -64px;}
#google_translate_bar a:hover.spanish_tr {background-position: 0 -96px;}
#google_translate_bar a.portuguese_tr { background-position: 0 -128px;}
#google_translate_bar a:hover.portuguese_tr {background-position: 0 -160px;}
#google_translate_bar a.french_tr { background-position: 0 -192px;}
#google_translate_bar a:hover.french_tr {background-position: 0 -224px;}
#google_translate_bar a.german_tr { background-position: 0 -256px;}
#google_translate_bar a:hover.german_tr {background-position: 0 -288px;}
#google_translate_bar a.russian_tr { background-position: 0 -320px;}
#google_translate_bar a:hover.russian_tr {background-position: 0 -352px;}
#google_translate_bar a.arabic_tr { background-position: 0 -384px;}
#google_translate_bar a:hover.arabic_tr {background-position: 0 -416px;}
#google_translate_bar a.hindi_tr { background-position: 0 -448px;}
#google_translate_bar a:hover.hindi_tr {background-position: 0 -480px;}
#google_translate_bar a.korean_tr { background-position: 0 -512px;}
#google_translate_bar a:hover.korean_tr {background-position: 0 -544px;}
#google_translate_bar a.chinese_tr { background-position: 0 -576px;}
#google_translate_bar a:hover.chinese_tr {background-position: 0 -608px;}
#google_translate_bar a.japanese_tr { background-position: 0 -640px;}
#google_translate_bar a:hover.japanese_tr {background-position: 0 -672px;}
#google_translate_bar a.bengali_tr { background-position: 0 -704px;}
#google_translate_bar a:hover.bengali_tr {background-position: 0 -736px;}
</style>
<span style="font-size:14px;font-weight:bold;float:left;display:block;padding-top:4px;padding-right:12px;">Translate to</span><div id='google_translate_bar'>
<a class="english_tr" href="#" title="English" onclick="google_translate('en')"></a>
<a class="spanish_tr" href="#" title="Español(Spanish)" onclick="google_translate('es')"></a>
<a class="portuguese_tr" href="#" title="Português(Portuguese)" onclick="google_translate('pt')"></a>
<a class="french_tr" href="#" title="français(French)" onclick="google_translate('fr')"></a>
<a class="german_tr" href="#" title="Deutsch(German)" onclick="google_translate('de')"></a>
<a class="russian_tr" href="#" title="русский язык(Russian)" onclick="google_translate('ru')"></a>
<a class="arabic_tr" href="#" title="العربية(Arabic)" onclick="google_translate('ar')"></a>
<a class="hindi_tr" href="#" title="हिन्दुस्तानी(Hindi)" onclick="google_translate('hi')"></a>
<a class="korean_tr" href="#" title="한국어(Korean)" onclick="google_translate('ko')"></a>
<a class="chinese_tr" href="#" title="中文(Chinese)" onclick="google_translate('zh-CN')"></a>
<a class="japanese_tr" href="#" title="日本語(Japanese)" onclick="google_translate('ja')"></a>
<a class="bengali_tr" href="#" title="বাংলা(Bengali)" onclick="google_translate('bn')"></a>
</div><span style="font-size:12x;float:left;display:block;padding-top:5px;padding-left:12px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function google_translate(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>



Single line style google translate widget with black background
<style>
#google_translate_bar a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih5-uzOe2Z4hbs9bcM6sjfXiS_lrYYzuekJVhnNzG0htNzTgj8lyupX9iCPeOIAOHX61MqM904xg8kLkpHAlTtmRl0YboyrXMRzByZwvWgVbLEwOsV8vaX3nNyAThkqKTmWi9Y/');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#google_translate_bar a.english_tr { background-position: 0 0;}
#google_translate_bar a:hover.english_tr {background-position: 0 -32px;}
#google_translate_bar a.spanish_tr { background-position: 0 -64px;}
#google_translate_bar a:hover.spanish_tr {background-position: 0 -96px;}
#google_translate_bar a.portuguese_tr { background-position: 0 -128px;}
#google_translate_bar a:hover.portuguese_tr {background-position: 0 -160px;}
#google_translate_bar a.french_tr { background-position: 0 -192px;}
#google_translate_bar a:hover.french_tr {background-position: 0 -224px;}
#google_translate_bar a.german_tr { background-position: 0 -256px;}
#google_translate_bar a:hover.german_tr {background-position: 0 -288px;}
#google_translate_bar a.russian_tr { background-position: 0 -320px;}
#google_translate_bar a:hover.russian_tr {background-position: 0 -352px;}
#google_translate_bar a.arabic_tr { background-position: 0 -384px;}
#google_translate_bar a:hover.arabic_tr {background-position: 0 -416px;}
#google_translate_bar a.hindi_tr { background-position: 0 -448px;}
#google_translate_bar a:hover.hindi_tr {background-position: 0 -480px;}
#google_translate_bar a.korean_tr { background-position: 0 -512px;}
#google_translate_bar a:hover.korean_tr {background-position: 0 -544px;}
#google_translate_bar a.chinese_tr { background-position: 0 -576px;}
#google_translate_bar a:hover.chinese_tr {background-position: 0 -608px;}
#google_translate_bar a.japanese_tr { background-position: 0 -640px;}
#google_translate_bar a:hover.japanese_tr {background-position: 0 -672px;}
#google_translate_bar a.bengali_tr { background-position: 0 -704px;}
#google_translate_bar a:hover.bengali_tr {background-position: 0 -736px;}
</style>
<span style="font-size:14px;font-weight:bold;float:left;display:block;padding-top:4px;padding-right:12px;">Translate to</span><div id='google_translate_bar'>
<a class="english_tr" href="#" title="English" onclick="google_translate('en')"></a>
<a class="spanish_tr" href="#" title="Español(Spanish)" onclick="google_translate('es')"></a>
<a class="portuguese_tr" href="#" title="Português(Portuguese)" onclick="google_translate('pt')"></a>
<a class="french_tr" href="#" title="français(French)" onclick="google_translate('fr')"></a>
<a class="german_tr" href="#" title="Deutsch(German)" onclick="google_translate('de')"></a>
<a class="russian_tr" href="#" title="русский язык(Russian)" onclick="google_translate('ru')"></a>
<a class="arabic_tr" href="#" title="العربية(Arabic)" onclick="google_translate('ar')"></a>
<a class="hindi_tr" href="#" title="हिन्दुस्तानी(Hindi)" onclick="google_translate('hi')"></a>
<a class="korean_tr" href="#" title="한국어(Korean)" onclick="google_translate('ko')"></a>
<a class="chinese_tr" href="#" title="中文(Chinese)" onclick="google_translate('zh-CN')"></a>
<a class="japanese_tr" href="#" title="日本語(Japanese)" onclick="google_translate('ja')"></a>
<a class="bengali_tr" href="#" title="বাংলা(Bengali)" onclick="google_translate('bn')"></a>
</div><span style="font-size:12x;float:left;display:block;padding-top:5px;padding-left:12px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function google_translate(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


Microsoft translator not supported Hindi and Bengali.



Single line style microsoft translator widget with white background
<style>
#microsoft_translator_bar a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh56-dicAlqqfDSiJl7VG-Fxcg2uu-CTMvqy49aiyqNDtU-jsOQ695y6dwJBLUQQR4JF_mcaL6H9md7gdX-817O1eUVzbP9GL3dbPoJEFn1D5InMLaafmG4WeYfJ87lxkMNbZWD/');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#microsoft_translator_bar a.english_tr { background-position: 0 0;}
#microsoft_translator_bar a:hover.english_tr {background-position: 0 -32px;}
#microsoft_translator_bar a.spanish_tr { background-position: 0 -64px;}
#microsoft_translator_bar a:hover.spanish_tr {background-position: 0 -96px;}
#microsoft_translator_bar a.portuguese_tr { background-position: 0 -128px;}
#microsoft_translator_bar a:hover.portuguese_tr {background-position: 0 -160px;}
#microsoft_translator_bar a.french_tr { background-position: 0 -192px;}
#microsoft_translator_bar a:hover.french_tr {background-position: 0 -224px;}
#microsoft_translator_bar a.german_tr { background-position: 0 -256px;}
#microsoft_translator_bar a:hover.german_tr {background-position: 0 -288px;}
#microsoft_translator_bar a.russian_tr { background-position: 0 -320px;}
#microsoft_translator_bar a:hover.russian_tr {background-position: 0 -352px;}
#microsoft_translator_bar a.arabic_tr { background-position: 0 -384px;}
#microsoft_translator_bar a:hover.arabic_tr {background-position: 0 -416px;}
#microsoft_translator_bar a.korean_tr { background-position: 0 -512px;}
#microsoft_translator_bar a:hover.korean_tr {background-position: 0 -544px;}
#microsoft_translator_bar a.chinese_tr { background-position: 0 -576px;}
#microsoft_translator_bar a:hover.chinese_tr {background-position: 0 -608px;}
#microsoft_translator_bar a.japanese_tr { background-position: 0 -640px;}
#microsoft_translator_bar a:hover.japanese_tr {background-position: 0 -672px;}

</style>
<span style="font-size:14px;font-weight:bold;float:left;display:block;padding-top:4px;padding-right:12px;">Translate to</span><div id='microsoft_translator_bar'>
<a class="english_tr" href="#" title="English" onclick="microsoft_translator('en')"></a>
<a class="spanish_tr" href="#" title="Español(Spanish)" onclick="microsoft_translator('es')"></a>
<a class="portuguese_tr" href="#" title="Português(Portuguese)" onclick="microsoft_translator('pt')"></a>
<a class="french_tr" href="#" title="français(French)" onclick="microsoft_translator('fr')"></a>
<a class="german_tr" href="#" title="Deutsch(German)" onclick="microsoft_translator('de')"></a>
<a class="russian_tr" href="#" title="русский язык(Russian)" onclick="microsoft_translator('ru')"></a>
<a class="arabic_tr" href="#" title="العربية(Arabic)" onclick="microsoft_translator('ar')"></a>
<a class="korean_tr" href="#" title="한국어(Korean)" onclick="microsoft_translator('ko')"></a>
<a class="chinese_tr" href="#" title="中文(Chinese)" onclick="microsoft_translator('zh-CN')"></a>
<a class="japanese_tr" href="#" title="日本語(Japanese)" onclick="microsoft_translator('ja')"></a>
</div><span style="font-size:12x;float:left;display:block;padding-top:5px;padding-left:12px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function microsoft_translator(language){
window.open('http://www.microsofttranslator.com/bv.aspx?ref=Internal&a='+encodeURIComponent(location.href)+'&from=&to='+language);
return false;
}
//]]>
</script>


Single line style microsoft translator widget with black background
<style>
#microsoft_translator_bar a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih5-uzOe2Z4hbs9bcM6sjfXiS_lrYYzuekJVhnNzG0htNzTgj8lyupX9iCPeOIAOHX61MqM904xg8kLkpHAlTtmRl0YboyrXMRzByZwvWgVbLEwOsV8vaX3nNyAThkqKTmWi9Y/');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#microsoft_translator_bar a.english_tr { background-position: 0 0;}
#microsoft_translator_bar a:hover.english_tr {background-position: 0 -32px;}
#microsoft_translator_bar a.spanish_tr { background-position: 0 -64px;}
#microsoft_translator_bar a:hover.spanish_tr {background-position: 0 -96px;}
#microsoft_translator_bar a.portuguese_tr { background-position: 0 -128px;}
#microsoft_translator_bar a:hover.portuguese_tr {background-position: 0 -160px;}
#microsoft_translator_bar a.french_tr { background-position: 0 -192px;}
#microsoft_translator_bar a:hover.french_tr {background-position: 0 -224px;}
#microsoft_translator_bar a.german_tr { background-position: 0 -256px;}
#microsoft_translator_bar a:hover.german_tr {background-position: 0 -288px;}
#microsoft_translator_bar a.russian_tr { background-position: 0 -320px;}
#microsoft_translator_bar a:hover.russian_tr {background-position: 0 -352px;}
#microsoft_translator_bar a.arabic_tr { background-position: 0 -384px;}
#microsoft_translator_bar a:hover.arabic_tr {background-position: 0 -416px;}
#microsoft_translator_bar a.korean_tr { background-position: 0 -512px;}
#microsoft_translator_bar a:hover.korean_tr {background-position: 0 -544px;}
#microsoft_translator_bar a.chinese_tr { background-position: 0 -576px;}
#microsoft_translator_bar a:hover.chinese_tr {background-position: 0 -608px;}
#microsoft_translator_bar a.japanese_tr { background-position: 0 -640px;}
#microsoft_translator_bar a:hover.japanese_tr {background-position: 0 -672px;}

</style>
<span style="font-size:14px;font-weight:bold;float:left;display:block;padding-top:4px;padding-right:12px;">Translate to</span><div id='microsoft_translator_bar'>
<a class="english_tr" href="#" title="English" onclick="microsoft_translator('en')"></a>
<a class="spanish_tr" href="#" title="Español(Spanish)" onclick="microsoft_translator('es')"></a>
<a class="portuguese_tr" href="#" title="Português(Portuguese)" onclick="microsoft_translator('pt')"></a>
<a class="french_tr" href="#" title="français(French)" onclick="microsoft_translator('fr')"></a>
<a class="german_tr" href="#" title="Deutsch(German)" onclick="microsoft_translator('de')"></a>
<a class="russian_tr" href="#" title="русский язык(Russian)" onclick="microsoft_translator('ru')"></a>
<a class="arabic_tr" href="#" title="العربية(Arabic)" onclick="microsoft_translator('ar')"></a>
<a class="korean_tr" href="#" title="한국어(Korean)" onclick="microsoft_translator('ko')"></a>
<a class="chinese_tr" href="#" title="中文(Chinese)" onclick="microsoft_translator('zh-CN')"></a>
<a class="japanese_tr" href="#" title="日本語(Japanese)" onclick="microsoft_translator('ja')"></a>
</div><span style="font-size:12x;float:left;display:block;padding-top:5px;padding-left:12px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function microsoft_translator(language){
window.open('http://www.microsofttranslator.com/bv.aspx?ref=Internal&a='+encodeURIComponent(location.href)+'&from=&to='+language);
return false;
}
//]]>
</script>


Sidebar style translation widget

Sidebar style google translate widget with white background <style>
#google_translate_bar a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh56-dicAlqqfDSiJl7VG-Fxcg2uu-CTMvqy49aiyqNDtU-jsOQ695y6dwJBLUQQR4JF_mcaL6H9md7gdX-817O1eUVzbP9GL3dbPoJEFn1D5InMLaafmG4WeYfJ87lxkMNbZWD/');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#google_translate_bar a.english_tr { background-position: 0 0;}
#google_translate_bar a:hover.english_tr {background-position: 0 -32px;}
#google_translate_bar a.spanish_tr { background-position: 0 -64px;}
#google_translate_bar a:hover.spanish_tr {background-position: 0 -96px;}
#google_translate_bar a.portuguese_tr { background-position: 0 -128px;}
#google_translate_bar a:hover.portuguese_tr {background-position: 0 -160px;}
#google_translate_bar a.french_tr { background-position: 0 -192px;}
#google_translate_bar a:hover.french_tr {background-position: 0 -224px;}
#google_translate_bar a.german_tr { background-position: 0 -256px;}
#google_translate_bar a:hover.german_tr {background-position: 0 -288px;}
#google_translate_bar a.russian_tr { background-position: 0 -320px;}
#google_translate_bar a:hover.russian_tr {background-position: 0 -352px;}
#google_translate_bar a.arabic_tr { background-position: 0 -384px;}
#google_translate_bar a:hover.arabic_tr {background-position: 0 -416px;}
#google_translate_bar a.hindi_tr { background-position: 0 -448px;}
#google_translate_bar a:hover.hindi_tr {background-position: 0 -480px;}
#google_translate_bar a.korean_tr { background-position: 0 -512px;}
#google_translate_bar a:hover.korean_tr {background-position: 0 -544px;}
#google_translate_bar a.chinese_tr { background-position: 0 -576px;}
#google_translate_bar a:hover.chinese_tr {background-position: 0 -608px;}
#google_translate_bar a.japanese_tr { background-position: 0 -640px;}
#google_translate_bar a:hover.japanese_tr {background-position: 0 -672px;}
#google_translate_bar a.bengali_tr { background-position: 0 -704px;}
#google_translate_bar a:hover.bengali_tr {background-position: 0 -736px;}
</style>
<span style="font-size:14px;font-weight:bold;padding-bottom:8px;padding-left:6px;">Translate to </span><br/><br/><div id='google_translate_bar'>
<a class="english_tr" href="#" title="English" onclick="google_translate('en')"></a>
<a class="spanish_tr" href="#" title="Español(Spanish)" onclick="google_translate('es')"></a>
<a class="portuguese_tr" href="#" title="Português(Portuguese)" onclick="google_translate('pt')"></a>
<a class="french_tr" href="#" title="français(French)" onclick="google_translate('fr')"></a>
<br/><br/>
<a class="german_tr" href="#" title="Deutsch(German)" onclick="google_translate('de')"></a>
<a class="russian_tr" href="#" title="русский язык(Russian)" onclick="google_translate('ru')"></a>
<a class="arabic_tr" href="#" title="العربية(Arabic)" onclick="google_translate('ar')"></a>
<a class="hindi_tr" href="#" title="हिन्दुस्तानी(Hindi)" onclick="google_translate('hi')"></a>
<br/><br/>
<a class="korean_tr" href="#" title="한국어(Korean)" onclick="google_translate('ko')"></a>
<a class="chinese_tr" href="#" title="中文(Chinese)" onclick="google_translate('zh-CN')"></a>
<a class="japanese_tr" href="#" title="日本語(Japanese)" onclick="google_translate('ja')"></a>
<a class="bengali_tr" href="#" title="বাংলা(Bengali)" onclick="google_translate('bn')"></a>
</div><br/><br/>
<span style="font-size:12x;padding-top:-2px;padding-left:32px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function google_translate(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


Sidebar style google translate widget with black background
<style>
#google_translate_bar a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih5-uzOe2Z4hbs9bcM6sjfXiS_lrYYzuekJVhnNzG0htNzTgj8lyupX9iCPeOIAOHX61MqM904xg8kLkpHAlTtmRl0YboyrXMRzByZwvWgVbLEwOsV8vaX3nNyAThkqKTmWi9Y/');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#google_translate_bar a.english_tr { background-position: 0 0;}
#google_translate_bar a:hover.english_tr {background-position: 0 -32px;}
#google_translate_bar a.spanish_tr { background-position: 0 -64px;}
#google_translate_bar a:hover.spanish_tr {background-position: 0 -96px;}
#google_translate_bar a.portuguese_tr { background-position: 0 -128px;}
#google_translate_bar a:hover.portuguese_tr {background-position: 0 -160px;}
#google_translate_bar a.french_tr { background-position: 0 -192px;}
#google_translate_bar a:hover.french_tr {background-position: 0 -224px;}
#google_translate_bar a.german_tr { background-position: 0 -256px;}
#google_translate_bar a:hover.german_tr {background-position: 0 -288px;}
#google_translate_bar a.russian_tr { background-position: 0 -320px;}
#google_translate_bar a:hover.russian_tr {background-position: 0 -352px;}
#google_translate_bar a.arabic_tr { background-position: 0 -384px;}
#google_translate_bar a:hover.arabic_tr {background-position: 0 -416px;}
#google_translate_bar a.hindi_tr { background-position: 0 -448px;}
#google_translate_bar a:hover.hindi_tr {background-position: 0 -480px;}
#google_translate_bar a.korean_tr { background-position: 0 -512px;}
#google_translate_bar a:hover.korean_tr {background-position: 0 -544px;}
#google_translate_bar a.chinese_tr { background-position: 0 -576px;}
#google_translate_bar a:hover.chinese_tr {background-position: 0 -608px;}
#google_translate_bar a.japanese_tr { background-position: 0 -640px;}
#google_translate_bar a:hover.japanese_tr {background-position: 0 -672px;}
#google_translate_bar a.bengali_tr { background-position: 0 -704px;}
#google_translate_bar a:hover.bengali_tr {background-position: 0 -736px;}
</style>
<span style="font-size:14px;font-weight:bold;padding-bottom:8px;padding-left:6px;">Translate to </span><br/><br/><div id='google_translate_bar'>
<a class="english_tr" href="#" title="English" onclick="google_translate('en')"></a>
<a class="spanish_tr" href="#" title="Español(Spanish)" onclick="google_translate('es')"></a>
<a class="portuguese_tr" href="#" title="Português(Portuguese)" onclick="google_translate('pt')"></a>
<a class="french_tr" href="#" title="français(French)" onclick="google_translate('fr')"></a>
<br/><br/>
<a class="german_tr" href="#" title="Deutsch(German)" onclick="google_translate('de')"></a>
<a class="russian_tr" href="#" title="русский язык(Russian)" onclick="google_translate('ru')"></a>
<a class="arabic_tr" href="#" title="العربية(Arabic)" onclick="google_translate('ar')"></a>
<a class="hindi_tr" href="#" title="हिन्दुस्तानी(Hindi)" onclick="google_translate('hi')"></a>
<br/><br/>
<a class="korean_tr" href="#" title="한국어(Korean)" onclick="google_translate('ko')"></a>
<a class="chinese_tr" href="#" title="中文(Chinese)" onclick="google_translate('zh-CN')"></a>
<a class="japanese_tr" href="#" title="日本語(Japanese)" onclick="google_translate('ja')"></a>
<a class="bengali_tr" href="#" title="বাংলা(Bengali)" onclick="google_translate('bn')"></a>
</div><br/><br/>
<span style="font-size:12x;padding-top:-2px;padding-left:32px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function google_translate(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


Microsoft translator not supported Hindi and Bengali.



Sidebar style microsoft translator widget with white background
<style>
#microsoft_translator_bar a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh56-dicAlqqfDSiJl7VG-Fxcg2uu-CTMvqy49aiyqNDtU-jsOQ695y6dwJBLUQQR4JF_mcaL6H9md7gdX-817O1eUVzbP9GL3dbPoJEFn1D5InMLaafmG4WeYfJ87lxkMNbZWD/');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#microsoft_translator_bar a.english_tr { background-position: 0 0;}
#microsoft_translator_bar a:hover.english_tr {background-position: 0 -32px;}
#microsoft_translator_bar a.spanish_tr { background-position: 0 -64px;}
#microsoft_translator_bar a:hover.spanish_tr {background-position: 0 -96px;}
#microsoft_translator_bar a.portuguese_tr { background-position: 0 -128px;}
#microsoft_translator_bar a:hover.portuguese_tr {background-position: 0 -160px;}
#microsoft_translator_bar a.french_tr { background-position: 0 -192px;}
#microsoft_translator_bar a:hover.french_tr {background-position: 0 -224px;}
#microsoft_translator_bar a.german_tr { background-position: 0 -256px;}
#microsoft_translator_bar a:hover.german_tr {background-position: 0 -288px;}
#microsoft_translator_bar a.russian_tr { background-position: 0 -320px;}
#microsoft_translator_bar a:hover.russian_tr {background-position: 0 -352px;}
#microsoft_translator_bar a.arabic_tr { background-position: 0 -384px;}
#microsoft_translator_bar a:hover.arabic_tr {background-position: 0 -416px;}
#microsoft_translator_bar a.korean_tr { background-position: 0 -512px;}
#microsoft_translator_bar a:hover.korean_tr {background-position: 0 -544px;}
#microsoft_translator_bar a.chinese_tr { background-position: 0 -576px;}
#microsoft_translator_bar a:hover.chinese_tr {background-position: 0 -608px;}
#microsoft_translator_bar a.japanese_tr { background-position: 0 -640px;}
#microsoft_translator_bar a:hover.japanese_tr {background-position: 0 -672px;}
</style>
<span style="font-size:14px;font-weight:bold;padding-bottom:8px;padding-left:6px;">Translate to </span><br/><br/><div id='microsoft_translator_bar'>
<a class="english_tr" href="#" title="English" onclick="microsoft_translator('en')"></a>
<a class="spanish_tr" href="#" title="Español(Spanish)" onclick="microsoft_translator('es')"></a>
<a class="portuguese_tr" href="#" title="Português(Portuguese)" onclick="microsoft_translator('pt')"></a>
<a class="french_tr" href="#" title="français(French)" onclick="microsoft_translator('fr')"></a>
<br/><br/>
<a class="german_tr" href="#" title="Deutsch(German)" onclick="microsoft_translator('de')"></a>
<a class="russian_tr" href="#" title="русский язык(Russian)" onclick="microsoft_translator('ru')"></a>
<a class="arabic_tr" href="#" title="العربية(Arabic)" onclick="microsoft_translator('ar')"></a>
<br/><br/>
<a class="korean_tr" href="#" title="한국어(Korean)" onclick="microsoft_translator('ko')"></a>
<a class="chinese_tr" href="#" title="中文(Chinese)" onclick="microsoft_translator('zh-CN')"></a>
<a class="japanese_tr" href="#" title="日本語(Japanese)" onclick="microsoft_translator('ja')"></a>
</div><br/><br/>
<span style="font-size:12x;padding-top:-2px;padding-left:32px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function microsoft_translator(language){
window.open('http://www.microsofttranslator.com/bv.aspx?ref=Internal&a='+encodeURIComponent(location.href)+'&from=&to='+language);
return false;
}
//]]>
</script>


Sidebar style microsoft translator widget with black background
<style>
#microsoft_translator_bar a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih5-uzOe2Z4hbs9bcM6sjfXiS_lrYYzuekJVhnNzG0htNzTgj8lyupX9iCPeOIAOHX61MqM904xg8kLkpHAlTtmRl0YboyrXMRzByZwvWgVbLEwOsV8vaX3nNyAThkqKTmWi9Y/');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#microsoft_translator_bar a.english_tr { background-position: 0 0;}
#microsoft_translator_bar a:hover.english_tr {background-position: 0 -32px;}
#microsoft_translator_bar a.spanish_tr { background-position: 0 -64px;}
#microsoft_translator_bar a:hover.spanish_tr {background-position: 0 -96px;}
#microsoft_translator_bar a.portuguese_tr { background-position: 0 -128px;}
#microsoft_translator_bar a:hover.portuguese_tr {background-position: 0 -160px;}
#microsoft_translator_bar a.french_tr { background-position: 0 -192px;}
#microsoft_translator_bar a:hover.french_tr {background-position: 0 -224px;}
#microsoft_translator_bar a.german_tr { background-position: 0 -256px;}
#microsoft_translator_bar a:hover.german_tr {background-position: 0 -288px;}
#microsoft_translator_bar a.russian_tr { background-position: 0 -320px;}
#microsoft_translator_bar a:hover.russian_tr {background-position: 0 -352px;}
#microsoft_translator_bar a.arabic_tr { background-position: 0 -384px;}
#microsoft_translator_bar a:hover.arabic_tr {background-position: 0 -416px;}
#microsoft_translator_bar a.korean_tr { background-position: 0 -512px;}
#microsoft_translator_bar a:hover.korean_tr {background-position: 0 -544px;}
#microsoft_translator_bar a.chinese_tr { background-position: 0 -576px;}
#microsoft_translator_bar a:hover.chinese_tr {background-position: 0 -608px;}
#microsoft_translator_bar a.japanese_tr { background-position: 0 -640px;}
#microsoft_translator_bar a:hover.japanese_tr {background-position: 0 -672px;}
</style>
<span style="font-size:14px;font-weight:bold;padding-bottom:8px;padding-left:6px;">Translate to </span><br/><br/><div id='microsoft_translator_bar'>
<a class="english_tr" href="#" title="English" onclick="microsoft_translator('en')"></a>
<a class="spanish_tr" href="#" title="Español(Spanish)" onclick="microsoft_translator('es')"></a>
<a class="portuguese_tr" href="#" title="Português(Portuguese)" onclick="microsoft_translator('pt')"></a>
<a class="french_tr" href="#" title="français(French)" onclick="microsoft_translator('fr')"></a>
<br/><br/>
<a class="german_tr" href="#" title="Deutsch(German)" onclick="microsoft_translator('de')"></a>
<a class="russian_tr" href="#" title="русский язык(Russian)" onclick="microsoft_translator('ru')"></a>
<a class="arabic_tr" href="#" title="العربية(Arabic)" onclick="microsoft_translator('ar')"></a>
<br/><br/>
<a class="korean_tr" href="#" title="한국어(Korean)" onclick="microsoft_translator('ko')"></a>
<a class="chinese_tr" href="#" title="中文(Chinese)" onclick="microsoft_translator('zh-CN')"></a>
<a class="japanese_tr" href="#" title="日本語(Japanese)" onclick="microsoft_translator('ja')"></a>
</div><br/><br/>
<span style="font-size:12x;padding-top:-2px;padding-left:32px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function microsoft_translator(language){
window.open('http://www.microsofttranslator.com/bv.aspx?ref=Internal&a='+encodeURIComponent(location.href)+'&from=&to='+language);
return false;
}
//]]>
</script>


언어 참고 자료 (References)
Official languages of the United Nations
Global Internet usage
List of languages by number of native speakers



月風에 의해 창작된 Lightweight Translation Widget 은(는) 크리에이티브 커먼즈 저작자표시(Attribution) 3.0 Unported 라이선스에 따라 이용할 수 있습니다.

Lightweight Translation Widget by 月風 is licensed under a Creative Commons Attribution 3.0 Unported License.

Lightweight Translation Widget by 月風 is licensed under a Creative Commons Reconocimiento 3.0 Unported License.

Lightweight Translation Widget de 月風 est mis à disposition selon les termes de la licence Creative Commons Paternité 3.0 non transcrit.

Lightweight Translation Widget by 月風 هو المرخص لها بموجب المشاع الإبداعي نسب المصنف 3.0 الاصلية الترخيص .

Произведение «Lightweight Translation Widget» созданное автором по имени 月風, публикуется на условиях лицензии Creative Commons Attribution (Атрибуция) 3.0 Непортированная.

Lightweight Translation Widget由月風製作，以創用CC 姓名標示 3.0 Unported 授權條款釋出。

Lightweight Translation Widget by 月風 is licensed under a Creative Commons 表示 3.0 非移植 License.

by 月風

Tags : 번역, 블로그, 위젯, blog, IT, lightweight translation widget

• 재미있게 읽으셨나요?
  광고를 클릭해주시면,
  블로그 운영에 큰 도움이 됩니다!