티스토리 블로그 해외 유입 다국어 번역 적용

반응형

 

 

지난번 쿠팡 배너 광고 HTML  코드 넣기를 통해 HTML 코드 넣는 방법이 어느 정도 익숙해지셨을거에요. 

오늘은 구글 다국어 번역 기능을 적용해보겠습니다. 

 

 

지금 바로 티스토리 관리로 들어가 플러그인을 클릭해주세요. 

 

 

1. 티스토리 관리홈- 플러그인- 배너출력 선택

 

 

 

2. 이미 배너출력 사용중으로 뜬다면, 바로 사이드바로 가시면 됩니다.

 

3. 티스토리 관리- 꾸미기- 사이드바- 플러그인 HTML 배너출력(+ 누르고)  사이드바 1,2,3 에서 빈 자리 선택 ,원하는 위치의 사이드바를 선택하여 편집 버튼 누르기

 

 

4. 비어있는  HTML 팝업창이 뜨면, 이름에 다국어 번역, HTML 소스에는 아래 소스를  복사하여 붙여넣기, 확인 눌러주시면 끝납니다.

 

 

HTML 다국어 번역 코드 

<!-- 다국어 번역 -->
<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')); 
        }

 

 

5. 상단에 4개의 국기 모양의 아이콘이 뜹니다. 

이것 저것 눌러보세요. 

 

일본 국기를 누르면

중국 국기를 누르면

 

 

한국어, 영어, 일어, 중국어를 설정했습니다. 

국기 모양을 누르면 자동 번역되는데, 번역의 퀄리티는 확인이 불가능합니다. 

 

이미지에 쓰여진 한국어는 당연히 번역이 안되겠지요. 

다국어 번역을 통해 조금이나마 블로그 수익화에 도움이 되었으면 좋겠습니다. 

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."