티스토리에 구글 다국어 번역 위젯 간편 설치하기

구글 다국어 번역 위젯 설치 코드

 

한글로 쓰인 웹문서들이 클릭 한 번으로 다양한 언어로 번역이 되는 시대를 살고 있습니다. 내 웹문서가 영어로 바로 번역된 것을 보는 것도 흥미롭지 않나요. 이제 티스토리에 다국어 번역 위젯을 달아보도록 하겠어요.

 

#1 GTranslate 사이트로 이동합니다.

GTranslate는 웹사이트 번역 서비스 제공업체입니다. 아래를 클릭하시면 GTranslate 웹사이트로 가게 됩니다.

GTranslate - Website Translator: Translate Your Website

 

#2 구글 다국어 번역 위젯 무료버전을 다운로드합니다.

PRICING 메뉴를 클릭하면 무료 버전(FREE)과 다양한 기능을 포함한 유료버전들이 있습니다. 저는 무료 버전(FREE)을 다운로드하여 설치해보려 합니다.

무료 버전(FREE) 아래 초록색 버튼 DOWNLOAD를 클릭합니다.

 

그러면, 팝업창이 뜨는데 거기에서 [HTML] 탭을 클릭합니다. 여기에서 자신이 원하는 폼으로 설정을 변경합니다. 

저는 Default language를 한국어로 하고, Flag size는 24px로 했습니다. 그리고 Flag language는 영어와 한국어만 나타나도록 하고 다른 언어들은 Dropdown language로 선택할 수 있도록 하였습니다.

나의 설정에 맞게 오른쪽 아래에 Widget code가 생성됩니다. 이 코드를 선택하여 복사(Ctrl+C)를 합니다.

 

※ 저는 Visual Studio를 사용하여 제 웹에 어울리도록 코드를 약간 수정하였습니다.
제가 수정한 코드는 아래와 같습니다. 원하신다면 복사(Ctrl+C)해서 사용하시면 됩니다.

 

See the Pen Untitled by Eunu (@eunu) on CodePen.

 

#3 (플러그인) HTML 배너출력을 사용하여 사이드바에 구글 번역 위젯을 답니다.

티스토리 블로그 관리 페이지로 이동합니다. [꾸미기] 메뉴에서 [사이드바]를 선택하면 [[플러그인]HTML 배너출력]이 있습니다. 이 [HTML 배너출력]을 내가 원하는 사이드바에 추가합니다. 

저는 [사이드바3]의 오른쪽 사이드바에 추가하였습니다. 그리고 [HTML 배너출력]의 편집을 눌러 [이름]을 입력하고 2번에서 복사한 코드를 [HTML 소스]에 붙여 넣었습니다.

※ 아래 [HTML 소스]는 제가 수정한 내용입니다. 여러분들이 위젯 코드에서 설정한 내용과는 다를 수 있습니다.

[변경사항 저장]을 잊으시면 안 됩니다. [변경사항 저장]을 클릭해야 적용이 됩니다.

 

#4 웹문서에서 구글 다국어 번역을 실행해 봅니다.

웹문서에서 확인하니 구글 다국어 번역 위젯이 잘 설치되었네요.

한글 버전일 때 제 웹사이트 문서입니다.

웹 사이트 한글 버전

 

설치한 구글 다국어 번역 위젯의 영어를 클릭하니 영어로 번역이 되어 나오네요. 이제 세계의 여러 나라 사람들이 제 문서를 볼 수 있겠네요. 

웹 사이트 영어 버전