[블로그 tip] 블로그 사이드바에 구글 맞춤검색 추가하기

이번 포스팅은 구글에서 제공하는 맞춤검색이라는 기능을 정리하려고 합니다.

맞춤검색은 블로그 내에서 검색을 할 수 있는 기능인데요.

자세한 내용은 아래에서 설명하도록 하겠습니다.

여튼, 이러한 API도 제공하는 구글을 보면 정말 찬양하지 않을 수가 없네요.

뭔가 있을 것 같다 싶어서 구글링하면 항상 있더라구요.

맞춤검색 기능에 대해서 엄청난 특징을 소개하자면..

애드센스와 연동이 되어서 수익 창출도 가능하다고 하네요.

저는 달아 놓은게 얼마 안되서, 아직은 정확하게 모르겠지만..

뭐 일단 된다고 하니 믿어야 되지 않을까 싶습니다.

이제, 구글 맞춤검색을 추가하도록 해볼까요.

1. 구글 맞춤검색 코드 생성하기.

구글 번역기와 마찬가지로 구글 맞춤검색도 따로 코드를 생성해야 합니다.

혹시나 구글 번역기를 사이트에 달고 싶으시면, 다음 포스팅을 참고해주세요.

구글 번역기 사이트에 추가하기.

먼저, 코드를 생성하기 위해 구글 cse 사이트에 접속해야 합니다.

https://cse.google.co.kr

접속하셨나요? 그럼, 아래와 같은 화면을 보실 수 있을거에요.

맞춤 검색엔진 만들기 버튼을 눌러주세요.

이제, 맞춤검색 기능에 필요한 검색할 사이트를 직접 설정해야 합니다.

아래 화면은 제가 입력한 사이트입니다. 혹시나, 더 검색하실 사이트가 있으시면 추가하시면 되겠습니다.

다시 말해서, 아래와 같이 사이트를 입력하지 않아도 된다는 뜻입니다.

언어는 한국어로 설정해주시고, 다음으로 가시면 되겠습니다.

이제, 검색엔진 생성은 끝입니다. 하지만 여기서 완전히 끝난 것은 아닙니다. 세부 설정이 남았거든요.

먼저, 설정 > 기본사항에서 아래와 같은 내용을 입력해야 합니다.

검색 엔진 이름은 구별하기 위한 이름입니다.

이미지 검색도 맞춤검색에 포함하고자 하시면 오른쪽 버튼을 눌러서 활성화하면 됩니다.

그리고, 광고 탭으로 이동합니다.

여기서 가장 중요한 검색 엔진으로 수익 창출을 하기 위해 오른쪽 버튼을 누릅니다.

애드센스 계정이 있으시면 연결하시면 되겠습니다.

이제, 맞춤검색의 디자인을 설정하겠습니다.

여러 가지의 디자인을 제공하는 데, 저는 아래와 같이 설정했습니다.

디자인을 끝마치셨으면, 아래 저장 및 코드 생성 버튼을 눌러주세요.

그러면 아래와 같이 코드 가져오기 창이 뜹니다.

중간 부분을 보시면 HTML 코드가 생성되는데요. 이 코드를 복사합니다.

이제, 맞춤검색 생성은 모두 끝났습니다. 그러면, 생성한 HTML 코드를 블로그에 적용해볼까요.

2. 블로그에 구글 맞춤검색 적용하기.

티스토리를 예로 설명하겠습니다. 먼저, 계정 화면에서 꾸미기 > 사이드바를 누릅니다.

HTML 배너출력을 누르시면, 오른쪽에 사이드바1에 추가됩니다.

추가된 사이드바의 편집을 눌러서 편집창을 띄웁니다.

HTML 배너출력 창이 뜨셨나요? 여기에 위에서 복사한 HTML 태그를 아래 HTML 소스 부분에 붙여 넣어줍니다.

이후, 확인 버튼을 누르시고 변경사항 저장을 눌러주시면 모든 것이 끝납니다.

뭔가 복잡해보이지만, 막상 따라해보시면 쉽다고 생각이 드실거에요.

이제, 맞춤검색이 어떻게 적용되었는 지 확인해봐야 겠죠?

아래 화면을 보시면, 검색창이 하나 보이실 겁니다.

이것이 구글에서 제공하는 맞춤검색입니다.

혹시나 어떤 기능인지, 또는 어떠한 방식으로 동작하는 지 확인하고 싶은 분은 제 사이트 오른편에 있으니, 검색해보시면 될 것 같아요.

이 포스팅이 읽으시는 분들에게 많은 도움이 되었으면 좋겠습니다.

서로 이웃 추가는 항상 환영입니다. :)