블로그에 번역기 설치하기

매우 깔끔한 번역은 아니지만
가끔 웹서핑을 하다보면, 해외 사이트의 게시글 중에 번역기가 달려있어서
전혀 모르는 나라의 언어일지라도
대략의 의미를 파악하는데에는 어려움이 없었던 경험이 있다.

그래서 내 블로그에도 게시글 제목 아래에 한 번 설치해 보았다. ^^*

설치 방법은 어려운 것은 없고,
현재 사용 중인 티스토리 블로그를 기준으로 설명하자면

관리자 화면에서 '스킨 > HTML/CSS 편집'에 들어가서
먼저 HTML 편집 화면에서 번역기 버튼을 설치하고자 하는 위치에 태그를 삽입해 주면 된다.
나의 경우는 게시글 제목 아래 이므로

<!-- close titleWrap -->

이 있는 곳 바로 아래에 아래 태그를 입력했다.

<!-- 번역 버튼 시작 -->
<div id="transl">
 <b>Translation : </b>
 <a href="/1035" title="한국어"><img src='./images/btn_kor.jpg' border="0"></a>
 <a href="<A href="http://64.233.179.104/translate_c?langpair=ko|en&u=자신의 블로그 주소" onclick="window.open(this.href); return false" title="Translate to English (by Google)"><img src='./images/btn_usa.jpg' border="0"></a>
 <a href="<A href="http://www.excite.co.jp/world/korean/web/?wb_url=자신의 블로그 주소/1035&wb_lp=KOJA&wb_dis=2">http://www.excite.co.jp/world/korean/web/?wb_url=자신의 블로그 주소/1035&wb_lp=KOJA&wb_dis=2</A>" onclick="window.open(this.href); return false" title="Translate to Japanese (by excite)"><img src='./images/btn_jap.jpg' border="0"></a>
 <a href="<A href="http://64.233.179.104/translate_c?langpair=ko|zh-CN&u=자신의 블로그 주소" onclick="window.open(this.href); return false" title="Translate to Chinese (by Google)"><img src='./images/btn_chi.jpg' border="0"></a>
</div>
<!-- 번역 버튼 끝 -->

또, 이전 게시글에 적은 것과 같이
이미지 버튼이므로 링크를 알리는 점선 선택 박스가 나타나지 않도록
css에 아래 태그도 함께 추가했다.

/*번역 버튼 */
#transl {
                color:#9F9F9F;
                font:11px/11px dotum, appleGothic, sans-serif;
                margin:5px 0px 5px 510px;
}
#transl a{
             outline:none;
             selector-dummy: expression(this.hideFocus=true);
}

혹시나 여기 페이지와 같은 번역 버튼을 달고자 하는 분들을 위해서 국가 이미지를 첨부한다.
첨부된 이미지는 티스토리의 경우 '스킨 > HTML/CSS 편집'에서 '파일 업로드' 탭에서 업로드 하면 된다.

(PS.. 참고로 다른 국가의 이미지가 필요하신 분은 요청하시면 만들어 드립니다. ^^*)


[이미지 다운로드]

btn_nat.zip