본문 바로가기
블로그이야기/블로그팁

티스토리 블로그에 구글 번역기를 달아보자;

by 블로그유 2014. 9. 22.

티스토리에 페이지 번역을 해주는 구글 번역기를 달아보겠습니다. 블로거를 운영하는 분마다 운영하는 시스템이 다르겠지만 대부분이 중요하게 생각하시는건 아마 유입인원이겠지요. 저 또한 별 기대는 하지 않지만 티클 모아 태산이라는 나무를 보지 말고 숲을 보는 심정으로다가 블로그에 번역기를 달아봤습니다. 이 포스팅에서는 번역기를 달아보겠습니다.


아래 사진에의 빨강박스에 있는 웹사이트 번역기를 클릭합니다. 아! 기본적으로 구글 가입자이시겠죠?


아래 사진은 제가 이미 번역기를 달아놓았기 때문에 조금 틀려보일수는 있습니다. 하지만 설치하는 과정은 크게 다르지 않습니다. 새 웹사이트 추가나 파란색 버튼을 찾아서 클릭하시면 됩니다.


첫번째 박스에는 본인의 블로그 주소를 입력하시구요. 언어는 당연히 한국어로 하셔야하구요. 그리고 다음 클릭


이번에는 약간 설정인데 전 그냥 무식하게 단순하게 모든 언어를 선택했습니다. 그리고 표시 모드를 보시게 되면 세로, 가로 드룹다운으로 사진 편집을 해놨습니다. 티스토리에는 사이드바에 들어가야하기때문에 가로모드는 좀 무리인듯합니다. 하지만 사이드바를 크게 사용하시는 분이라면 가능하겠죠.


티스토리 처음 하시는 분이라면 한번쯤 넘어가야할 산인 코드 부분입니다. 아무것도 모르니 토나오죠. 하지만 그렇게 어렵지는 않습니다. 차근차근 따라하면 그리고 그 회수가 많아지면 익숙해지고 능숙해지고 곧 "내 블로그도 꽃단장" 잡설은 여기까지하구요.


1번창과 2번창이 있습니다. 

1번창은 티스토리 관리자모드에 가면 꾸미기에 보면 "HTML/CSS편집"에 넣어야 할 소스입니다.

2번창은 사이드바에 번역기를 달거기 때문에 꾸미기에 보면 "사이드바"에 넣을 소스입니다.


따로 저장을 해놓으셔도 되고, 새창을 열어서 티스토리 관리자 모드창으로갑니다.


먼저 아까 보았던 1번창에 있던 소스부터 첨부 할건데요. 키보드 "컨트롤+F"를 누르시면 검색창이 나오고

검색창에서 "</head>"를 검색합니다. 그러면 아래 사진처럼 그냥 </head>위 줄에 복사하여 붙여넣기하면 끝입니다.


이번에 2번창에 있던 소스를 기입하겠습니다. 아래 사진처럼 차례대로 하시면 됩니다. 아래 사진은 제가 편의상 편집을 한것이구요. 2번을 보시고 클릭하시면 3번 HTML배너출력이 나옵니다. 이걸 마우스로 드래그 드롭을 하시면 됩니다. 끌어다가 맨 오른쪽 그림처럼 사이드바1에 가져가 놓으시면 됩니다. 그리고 소스를 집어 넣어야하니 편집 버튼을클릭합니다..


이름하고 HTML소스 기입란이 나오는데요. 이름은 사용자님들이 알기 편하게 적으시면 되구요. HTML소스창에는 웹사이트 번역기에서 2번소스를 복사하여 붙이시면 됩니다. 그리고 확인을 눌러보시고. 다시 블로그로 가시면 됩니다.


제 블로그 사이드바인데요. 맨 아래를 보면 번역기가 실린게 보입니다. 하지만 무언가 좀 어색합니다. 각이 안맞는다고 해야할까요. 이걸 한번 조정해 보겠습니다. 그래도 밸런스 있어야 좋잖아요.


다시 관리자 모드로 가서 꾸미기->HTML/CSS편집으로 가서 아래 부분에 style.css로 갑니다. 그리고 "컨트롤 + F"를 눌러서 검색을 합니다. ".clear"로 검색을 합니다. 그리고 아래 소스를 복사하시구요. 바로 위줄에 붙여놓기합니다.

#google_translate_element {  margin-top: 20px; text-align:center;}



그리고 저장하시고 다시 블로그로 가서 확인을 하면 아래 그림처럼 사이드바에서 가운데 정렬이 되어있습니다. 잠깐 소스코드를 설명을 드리면 margin-top 부분의 20px이라는 값을 만약 30px로 바꾸면  RSS FEED버튼하고 점점 떨어져 보일겁니다. 반대로 값을 줄이면 RSS FEED버튼과 가까워집니다. 그리고 text-align는 문구는 정렬을 뜻합니다. 속성값은 left, right, center와 마지막으로 justify가 있습니다. 문구만 보시면 left, right, center는 무슨 의미 인지 아시기 쉬우시겠지만, justify는 왼쪽과 오른쪽 열에 맞추어 화면을 늘어뜨립니다. 그래서 지금 번역기 자리 위치하는거랑은 좀 거리가 있죠. 다시 저장하고 블로그를 확인을 하면 아래 사진처럼 가운데 정렬이 되어있네요.


한번 번역기를 돌려보겠습니다. 번역기를 클릭을 하면 이렇게 지구상의 모든 언어가 나오네요. 일단 영어로 해봤습니다.


음..솔직히 제가 쓴거지만 무슨 소린지 모르겠습니다. 제 블로그 같지 않습니다. 대단한게 카테고리를 보면 거의 제자 한글로 지정한 단어들이 거의 영어로 대체가 된다는겁니다. 맛집은 레스토랑으로 사용기와 개봉기는 그냥 영어로 한글을 표현했습니다.


포스팅글위에 마우스 커서를 올려놓으면 이렇게 어느 문구를 번역을 했는지 툴팁창으로 나옵니다.