[블로그] 티스토리에 구글 검색엔진 맞춤검색창 추가하기

티스토리에 구글 검색엔진 맞춤검색창 추가하기

 

환경 : Internet Explorer 11

 

구글 애드센스 제품중 사이트 맞춤검색 엔진이 있습니다. 해당하는 사이트 URL 을 입력하고 검색창을 만들어서 달게 되면 구글 검색엔진을 통해서 결과를 알려줍니다.

 

▼ 구글 맞춤 검색엔진을 달기 위해 AdSense 홈페이지에서 내광고탭 > 맞춤검색엔진 을 클릭해 들어갑니다.

 

 

▼ 검색할 URL 을 입력하고 아래 쪽으로 내려가시면 유형별 창들을 볼수 있습니다. 그중에 하나를 체크하시고 메뉴바의 크기에 맞게 텍스트 상자 길이 값을 셋팅합니다.

 

▼ 검색결과는 같은 페이지에서 보여주는 방법, 새창을 열어서 보여주는 방법등이 있습니다. 저는 새창을 열어서 검색결과를 보여주는 것으로 선택했습니다. 그리고 아래 쪽으로 가서 좀더 상세한 셋팅을 위해 [더 많은 고급검색 기능 이용하기] 를 클릭합니다.

 

▼ 고급셋팅화면에서 [레이아웃] 탭을 클릭합니다. 검색한 결과창을 어떤 식으로 보여줄건지 선택하는 페이지 입니다. 셋팅을 한후 아래쪽으로 가서 저장 버튼을 클릭합니다.

 

▼ 두번째로 [테마]탭을 클릭합니다. 검색창의 테마별 레이아웃을 선택할수 있습니다. 선택을 하시면 오른쪽상단에 어떤 형태인지 보실수 있습니다.

 

▼ 다음은 [맞춤설정] 입니다. 테마에서 설정한 내용이 마음에 들지 않는 다면 [맞춤설정] 에서 디테일 하게 수정하시면 됩니다. 글꼴이나 배경색, 테두리 색상을 셋팅하신후 저장을 누릅니다 그래야 현재 상태가 저장 되겠죠. 저장을 누르지 않고 다른 곳으로 돌아다니시면 이전 셋팅 내용은 날아갑니다.

 

▼ 3개의 탭에서 설정한 내용을 화면에 적용했을 때 어떻게 나올지 보고 싶다면 [미리보기 이미지] 탭을 이용하세요.

 

▼ 셋팅이 모두 끝났다면 아무 탭으로 들어가서 [저장 및 코드생성] 버튼을 클릭합니다. 그리고 HTML 과 Javascript 가 있는 코드값을 복사합니다.

 

▼ 복사한 코드값을 붙여넣기 위해 티스토리 사이트바로 갑니다. 사이드바 종류중 HTML 을 넣고 편집할수 있는 [HTML 배너출력] 을 드래그 해서 오른쪽으로 옮깁니다. 그리고 편집 버튼을 눌러 애드센스에서 가져온 HTML 을 넣습니다.

 

▼ 아래 그림처럼 편집 버튼을 눌러 소스를 복사합니다. 그리고 확인을 눌러 창을 닫습니다.

 

▼ 애드센스 검색창을 추가한 모습입니다. 사이드바에 제대로 들어 갔네요. 검색을 한번 해 보겠습니다

 

▼ 맞춤검색을 했을 때 아래와 같이 새창으로 검색된 데이터를 출력하고 있습니다. 제대로 되는지는 좀더 두고 봐야 겠지만 검색은 잘 되네요