관리 메뉴

삶을 누리는 디비누스

구글 애드센스 - 맞춤검색 엔진 Google AdSense - Custom Search Engine 본문

컴퓨터/블로그

구글 애드센스 - 맞춤검색 엔진 Google AdSense - Custom Search Engine

케일럽 2011. 7. 14. 07:00

블로그를 사용하다보면 가끔식 자신의 블로그를 검색해주는 능력이 필요하다...  특히 자료가 많을 때는 더욱더 필요하다...
when you are running a blog... you need some sort of search engine for your blog... especially if you have lots of data...

티스토리에서 제공해 주지만 뭔가 아쉬운것 같다... 그래서 생각해 낸 것이... 구글 맞춤검색 엔진이다...
Tistory provides such search engine... but its not enough... so i thought of google custom search engine...

요새 구글에서 제공하는 서비스에 만족하여 구글에 빠져들고 있다... 안드로이드 스마트폰부터 시작해서 구글 웹로그 분석... 구글 애드센스 광고에 이어 맞춤검색 엔진까지... 
I am falling for google nowadays... from android smartphone to google analytics... google adsense and even custom search engine...

훗...
lol...

참... 구글 플러스도 있다!
yes... how can i forget google+?

암튼... 일단은 보통 애드센스 광고랑 비슷하다... 여기서 명심해야하는 것은... 애드센스 만들고 나서 꼭 '이전 애드센스 인터페이스로 돌아가기' 모드에서 진행할것! 새로운 인터페이스에서 하면 왠지 모르게 검색 결과에 에러가 뜬다... ㅠㅠ
Anyways... the beginning is similar to making an adsense ad... but one thing to note is... you have to make the engine under 'previous adsense interface'... for some reason, when i made it through the new interface, it didnt work...

미리 설정할 것들
To prepare

1. 일단은 구글 계정이 있어야 하니.. 없으면 얼른 가서 만들고 오세요!
1. you must have a google account... if you dont have it... go make it!

2. 제 포스트와 같이 다음 앤드박스도 추가하셔야 겠죠? 없어도 별 상관은 없습니다만... 방법은... 티스토리 '관리자 모드'에서 '플러그인 설정' > 'view 애드박스'에서 체크하시고 '사용'하기 하시면 됩니다.
2. you gotta add view adbox as well... you dont really need it but for those of you who wants it... well... its in Korean... hah...

구글 애드센스 만들기
Making google AdSense

1. 아래 사이트로 가서 '지금 가입하기' 클릭하세요~
https://www.google.com/adsense/v3/app?hl=ko#home
1. Goto the following site and click 'Register Now'
https://www.google.com/adsense/v3/app?hl=en#home

2. 화면상 정보를 입력하시고 '정보 제출'!
2. Enter all your info and 'Submit'!

3. '제품 더보기'에서 '검색'를 클릭하세요~
3. Under 'More products', click 'Search'...

4. 꼭 '이전 애드센스 인터페이스로 돌아가기' 모드에서 진행하세요! 새로운 인터페이스에서 하면 왠지 모르게 검색 결과에 에러가 뜨네요... 
4. Remember to go back to 'Previous AdSense interface'... if not, your search results might be messed up for some reason...

5. '애드센스 설정'으로 들어가서 '검색용 애드센스'를 클릭하세요..
5. Go to 'AdSense Setup'... and click on 'AdSense for Search'...

6. 전 '선택한 사이트만'해서 제 주소만 입력했습니다... 제 검색창에 남의 결과가 나오면 쫌 그렇잖아요? ㅋㅋ
I selected 'Only sites I select', since i only want my site to show up on the search...

7. '선택 키워드'도 설정해 주시고... '웹사이트 인코딩'은 '유니코드(UTF-8)'을 사용하세요... 다른 것들은 그냥 알아서...
7. set your keywords and set 'encoding' to what fits you... for korean, use Unicode (UTF-8)...

8. '계속'하세요...
8. 'Continue'...

9. 보통 검색창은 사이드바에 두기에 저는 텍스트 상자 길이를 14로 했습니다... 님들 블로그 위치에 따라 길이를 정해주세요~
9. Depending on the location you will put your search box, set the text box length... for your info, mine is 14...

10. 다음 화면은 조금 복잡한데... 설명해드리죠...
10. Now it gets complicated... bear with me...

3가지 옵션이 있는데... '같은 창에 Google 검색결과 열기'하면 자신의 블로그가 사라지고 검색 결과가 나타납니다... 포멧도 전통적인 구글 포멧으로... '새 창에 Google 검색결과 열기'하면 자신의 블로그는 그대로 있고 새 창으로 구글 검색이 뜹니다... 제가 선택한 마지막은 '내 사이트에서 검색결과 열기'는 제 블로그안에서 제 디자인에 맞춰 검색 결과가 나옵니다!
There are 3 options; 'Open results on Google in the same window' will open the traditional google looking results page, making your blog disappear... not too ideal... 'Open results on Google in a new window' is abit better, but still dont like popups out of nowhere... Last option, which i used, is 'Open results within my own site'... you can set the design of the results page as you see fit!

저는 티스토리 중 지역로그를 않쓰기 때문에 지역로그 페이지(location)를 구글 검색 결과 페이지로 바꾸었습니다... 여기서 기존의 티스토리 검색 페이지(search)를 사용하지 않은 이유는 카테고리 보기 목록이 search 페이지에 나타나기 때문입니다...
This only applies to ppl using tistory blog... since i dont use location log page... i chaged it to google search results page... i didnt use existing search page because it also serves as a template for category page...

그래서 '검색결과가 표시되는 URL을 입력하십시오.'에는 'http://caleb1783.tistory.com/location'을 입력하시면 됩니다...
so... on the URL side, enter 'http://caleb1783.tistory.com/location'...

'결과 영역의 너비'는 자신의 스킨에 맞추어도 되고.. 나중에 고급 메뉴에서 100%로 바꿀수 있습니다...
Set the width... you can later change to 100% at advanced options...

11. 다음 페이지에서 검색 엔진 이름을 쓰고 '제출 및 코드 가져오기' 하세요!
11. on the next page name your search engine and 'Submit and Get Code'!

12. 일단... 두 코드를 복사해 두세요...
12. Copy those two codes for now...

다음 단계부터는 약간 복잡해지니 집중하세요!
Now it gets more complex... so pay attention!

검색창 코드
Search Box Code

This section applies to Tistory blog... i assume if you are using tistory, you can read Korean... so i wont translate this... what you need to do is copy this code to where you want your search box to be... like on the side bar for my blog...

1. 관리자 모드에서 '플로그인 설정' > '태그 입력기'에서 '사용' 클릭하세요.

2. '스킨' > '사이드바 설정'에 들어가 보면 태그 입력기라고 새로 생겼을 것입니다... 그것을 원하는 위치로 가져간 다음 편집...

3. 아까 구글에서 복사한 검색창 코드를 치환자 부분에 삽입하고 이름을 정해주세요... 저장하실 분은 저장해도 됩니다...

4. 그리고 '저장'!

검색 결과 코드
Search Result Code

Same deal here for you English speaking bloggers... just paste the code to where you want the results to show... on my blog, its on location page...

1. 관리자 모드에서 '스킨' > 'HTML/CSS 편집'으로 들어가세요..

2. 위에서 검색결과가 표시할 URL을 location 으로 했다면 's_local'를 찾으세요!

3. 흠.. 여기서는... s_local 밑으로 <h3> 로 시작하는 곳이 태그가 있을 것입니다... 그곳에서 제목을 바꿔주고... 그 밑으로 '_local_spot_' 라는 티스토리 치환자가 보이죠? 아까 위에서 받은 검색 결과 코드를 '_local_spot_' 지우고 그 자리에 붙여 두세요! 저 치환자가 않보이면... 태두리 디자인 중간 부분에 붙이세요... 끝나면 다음과 같이 보이겠죠?

4. 그리고 저장... 한번 테스트 해보세요...

고급 검색 기능
Advanced search features

만약에 검색 결과 창이 맘에 않드시나요? 저 같은 경우도 3단을 쓰고 있기때문에 800px 를 사용하면 결과창이 이쁘게 않뜨네요... 그럴때는 고급 검색 기능 페이지로!
If you dont like the design of the results page, you can enter advanced options... and change the things around...

1. '고급 검색 기능' > '디자인' > '검색 요소' > '2 페이지'로 바꾸고 스타일을 골라 보세요!
1. 'Advanced search features' > 'Look and feel' > 'Two page' and select the style you want...

2. 그리고 '저장 및 코드 가져오기'... 위에 설명처럼 코드를 다시 입력하시면 됩니다... 이번 코드는 width 가 100%이기 때문에 어떤 디자인에서도 잘 맞아요...
2. after you click on 'Save & Get Code', you can insert however you wish as described above... width of this code is 100% so fits in with any design...

참고: 흠.. 새로 입력한 코드의 검색창(사이드바에 삽입한)이 이쁘지 않으면.. 예전꺼 그대로 두어도 됩니다...
Remark: if you dont like the design of the new search box... you can keep the old one...




댓글 2건 | 트랙백 1
댓글 쓰기 폼