[티스토리 / html]Web Page Translate Using Google With Flag and Dropdown Widget

 

블로그들을 보다보면 다른 언어를 사용하는 사람들을 위해서 Google Translate를 Widget형태로 사용하는 모습을 볼 수 있습니다.

Google Translte Widget

 

해당 위젯을 만드는 방법을 빠르게 알아보자, 여기서는 내가 사용중인 블로그 tisotry로 예시를 보여주려고 한다.

현재 제 블로그 메인화면에 이렇게 적용되어 있습니다.

---

 

Google Translate Flag  and Dropdown 위젯 만들기

 

1) 아래 granslate.io 사이트로 이동한다. (https://gtranslate.io/)

Website Translator Widget

 

 

---

 

 

2) 메인 화면에서 "GO GLOBAL"을 선택한다.

 

go global

 

 

---

 

 

3) Free항목의 "Download"를 선택한다.

 

Free > Download

 

 

---

 

 

4) 그러면 뭔가 많이 뜰텐데 가장 아래쪽의 "Other HTML"를 선택한다.

 

다른 것들은 자신의 블로그에 맞춰서 다운받을 수 있다.

티스토리는 HTML형식이므로 위 링크로 이동하자.

 

 

 

---

 

 

5) 자신이 생성할 Widget의 코드를 설정하는 페이지다. 아래 예시를 참조해서 본인이 원하는 값을 선택하자.

widget settings

 

---

 

5-1) Float

Float

 

---

 

5-2) Nice dropdown with flags

Nice dropdown with flags

 

 

---

 

5-3) Flags and dropdown

Flags and dropdown

 

---

 

5-4) Dropdown

Dropdown

 

---

5-5) Flags 

Flags

 

---

 

5-5) Flags with language name 

Flags with language name

 

---

 

5-6) Flags with language code 

Flags with language code

 

---

 

5-7) Language names

Language names

 

---

 

5-8) Language codes

Language codes

 

---

 

5-9) Globe

Globe

 

---

5-10) Popup 

Popup

 

---

 

※Inline 체크를 하지 않을경우 아래처럼 된다.

if not checked Inline

 

 

---

 

6) 페이지 최하단에, "Update Preview"버튼을 누르면 어떤 모습일지 미리 볼 수 있고, 마음에 드는 UI로 설정한뒤 Widget Code를 복사한다.

Widget Code Copy

 

 

---

 

 

7) 티스토리 > 관리 > 스킨 편집 > HTML 편집으로 이동한다.

html 편집

 

---

 

8) HTML탭 > 원하는 위치에 복사한 코드를 붙여넣어준다.

복붙

 

9) 적용 이후 페이지 새로고침을 하면 끝.

refresh page

 

 

끝.