GTranslate를 이용한 위젯 설정
아마 구글번역기를 기반으로 만들어진 번역기 인것으로 알고있다.
그래서 아마 번역의 퀄리티가 그렇게 좋지는 않을 것이라고 생각...
https://gtranslate.io/
위의 사이트에 접속하여 다음 사진을을 보며 천천히 따라와보자!
GO GLOBAL을 선택
뭔가 요금을 선택하라는 듯한 화면이 나오는데 무시하고 0달러 짜리 다운로드를 선택해주면 된다.
선택하면 이런화면이 나올텐데 제일 밑에있는 Other HTML을 선택해주자
그럼 마지막으로 이런 화면이 나올텐데 원하는 위젯스타일과 표시할 언어등을 선택한 뒤 widget code에 적혀있는 내용을 복사해주면 된다
이후 티스토리 관리자 - 플러그인 - 배너출력을 선택하여 적용 해주도록하자
(적용하지 않으면 위에서 복사해둔 위젯코드를 사용할 수 없다)
적용하였다면 왼쪽메뉴에서 사이드바를 선택한다
그럼 이런화면이 뜰텐데 HTML 배너출력이라는 모듈을 + 버튼을 눌러서 사이드바에 추가해주도록 하자
이후, 추가된 사이드바에서 배너출력위에 마우스를 올리면 편집버튼이 나오는데 편집을 눌러서 위와같은 화면을 띄워준 뒤, 아까 복사해두었던 HTML코드를 붙여넣기하고 확인버튼을 누르면 끝이다!
나의 경우에는 현재 내 블로그에도 보이다시피 지구본모양의 위젯을 선택했는데 혹시나 나와 같은 위젯을 선택했다면 아마 왼쪽에 딱 달라붙어 보기싫은 모양이 될 것이다...
나 처럼 지구본을 가운데정렬하고 Change Language라는 문구까지 추가하고 싶다면 다음과 같이 입력해주면 된다.
<div style="display: flex; align-items: center; flex-direction: column">
<div class="gtranslate_wrapper"></div>
<p style="margin-top: 20px; margin-bottom: 5px;">Change Language</p>
<script>window.gtranslateSettings = {"default_language":"ko","detect_browser_language":true,"languages":["ko","ja"],"globe_color":"#66aaff","wrapper_selector":".gtranslate_wrapper","alt_flags":{"en":"usa"}}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/globe.js" defer></script>
</div>
백엔드쪽으로만 열심히 공부하고 html이나 css등은 정말 기본만 알아서 처음에는 가운데정렬을 어떻게 해야하는지 몰라서 한참 해맷다..
어찌저찌 해결해서 혹시나 나와같은 고민을 안고있느 사람들을 위해 코드까지 남김!