티스토리 반응형 스킨에 애드핏 사이드바 광고 띄우기

티스토리를 사용하시는 블로그 여러분~ 안녕하세요! 지금 이 곳에 검색을 통해서 들어오셨다면 다음 애드핏, 이제는 카카오애드핏의 사이드 바 광고를 블로그 메인화면과 게시글에 띄우고 싶으신데 이상한 위치에 처밖히는 사이드바 광고를 원하는 위치에 띄우는 방법을 찾고 계신 분이실 겁니다. 

저도 구글 애드센스 광고만 띄우다가 이번에 애드핏의 광고도 게재하기 위해서 애드핏에 가입을 하고 광고단위를 생성한 후 게재 승인까지 완료한 후 사이드 바 광고를 띄웠는데 아래 사진과 같이 아래 부분에 쳐박혀 있는 모습을 보게 되었습니다. 

화면 하단의 좌측에 홀로 외로이 떠 있는 사이드바 광고입니다. 주위에 아무 것도 없는 여기까지 누가 스크롤을 내려서 이 광고를 보겠습니까? 화면의 사이드에 있어야 할 사이드바 광고가 왜 이곳에 있을까요? 이유는 제 티스토리 블로그의 스킨이 티스토리에서 기본 스킨으로 제공하는 반응형#1 스킨인데 해당 스킨의 사이드바가 하단에 위치하기 때문인 것 같습니다. 

그럼 이 곳에 처박힌 사이드바 광고를 우측 사이드로 옮기는 과정을 보여드리면서 티스토리 블로그의 반응형#1 스킨을 사용하시는 분들이 사이드바 광고를 우측 사이드에 띄우는 방법을 알려드리겠습니다. 본 과정은 하나즈오우(HaNaZuOu)님의 게시글과 생각하는 기계님의 블로그 게시글을 참고하여 진행했습니다.

우선 본인의 티스토리 블로그의 관리->꾸미기->스킨편집으로 들어가 줍니다. 그럼 아래 사진과 같이 우측에 본인의 스킨명과 해당 스킨에 대해 간단한 설명이 있고 html 편집이라는 버튼이 보입니다.

위 사진에 보시는 대로 제 skin 은 반응형 #1 스킨입니다. html 편집 버튼을 클릭해 주고 html 편집기로 들어가 줍니다. 크게 어려울 건 없지만 처음 html 편집을 해보시는 분들은 html 내용 전체를 복사해서 별도로 저장해 두신 후에 진행을 하시는게 안전하겠습니다.

그럼 위와 같이 html 편집기 화면이 우측에 보이는데 해당 html 코드들 중에 어느 부분에 애드핏 사이드바의 코드를 삽입해야 하는지 알려드리겠습니다. 위치는 스킨별로 다 다르지만 위치는 거의 비슷한데 제가 참고한 하나즈오우님과 생각하는 기계님은 <div id="dkContent" class="cont_skin" role="main">의 아래에 붙여 넣으면 된다고 하셨는데 그 동안 #1 스킨에 변경이 있었는지 해당 코드를 찾을 수가 없었습니다.

그래서 비슷한 코드를 찾아서 그 아래에 붙여 넣었더니 바로 이 게시글에서 보이듯이 사이드바 광고가 우측 사이드로 옮겨지더라구요.^^ 제가 찾은 부분은 위 사진의 1번 부분처럼 <div id="dkHead" role="banner" class="area_head "> 라는 코드의 아래 부분입니다. (참고로 whatever 스킨에서는 <div id="acc-nav"> 의 아래부분에 넣어주면 됩니다.)

제가 붙여넣기 한 코드는 아래에 텍스트 파일로 첨부를 해 놓을테니 다운로드 하셔서 이용하시기 바랍니다. 여기서 주의하셔야 할 것은 텍스트 파일의 내용중에 위 사진 2번 항목의 부분에는 자신이 카카오 애드핏 홈페이지에서 생성한 본인의 사이드바 광고스크립트를 복사해서 붙여 넣기 하셔야 합니다. 

그리고 위 사진의 100px 부분은 사이드바의 위치를 결정하는 수치인데 위로부터 얼마나 아래부분에 사이드바 광고를 띄울지를 결정합니다. 저같은 경우 100px로 설정하니 아래 사진과 같이 딱 적당한 위치로 자리가 잡혔습니다.

참고로 스킨별로 블로그의 가로폭의 차이로 인해 사이드 바 광고가 메인화면의 내용 일부를 가리게 되는 경우가 있는데 만약 스킨의 가로폭이 800px 이 아니라 1200px 라면이런 경우에는 위 사진의 margin_left = (window_size-800)/2+820+"px" 의 코드를  margin_left = (window_size-1200)/2+1220+"px" 로 바꿔주시면 1200px 가로폭에 맞게 사이드바가 좀더 우측으로 이동을 하게 되니 참고하시기 바랍니다.

그럼 이상으로 티스토리 블로그에 애드핏 사이드바 광고를 화면 우측 상단에 위치 시키는 방법에 대해서 알려드렸습니다. 티스토리 블로그를 사용하시면서 애드핏 사이드바 광고를 게재하려고 하시는 분들께 많은 도움이 되셨기를 바랍니다.

애드핏사이드광고.txt

구글 애널리틱스 용어정리, 분석방법

카카오키워드광고(다음클릭스),네이버키워드광고,구글키워드플래너 비교분석

애드센스 해외송금 수수료 절약,신한은행 해외송금 직접입금

구글 애널리틱스 용어정리, 분석방법

blogger, 구글 블로그 스팟계정 쉽게 만들 수 있어요!!

애드센스, 애드포스트 용어정리(CTR,CPC,RPM..)

구글 애드센스 수익 높은 포스팅 확인하는 방법