가벼운 번역 위젯 (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

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

[블로그,속도] 구글 블로거. 최근글 가젯 수정으로 블로그 속도를 빠르게 해보자.

최근글 - 최근글 가젯 수정으로 블로그 속도를 빠르게!

텍스트큐브와 블로거의 갑작스러운 통합으로,
작년 말에 구글 블로거로 이전했습니다.
처음 써보는 서비스라, 익숙하지가 않았어요.
우선 급하게 스킨을 좀 손보고, 가젯을 몇개 추가해 놓았죠.
그런데 제 블로그에 접속할 때마다 로딩 시간이 너무 긴 거에요.
'구글 블로거는 원래 느린가?'
그렇게 생각하고 한동안 그냥 지냈죠.
아무래도 의심이 되어 로딩될때 페이지를 유심히 보았더니,
최근글 가젯이 눈에 띄더군요.
다른페이지 다~~ 로딩 되고 한참 후에 나타나는 최근글.
뭔가 이상합니다.


블로거 가젯 추가 - 최근글 가젯 수정으로 블로그 속도를 빠르게!

구글 블로거의 관리자 모드에서 디자인 페이지는,
스킨을 수정할 수 있는 페이지 입니다.
'페이지 구성요소'에서 손쉽게 가젯을 추가 할 수 있죠.
이곳에서 '가젯 추가'를 눌러 최근글 가젯을 추가 했었어요.
이 가젯이 저의 블로그 속도를 통 플레쉬 홈페이지만큼 느리게 만든 원인 중 하나였던 겁니다.
최근글을 없에자니 허전하고,
블로그 속도는 너무 느리고..
검색을 해 보았더니, 해결책이 나왔습니다.


피드버너 버즈부스트 - 최근글 가젯 수정으로 블로그 속도를 빠르게!

바로 피드버너를 이용하는 방법이에요.
피드버너에 로그인후,
Publicize메뉴에서 버즈부스트(BuzzBoost)를 찾을 수 있어요.
버즈부스트 페이지에서 상세 설정을 합니다.
글을 몇개나 보여줄 건지, 내용을 보여줄 건지 등을 말이죠.
그리고 맨 아래에서 Active버튼을 눌러 활성화 시켜주세요.
그럼 버즈부스트를 사용할 수 있게 됩니다.
마지막으로 Use as a widget in에서 Blogger를 선택후 Go! 버튼을 누르면!
피드버너 버즈부스트를 이용한 최근글 가젯이 블로거에 추가됩니다.
확실히 속도가 빨라졌어요.^^

참조글(Reference)
Fast Loading Recent Posts Widget for Blogger

by 月風

Tags : 가젯, 구글 블로거, 블로그, 속도, 위젯, 최근글, blog, IT

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

[블로그,믹시] 구글 블로거 게시물에 믹시 mixup 위젯 설치하기.

mixup 위젯 - 믹시 mixup 위젯 설치

구글 블로거는 다른 서비스를 이용하는 블로거들과 소통할 방법이 마땅치 않습니다.
그래서 메타블로그인 믹시 서비스에 가입했죠.
믹시에선 블로그에 설치할 만한 몇 가지 위젯을 제공하는데요.
저는 게시물에 믹시 mixup 위젯을 달아보았습니다.
게시물이 마음에 든다면 원 클릭으로 추천을 할 수 있는 위젯이죠.
우선 믹시에 로그인을 한 후.
마이믹시 → 블로그/위젯등록 → 블로그 도구 →Mixup 위젯 에서 코드를 받을 수 있어요.
코드를 받아 제 블로그에 설치를 해보니 영 모양새가 마음에 안드는군요.
제 블로그는 어두운 배경인데, 믹시의 mixup위젯은 밝은 배경이어서 그럴까요?
코드를 약간 손보아, 위젯을 버튼형으로 달았습니다.
믹시에서 받은 코드에서 iframe의 크기만 조절했어요.
width= 402 , height = 91 이라 되어있는 부분을,
width = 72, height = 68 로 바꾸어 주시면 위젯이 버튼처럼 보여요.
이제 이 코드를 블로그  스킨에 붙여 넣으시면 설치가 끝나요.
스킨에서 '<data:post.body/>'로 검색하고, 바로 그 아래에 붙여 넣으면 됩니다.



크기를 줄인 버튼형 mixup 위젯 - 믹시 mixup 위젯 설치

버튼형이 제 블로그엔 더 어울리는군요.
iframe이라 내부 코드에 손을 댈 수 없는게 아쉽습니다.
화면엔 보이지 않는 부분도 로딩은 되니까요.
어쨌거나 믹시의 mixup 위젯 덕분에,
구글 블로거도 다른 블로거들과 소통 할 수 있게 되었어요.^^

by 月風

Tags : 구글 블로거, 믹시, 블로그, 위젯, blog, IT, mixup

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