티스토리에 구글 번역기 넣기

구글에 노출이 잘되게 되면 크롬 같은 경우에는 자동으로 번역이 잘되지만, 티스토리는 영어를 잘해서 직접 쓰지 않는이상, 외국인들의 접근이 어렵습니다. 하지만 아래의 코드를 복사해서 번역기를 만들게 되면 구글 자동번역기를 통해서 아주 간편해지는데요 지금 소개해드릴께요.

 

 

 

 

티스토리에 구글 번역기능 추가하기

• 스킨편집에 들어가서 번역 콤보박스를 위치할 곳에, 아래 스크립트를 추가하면 완료됩니다.
• 저는 포스팅 제목 아래, 글 내용 첫머리에 바로 달리도록 했는데요, 저는 contetnt 밑에 부분에 달았는데요.
• 에러날 경우를 대비해서 항상 전체 html 코드를 다른곳에 복사해두고 시도해두시는걸 추천드려요!

 

반응형

 

 번역기 콤보박스

<div class="GTranslate">
    <!-- GTranslate: https://gtranslate.io/ -->
    <a href="#" onclick="doGTranslate('ko|zh-CN');return false;" title="Chinese (Simplified)" class="gflag nturl" style="background-position:-300px -0px;"><img src="//gtranslate.net/flags/blank.png" height="22" width="22" alt="Chinese (Simplified)" /></a>
    <a href="#" onclick="doGTranslate('ko|en');return false;" title="English" class="gflag nturl" style="background-position:-0px -0px;"><img src="//gtranslate.net/flags/blank.png" height="22" width="22" alt="English" /></a>
    <a href="#" onclick="doGTranslate('ko|it');return false;" title="Italian" class="gflag nturl" style="background-position:-600px -100px;"><img src="//gtranslate.net/flags/blank.png" height="22" width="22" alt="Italian" /></a>
    <a href="#" onclick="doGTranslate('ko|ja');return false;" title="Japanese" class="gflag nturl" style="background-position:-700px -100px;"><img src="//gtranslate.net/flags/blank.png" height="22" width="22" alt="Japanese" /></a>
    <a href="#" onclick="doGTranslate('ko|ko');return false;" title="Korean" class="gflag nturl" style="background-position:-0px -200px;"><img src="//gtranslate.net/flags/blank.png" height="22" width="22" alt="Korean" /></a>
    <a href="#" onclick="doGTranslate('ko|pt');return false;" title="Portuguese" class="gflag nturl" style="background-position:-300px -200px;"><img src="//gtranslate.net/flags/blank.png" height="22" width="22" alt="Portuguese" /></a>
    <a href="#" onclick="doGTranslate('ko|es');return false;" title="Spanish" class="gflag nturl" style="background-position:-600px -200px;"><img src="//gtranslate.net/flags/blank.png" height="22" width="22" alt="Spanish" /></a>
    <style type="text/css">
    <!--
        .GTranslate { text-align: right; padding-top: 0px; color:black;}
        a.gflag {vertical-align:middle;font-size:24px;padding:1px 0;background-repeat:no-repeat;background-image:url(//gtranslate.net/flags/24.png);display:inline-block;}
        a.gflag img {border:0;}
        a.gflag:hover {background-image:url(//gtranslate.net/flags/24a.png);}
        #goog-gt-tt {display:none !important;}
        .goog-te-banner-frame {display:none !important;}
        .goog-te-menu-value:hover {text-decoration:none !important;}
        body {top:0 !important;}
        #google_translate_element2 {display:none!important;}
    -->
    </style>
    <br />
    <select onchange="doGTranslate(this);" id="GTranslateSelection">
      <option value="">Select Language</option>
      <option value="ko|ar">Arabic</option>
      <option value="ko|zh-CN">Chinese (Simplified)</option>
      <option value="ko|zh-TW">Chinese (Traditional)</option>
      <option value="ko|en">English</option>
      <option value="ko|fr">French</option>
      <option value="ko|de">German</option>
      <option value="ko|hi">Hindi</option>
      <option value="ko|id">Indonesian</option>
      <option value="ko|it">Italian</option>
      <option value="ko|ja">Japanese</option>
      <option value="ko|ko">Korean</option>
      <option value="ko|pt">Portuguese</option>
      <option value="ko|ru">Russian</option>
      <option value="ko|es">Spanish</option>
      <option value="ko|vi">Vietnamese</option>
    </select>
    <div id="google_translate_element2"></div>
</div>
<script type="text/javascript">
function googleTranslateElementInit2() {
  new google.translate.TranslateElement({pageLanguage: "ko" ,autoDisplay: true}, 'google_translate_element2');
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"></script>
<script type="text/javascript">
/* <![CDATA[ */
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 7(a,b){n{4(2.9){3 c=2.9("o");c.p(b,f,f);a.q(c)}g{3 c=2.r();a.s(\'t\'+b,c)}}u(e){}}6 h(a){4(a.8)a=a.8;4(a==\'\')v;3 b=a.w(\'|\')[1];3 c;3 d=2.x(\'y\');z(3 i=0;i<d.5;i++)4(d[i].A==\'B-C-D\')c=d[i];4(2.j(\'k\')==E||2.j(\'k\').l.5==0||c.5==0||c.l.5==0){F(6(){h(a)},G)}g{c.8=b;7(c,\'m\');7(c,\'m\')}}',43,43,'||document|var|if|length|function|GTranslateFireEvent|value|createEvent||||||true|else|doGTranslate||getElementById|google_translate_element2|innerHTML|change|try|HTMLEvents|initEvent|dispatchEvent|createEventObject|fireEvent|on|catch|return|split|getElementsByTagName|select|for|className|goog|te|combo|null|setTimeout|500'.split('|'),0,{}))
// 현재 URL에서 lang 파라미터의 값을 가져오기
const urlParams = new URLSearchParams(window.location.search);
const lang = urlParams.get('lang');

// 만약 lang 값이 'en'인 경우에만 실행
if (lang === 'en') {
  // .GTranslate 클래스를 가진 엘리먼트 선택
  const gtranslateEl = document.querySelector('.GTranslate');

  // gtranslateEl 아래에서 title이 'English'인 a 태그 선택
  const englishLink = gtranslateEl.querySelector('a[title="English"]');

  // English 링크 클릭
  englishLink.click();
}                              
/* ]]> */
</script>
<!-- GTranslate: https://gtranslate.io/ -->

 

 

저의 글을 읽어 주셔서 감사합니다. 오늘도 즐거운 하루 보내세요.

저의 글이 조금이나마 도움이 되셨다면 로그인이 필요 없는 공감♥ 한번 꾸욱 눌러주세요 하하~