구글 웹사이트 번역 플러그인 커스텀

어제 이걸 올리려다 아래와 같은 구글 정책이 보여 '팁'게시판에서 삭제를 했었는데 아침에 생각을 해보니 방식에 대한 정책이 아닌 '로고 명시'라는 의미로 생각되어져 다시 올려봅니다.

------------------
"플러그인을 포함하는 웹사이트에 게시되어 있는 Google 로고를 가리거나 삭제 또는 변경하지 마세요."
------------------


[ 설 치 법 ]
① 아래 주석 '[s] ~ [e]'까지를 복사해 표시하고 싶은 위치에 배치.(보통은 'head_sub.php'?)
② 첨부되어진 'img.zip'의 압축을 해제하여 './img/'폴더에 업로드.
③ 현재 페이지의 하단 '좋아요'를 가열차게 클릭!


※번역에 대한 정확도를 따진다면 '번역 API'를 사용할 이유가 없겠지만 번역기의 문장도 단어와 단어를 유추해 읽다 보면 대강의 의미 전달은 가능한 수준까지 발전하였고 계속적으로 보완되고 있다니 외국인 방문자의 편의를 위해 달아 놓으시는 것도 그리 나쁜 선택은 아닐듯 합니다.


<!--구글 웹사이트 번역 플러그인 [s] -->
<style type="text/css">
iframe.goog-te-banner-frame { display: none !important; } /* 상단 플로팅 바 옵션 가리기 */
body { position: static !important; top:0px !important; }
.goog-logo-link { display:none !important; }
.goog-te-gadget { color: transparent !important; }
</style>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'ko', includedLanguages: 'de,en,ja,ko,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
$(window).load(function () {

$('.translation-icons').css('visibility', 'visible');

$('.translation-icons a').click(function(e) {
e.preventDefault();
var placement = $(this).data('placement');
var lang_num = $('.translation-icons a').length;
var $frame = $('.goog-te-menu-frame:first');

if (!$frame.size()) {
alert("Error: Could not find Google translate frame.");
return false;
}

var langs = $('.goog-te-menu-frame:first').contents().find('a span.text');

if(langs.length != lang_num) placement = placement+1;

langs.eq(placement).click();
return false;
});
});ko
</script>
<div id="google_translate_element" style="visibility: hidden; position: absolute; top: 0px;"></div>
<div class="translation-icons" style="visibility: hidden; position: relative; text-align: right; margin:0 auto; padding-right: 15px; width: 970px; zoom:1">
<img src="<?php echo G5_IMG_URL?>/google_translate_logo.png" alt='구글 번역 api'/>
<a href="#" class="ko" data-placement="0"> <img src="<?php echo G5_IMG_URL?>/KR.png" alt='한국'/></a>
<a href="#" class="gm" data-placement="1"> <img src="<?php echo G5_IMG_URL?>/GM.png" alt='독일'/></a>
<a href="#" class="us" data-placement="2"> <img src="<?php echo G5_IMG_URL?>/US.png" alt='미국'/></a>
<a href="#" class="jp" data-placement="3"> <img src="<?php echo G5_IMG_URL?>/JP.png" alt='일본'/></a>
<a href="#" class="cn" data-placement="4"> <img src="<?php echo G5_IMG_URL?>/CN.png" alt='중국'/></a>
</div>
<!--구글 웹사이트 번역 플러그인 [e] -->




참조1: https://support.google.com/translate/answer/2534601?hl=ko
참조2: https://translate.google.com/manager/website/




p.s... 지저분한 css 인라인 부분은 각자가 알아서 깔끔하게! 굿~잡~!