[애드센스] 티스토리 블로그 사이드 메뉴에 애드센스 광고 넣기

---

[사이드 메뉴 애드센스 광고 적용 방법]

 티스토리 블로그를 다시 활성화할 마음을 먹고 다른 블로그들을 살펴보았습니다. 많은 수의 블로그에서 사이드바에 애드센스 광고나 다른 협찬 배너들을 하나 이상 배치해 놓았더군요. 그래서 저도 적용하고 싶은 마음이 생겨 블로그 설정을 이것저것 뒤져보았습니다.

---

스킨 변경

▲ 기존에 사용하던 스킨

 사이드 메뉴에 광고를 넣기 전에 기존에 사용하던 스킨부터 바꿨습니다. 위에 사진을 보시면 기존에 사용하던 스킨은 사이드 메뉴에 광고가 있게 되면 매우 보기 싫어 보일 것 같았습니다. - 혹시 사이드 메뉴 광고를 적용하게 되면 오른쪽에 광고가 나올 지도 모르겠군요. 저 스킨을 계속 사용하고 싶으신 분들은 한번 확인해보세요. - 더욱이 저 스킨 말고 다른 형태의 레이아웃을 가진 스킨으로 하고 싶었습니다.

▲ 이번에 변경한 스킨

 그래서 위의 사진에 표시한 스킨이 이번에 변경한 스킨입니다. 아직 HTML은 하나도 모르지만 큼지막한 헤더 사진을 변경할 수도 있을 것 같고 제가 원하는 형태로 사이드 메뉴가 있습니다. 저 스킨으로 헤더 사진 변경이나 기타 다른 설정들을 변경하게 되면 추가로 블로그에 공유하도록 하겠습니다.

---

티스토리 블로그 배너출력 설정

▲ [플러그인] 메뉴에서 [배너 출력] 설정

 그 다음에 한 것이 [플러그인]에서 [배너 출력] 이라는 플러그인을 사용 중으로 변경하였습니다. 아마 이 플러그인을 '사용중'으로 변경하지 않으면 [사이드바] 메뉴에서 광고 HTML을 넣을 수 있는 선택 사항이 없을 것입니다. HTML 고수 분들은 아예 소스 레벨로 뜯어고치시려나요? 부럽습니다. 앞으로 저도 HTML을 요리조리 잘 연구해보도록 하겠습니다.

▲ [사이드바] 메뉴에서 '배너출력'

 위에서 플러그인을 '사용중'으로 변경하셨다면 [사이드바] 메뉴에서 '이미지 배너출력'과 'HTML 배너출력' 이라는 항목을 확인할 수 있습니다. 우리는 애드센스 광고를 넣을 것이기 때문에 이중에서 'HTML 배너출력'을 선택하도록 하겠습니다. '이미지 배너출력'은 아직 저도 이 기능을 써볼 기회가 없어서 모릅니다만, 본인의 다른 사이트를 홍보하고 싶거나 협찬 받은 사이트 같은 것을 알릴 때 사용하는 것으로 추측 됩니다.

▲ 'HTML 배너출력' 배치

 이제 'HTML 배너출력' 버튼 옆에 '+' 버튼을 눌러 사이드바에 배치를 해줍니다. 이때 제가 선택한 스킨처럼 사이드바를 2개 사용하는 스킨의 경우는 어디에 배치할 것인가를 먼저 선택하게 됩니다. 원하는 사이드바를 선택하고 각 사이드 바에서 원하는 위치로 모듈의 위치를 조정하여 배치합니다.

▲ 'HTML 배너출력' 편집 화면

 그리고 'HTML 편집 화면'의 [편집] 버튼을 누르면 '이름', 'HTML 소스' 입력란과 '사용자 모듈에 저장' 체크란이 나오게 됩니다. '이름' 란은 사용자가 정한 배너의 이름이고 'HTML 소스' 부분이 애드센스 광고 코드를 입력할 부분입니다. '사용자 모듈에 저장'에 대해서는 뒤에서 자세히 설명하도록 하겠습니다. 우선 'HTML 소스'에 입력할 애드센스 광고 코드가 있어야겠죠? 그럼 애드센스 광고 코드를 만들러 가봅시다.

---

애드센스 광고 단위 만들기

▲ 애드센스 [광고 단위] - [+ 새 광고 단위] 클릭

▲ '텍스트 및 디스플레이 광고' 선택

 애드센스에 가입이 되어있다는 전제하에 [광고 단위]를 선택하고 그 화면 내에서 [+새 광고 단위] 버튼을 눌러 줍니다. 그리고 나오는 화면에서 '텍스트 및 디스플레이 광고' 를 눌러 줍니다. 여기서 '인피드 광고'와 '콘텐츠 내 자동 삽입 광고' 코드는 아직 써볼 일이 없어 정확한 파악이 되지 못했습니다만 우리는 지금 사이드바 광고를 넣을 것이므로 이 두개는 필요하지 않습니다.

▲ 250 x 250 크기의 광고 만들기

 그 다음에 나오는 화면에서 광고 이름을 입력하고 게재 크기를 '직사각형' 으로 선택합니다. 저의 경우 250 x 250 크기의 광고 사이즈를 선택하였습니다. 이것은 각자 본인이 사용하는 스킨에 적합한 사이즈로 선택하면 되겠습니다. 그 외에도 '맞춤 크기'를 선택하여 직접 원하는 사이즈의 광고를 만들수도 있습니다. 그리고 하단에 기타 설정들은 건드리지 않았습니다. 이제 [저장 및 코드 생성] 버튼을 눌러줍니다. 

▲ 광고 코드 화면

 그러면 광고 코드라는 팝업이 나오는 데 여기서 광고 코드란에 소스를 모두 선택하여 복사(ctrl + c)를 합니다.

▲ [광고 단위] 화면의 광고 단위 리스트에서 [코드 가져오기]

 만일 광고 코드 화면이 출력되지 않았다거나 [닫기]를 누르셨다면, [광고 단위] 화면에 만들어둔 광고 단위에서 [코드 가져오기] 버튼을 누르시면 이전과 동일한 광고 코드 팝업 화면을 보실 수 있습니다.

---

광고 코드 입력하여 설정 완료

▲ 복사한 광고 코드 붙여넣기

 위에서 복사한 광고 코드를 'HTML 배너출력' 화면의 'HTML 소스'에 붙여넣기 합니다. 그리고 저장할 이름을 입력합니다. 저의 경우는 위의 사진의 우측에 희미하게 보이는 화면처럼 '애드센스_250_250' 으로 명명하였습니다. 그리고 '사용자 모듈에 저장' 을 체크하였는데 이 기능은 위의 사진의 좌측 하단에 희미하게 보이는 '사용자 모듈'에 이번에 설정한 내용을 저장하는 기능입니다. 그래서 나중에 추가로 사이드바에 광고를 넣고 싶을 때 번거롭게 다시 광고 코드를 복사할 일 없이 편리하게 재사용할 수 있게 해줍니다. 모두 다 입력하였으면 [확인] 버튼을 누르고 [변경사항 저장] 버튼을 반드시 눌러줍니다. 그러면 모든 설정이 완료되었고 블로그를 확인해보면 원하는 위치에 설정하여 넣은 사이드바 광고가 출력되는 것을 확인할 수 있습니다. 만일 설정한 위치에 광고가 보이지 않고 흰색으로 보인다면 아직 애드센스 광고가 활성화가 안된 것으로 어느 정도 시간이 지나면 광고가 출력됩니다.

---

관련 포스팅 

- [애드센스] 티스토리 블로그 사이드 메뉴에 애드센스 광고 넣기 (이번 포스팅)

- [애드센스] '자동 광고' 적용 및 후기

---

유익한 시간되셨다면 하단에 공감 버튼을 눌러주세요.

여러분의 공감은 저에게 큰 힘이 됩니다.