티스토리 다국어 번역 버튼 사이드바 적용 방법

앞서 구글 다국어 번역 기능을 추가하는 방법에 대해서 포스팅한 적이 있는데요~

 

선택을 누르면 워낙 다양한 국가들이 표시되기 때문에 바로 사용하기 불편한 감이 있었습니다.

 

그러다가 미넴 블로그를 방문해보니 다국어 번역 기능이 국기로 표시되어 있어 시인성이 좋고 사용성도 좋아 따라서 적용해 보기로 했습니다.

 

아래 미넴님 사이트에 가면 정말 도움이 되는 정보가 많으니 궁금하신분은 꼭 한번 방문해 보시길 바랄게요~

 

미넴님께서는 정말 기능이 뛰어난 티스토리 스킨을 무료로 배포하고 있으니 사용하실 분은 티스토리를 방문하세요~ 

 

미리 알았다면 좋았을 텐데

 

우선 저는 여기 저기 구글 검색을 통해서 코드를 얻었는데요~ 

 

티스토리 다국어 번역 버튼 사이드바 적용 방법

 

최종 코드는 아래와 같습니다. 

 

<!-- 다국어 번역 -->
<div id="google_translate_element" style="display:none;"></div>
<div class="translation-links">
    <span><img src="https://tistory4.daumcdn.net/tistory/4029016/skin/images/ko.png" height="24" width="24" alt="한국" loading="lazy" href="javascript:void(0)" class="korea" data-lang="ko"></span>
    <span><img src="https://tistory4.daumcdn.net/tistory/4029016/skin/images/en.png" height="24" width="24" alt="미국" loading="lazy" href="javascript:void(0)" class="english" data-lang="en"></span>
    <span><img src="https://tistory4.daumcdn.net/tistory/4029016/skin/images/zh-CN.png" height="24" width="24" alt="중국" loading="lazy" href="javascript:void(0)" class="china" data-lang="zh-CN"></span>
    <span><img src="https://tistory4.daumcdn.net/tistory/4029016/skin/images/ja.png" height="24" width="24" alt="일본" loading="lazy" href="javascript:void(0)" class="japanese" data-lang="ja"></span>
</div>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
    function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'ko',autoDisplay: true}, 'google_translate_element');}
</script>
<script type="text/javascript">
    document.querySelector('.translation-links').addEventListener('click',function(event) {
        let el = event.target;
        if(el != null){
            while(el.nodeName == 'FONT' || el.nodeName == 'SPAN'){el = el.parentElement;}
            const tolang = el.dataset.lang; 
            const gtcombo = document.querySelector('.goog-te-combo');
            if (gtcombo == null) {
                alert("Error: Could not find Google translate Combolist.");
                return false;
            }
            gtcombo.value = tolang; 
            gtcombo.dispatchEvent(new Event('change')); 
        }
        return false;
    });
</script>

저는 위 코드를 스킨본문에 추가하지 않고 티스토리 사이드바에 html 코드 추가 플러그인을 활용해서 넣었습니다.

 

간단하게 한국어 / 영어 / 중국어 / 일본어 만 사용했습니다. 

 

다국어 번역 기능이 필요하신 분이라면 저처럼 사이드바 html 플러그인을 활용하여 사용하시면 좋겠어요~

 

티스토리 다국어 번역 기능 만들기 html 코드