블로그스팟에 영문 번역 버튼을 달아보자

구글 블로그(Blogger) 해외 유입을 위한 영문 번역 버튼 달기

블로그를 운영하다 보면 가끔 해외에서 유입되는 트래픽을 발견하곤 합니다. 적게는 한두 뷰에서 많을 때는 수십 뷰까지 들어오기도 하죠.

해외 여행 중인 한국분이거나 검색 엔진의 로봇일 수도 있지만, '혹시 해외 독자를 놓치고 있는 건 아닐까?' 하는 기분 좋은 상상을 해보게 됩니다. 그래서 오늘은 시험 삼아 구글 블로그에 영문 번역 버튼을 다는 방법을 정리해 보겠습니다.

구글 블로그스팟 영문 번역 버튼 달기

---

왜 번역 버튼이 필요할까? (구글 번역기 활용)

요즘은 브라우저 자체 번역 기능이 훌륭합니다. 하지만 방문자가 굳이 번역 기능을 찾아 누를 만큼 인내심이 있지 않을 수 있죠. 그래서 아예 블로그 상단에 "Select Language" 버튼을 배치해 접근성을 높여주기로 했습니다.

실제로 해외 사용자를 얼마나 더 잡을 수 있을지는 미지수지만, 블로거의 자기만족과 편의성 측면에서 긍정적인 시도라고 생각합니다. 참고로 이 가이드는 구글 블로그(Blogger, Blogspot) 환경을 기준으로 작성되었습니다.

---

단계별 가젯 추가 및 코드 입력 방법

가젯을 추가하는 구체적인 과정을 이미지와 함께 설명합니다. 자세한 내용을 보시려면 아래 항목을 클릭해 주세요.

1. 가젯 추가 프로세스 보기 (클릭)

순서: 레이아웃 → 가젯 추가 → HTML/자바스크립트 추가 → 코드 입력

Step 1. 레이아웃 선택

구글 블로그 관리 화면 좌측 메뉴에서 '레이아웃'을 클릭합니다.

Step 2. 가젯 추가 클릭

원하는 위치의 '가젯 추가' 타일을 클릭합니다.

Step 3. HTML/자바스크립트 선택

팝업창에서 'HTML/자바스크립트' 항목을 선택합니다.

Step 4. 코드 입력

내용(Content) 칸에 아래에서 복사한 코드를 붙여넣습니다.

※ 더 상세한 설명이 필요하다면 이전 포스팅의 6번 목차를 참고해 주세요.

설치 코드 (Copy & Paste)

번역 버튼을 생성하는 코드입니다. 직접 복사가 어려우신 분들은 [구글 문서 링크]에서 복사하실 수 있습니다.

번역 가젯 소스코드 확인하기

<!-- 언어 선택 라벨 및 드롭다운 (한 줄 오른쪽 정렬) --> <div style="text-align: right; font-size: 110%; margin-bottom: 10px; display: flex; justify-content: flex-end; align-items: center; gap: 8px;"> <span class="notranslate" style="font-weight: bold; color: white;" translate="no">Select Language:</span> <div id="google_translate_element"></div> </div> <style> #google_translate_element, #google_translate_element .goog-te-gadget, #google_translate_element .goog-te-combo { color: white !important; background-color: transparent !important; } .goog-te-combo { border: 1px solid #ccc; padding: 4px; } .goog-te-gadget span { display: none !important; } .notranslate { unicode-bidi: isolate; } </style> <script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'ko', includedLanguages: 'en,ko', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false }, 'google_translate_element'); } </script> <script type="text/javascript"> (function() { var gt = document.createElement('script'); gt.type = 'text/javascript'; gt.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit&hl=en'; document.getElementsByTagName('head')[0].appendChild(gt); })(); </script>

위 코드는 우측 정렬로 설정되어 있으며, 방문자의 기본 언어 설정과 상관없이 영어 선택이 가능하도록 최적화되어 있습니다.

---

최종 배치 및 적용 결과

이번 번역 가젯은 헤더(Header) 영역에 배치하는 것을 추천합니다. 로딩 직후 방문자의 눈에 가장 먼저 띄어야 번역 기능을 활용할 확률이 높기 때문입니다.

마치며

모든 설정이 완료되었습니다! 이 작은 버튼 하나가 글로벌 방문자들에게 블로그의 문턱을 낮춰주는 역할을 하길 기대해 봅니다. 구글 블로그를 운영하시는 모든 분께 도움이 되셨길 바랍니다.

태그: Google blogger, blogspot, 블로그스팟, 구글블로그, 블로그 번역 버튼, 해외 트래픽 유입