블로그스팟에 Google 선호 출처 버튼 설치하는 방법

블로그스팟(Blogger)은 테마 HTML을 수정할 수 있으므로, 생성된 코드를 한 번 설치해 모든 개별 글에 Google 검색 선호 출처로 추가 버튼을 표시할 수 있습니다.

<data:post.body/>

블로그스팟 주소는 무엇을 입력하나요?

기본 주소를 사용하는 경우 내블로그.blogspot.com을 입력합니다. Blogger에 커스텀 도메인을 연결했다면 검색 결과와 방문자에게 표시되는 대표 도메인을 입력하세요. Google 선호 출처는 도메인 또는 서브도메인 단위로 작동합니다.

1. 블로그스팟용 코드 생성하기

1. Google 선호 출처 버튼 생성기를 엽니다.
2. 블로그스팟 대표 주소를 입력합니다.
3. 플랫폼에서 블로그스팟을 선택합니다.
4. 본문 시작 전 또는 본문 하단을 선택합니다.
5. 버튼 테마와 언어를 선택합니다.
6. 내 설치 코드 만들기를 누르고 추천 설치 코드를 복사합니다.

2. Blogger 테마 백업하기

Blogger 관리자에서 수정할 블로그를 선택한 다음 테마 메뉴로 이동합니다. 사용 중인 테마의 메뉴에서 백업을 선택해 테마 파일을 내려받으세요. 저장 과정에서 XML 오류가 발생하거나 디자인이 깨질 때 즉시 복구할 수 있습니다.

3. 테마 HTML에 코드 넣기

1. Blogger 관리자에서 테마 → HTML 편집으로 이동합니다.
2. HTML 편집기 안을 클릭한 뒤 검색 기능으로 <data:post.body/>를 찾습니다.
3. 본문 시작 전을 선택했다면 태그 앞에, 본문 하단을 선택했다면 태그 뒤에 생성 코드를 붙여넣습니다.
4. 테마를 저장합니다.
5. 실제 개별 글을 열어 버튼이 표시되는지 확인합니다.

테마에 <data:post.body/>가 여러 번 나타날 수 있습니다. 이 경우 Blog1 위젯 안에서 실제 글 본문을 출력하는 위치를 찾아야 합니다. 잘못된 위치에 넣으면 목록 화면에 표시되거나 버튼이 중복될 수 있으므로 저장 후 홈 화면과 개별 글 화면을 모두 확인하세요.

생성 코드가 Blogger용으로 다른 이유

Blogger 테마는 XML 문법으로 저장됩니다. 일반 HTML 코드를 그대로 넣으면 async 속성이나 따옴표 때문에 저장 오류가 날 수 있습니다. 워플 생성기는 async='async'과 XML에서 사용할 수 있는 조건 표현을 사용하고, 개별 글 화면에서만 출력되도록 Blogger용 코드로 변환합니다.

버튼이 표시되지 않을 때

• 홈 화면이 아니라 개별 글 주소에서 확인합니다.
• <data:post.body/>가 여러 개라면 다른 본문 태그 주변에 설치해 봅니다.
• 코드의 <b:if> 시작과 종료 태그가 모두 복사됐는지 확인합니다.
• 브라우저 캐시를 삭제하거나 시크릿 창에서 확인합니다.
• 커스텀 테마가 글 본문을 JavaScript로 나중에 불러오는 구조인지 확인합니다.

자주 묻는 질문

HTML/JavaScript 가젯에 넣어도 되나요?

가젯에 넣으면 사이드바나 가젯 영역에 고정 표시할 수 있지만 글 본문 앞이나 뒤에 넣으려면 테마 HTML에서 <data:post.body/> 위치를 수정해야 합니다.

모든 게시물을 수정해야 하나요?

아닙니다. Blogger 테마의 글 본문 템플릿에 한 번 설치하면 기존 글과 새 글에 함께 적용됩니다.

테마를 변경하면 어떻게 되나요?

새 테마에는 직접 추가했던 코드가 포함되지 않을 수 있습니다. 테마 변경 후 생성 코드를 다시 설치하세요.

Blogger의 테마 HTML 편집과 글 본문 데이터 태그는 Blogger 공식 테마 편집 안내와 Blogger 레이아웃 데이터 태그 안내에서 확인할 수 있습니다.