블로거 - 페이지 번역 기능 추가하기 / Blogger - Add Page Translation Function

아래 작업 순서대로 따라하시면 브라우저 기본 언어에 따라 구글 번역 서비스를 이용하여 게시된 글이 자동 번역됩니다.   단, 브라우저 기본 언어가 한글이면 자동 번역 기능은 비활성화됩니다.

페이지 상단에 표시되는 구글 번역 패널의 닫기 버튼을 클릭하면 자동 번역기능이 꺼지고, "Translate Page" 버튼을 클릭하면 자동 번역기능이 다시 활성화 됩니다.
※ 브라우저의 Local Storage를 사용함

작업 순서

1. 구글 블로거 > 레이아웃 > 페이지 본문 > HTML/Javascript 가젯 추가 > 제목/컨텐츠 작성 > 저장 > 페이지 본문 가젯 순서 조정 > 레이아웃 저장
 - 아래 소스 중 강조된 라인은 사용자 환경에 따라 수정 필요

<script type="text/javascript">
function fnToggleButtonTranslatePage() {
  if (btnTranslatePage.style.display == "none") {
    localStorage.setItem("0k0aTranslatePage", "false");
    var oTrFrame = document.querySelector("body > div.skiptranslate");
    if (oTrFrame != undefined) oTrFrame.style.display = "none";
    btnTranslatePage.setAttribute("style", "color:black;display:block;");
  }
  else {
    localStorage.setItem("0k0aTranslatePage", "true");
    location.reload();
  }
}
function fnTryTranslatePage(iTryCnt) {
  var bTranslated = false;
  var oElement = document.querySelector("#google_translate_element select");
  if ((oElement != undefined) && (oElement.options != undefined) && (oElement.options.length != undefined) && (oElement.options.length > 0)) {
    var sNavLang = navigator.language.substr(0,2);
    var eEvent = new Event("change");
    for (var i=0; i < oElement.options.length; i++) {
      if (oElement.options[i].value == sNavLang) {
        oElement.options[i].selected = true;
        oElement.dispatchEvent(eEvent);
        bTranslated = true;
        break;
      }
    }
    if (bTranslated == false) {
      for (var i=0; i < oElement.options.length; i++) {
        if (oElement.options[i].value == "en") {
          oElement.options[i].selected = true;
          oElement.dispatchEvent(eEvent);
          bTranslated = true;
          break;
        }
      }
    }
    var oTrFrame = document.querySelector("body > div.skiptranslate > iframe.goog-te-banner-frame");
    if (oTrFrame != undefined) {
      var oTrFrameClose = oTrFrame.contentDocument.querySelector("a.goog-close-link");
      if (oTrFrameClose != undefined) oTrFrameClose.addEventListener("click", fnToggleButtonTranslatePage);
    }
  }
  if ((bTranslated == false) && (iTryCnt < 32))
    setTimeout(fnTryTranslatePage, 500, iTryCnt+1);
}
function fnGoogleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'ko'}, 'google_translate_element');
  fnTryTranslatePage(0);
}
if ((document.querySelector("#btnTranslatePage") != undefined) && (navigator.language.substr(0,2) != "ko")) {
  var b0k0aTranslatePage = localStorage.getItem("0k0aTranslatePage");
  if ((b0k0aTranslatePage === null) || ((b0k0aTranslatePage !== null) && (b0k0aTranslatePage !== "false"))) {
    var oHead = document.getElementsByTagName('head')[0];
    var oAllScript = document.querySelectorAll('head script');
    for (var i=oAllScript.length-1; i >= 0 ; i--) {
      if (oAllScript[i].src.indexOf("translate.google.com") > -1) oAllScript[i].parentNode.removeChild(oAllScript[i]);
    }
    var oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = 'https://translate.google.com/translate_a/element.js?cb=fnGoogleTranslateElementInit';
    oHead.appendChild(oScript);
  }
  else btnTranslatePage.setAttribute("style", "color:black;display:block;");
}
</script>

2. 구글 블로거 > 글 선택 > 본문에 태그 추가 > 글 저장
 - "구글 블로거 > 설정 > 글 템플릿" 기능을 사용하면 새 글 작성시 자동 추가됨

<div class="post-body entry-content float-container" id="post-body-00000000">
  <!-- 글 시작 -->
  <input type="button" id="btnTranslatePage" value="Translate Page" style="display:none;" onclick="fnToggleButtonTranslatePage()">
  <div id="google_translate_element" style="display:none;"></div>
  <!-- 본문 -->
  <!-- 글 종료 -->
</div>

이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.