How to

티스토리 이전 발행한 글들 서식으로 수동 광고 편하게 넣자 feat.<div></div>

be my love 2024. 11. 26. 20:19
반응형

수동 광고 1개 삽입은 쉽다.

운영 중인 티스토리 블로그들 중에서 애드센스를 통과한 블로그가 3개이다. 한 블로그의 글만 200개 좀 넘고, 나머지 블로그들은 몇십 개 정도의 글들이 있다. 광고 수익을 얻기에 많은 글을 발행한 것은 아니지만 수동으로 광고 코드를 넣기에는 고생이 심할 것 같은 꽤나 많은 글이다. 아시다시피 자동광고 외 수동으로 광고 1개를 넣는 것은 너무 쉽다. 본문의 광고를 넣기를 원하는 곳에 커서를 두고 블로그 상단 메뉴 중 점 세 개 모양의 아이콘을 클릭해 하위메뉴 중 광고를 클릭하면 광고가 너무 쉽게 삽입이 된다. 그런데 수동광고 1개 넣을 정도의 글 길이라면 수동 광고 1개만 넣으면 되지만 글을 쓰다 보면 미관을 해 치치 않을 정도인데 광고 3~4개를 더 넣을 수 있을 만큼의 분량으로 글이 써질 때가 있다. 이럴 땐 광고를 더 넣고 싶은 욕심이 생기기 마련이다.
 

여러 개의 수동 광고는 광고 코드를 넣어야 한다.

그러다가 html을 전혀 몰라 미루기만 했던 수동으로 광고 코드 삽입하는 것을 며칠 전에 시도하게 되었다. 수동으로 광고 1개를 넣는 것은 쉬운데 2번째부터는 html로 된 광고 코드를 티스토리 블로그에서 html 모드로 변경한 후 붙여 넣기를 해야 한다. 이 붙여 넣기 한 광고코드는 애드센스에서 만들어 저장해 둔 것을 복사해오는 것인데 이 과정도 처음에는 좀 낯설었다. 정리하자면 구글 애드센스에서 광고코드를 만들어 저장한 다음 복사해서 티스토리 블로그 html 모드에서 붙여 넣기 하는 것이다. 
 

html로 붙여 넣기 하는 수동 광고는 헷갈린다.

블로그를 html 모드로 변경하면 꽤나 복잡하다. 그렇기에 글을 쓸 때 광고를 넣을 부분을 표시해 두는 과정을 거친다. 광고 01, 광고 02, 광고 03 이렇게 말이다. 그리고 애드센스에서 광고 코드를 만들 때도 광고 01, 광고 02, 광고 03 이렇게 이름 지어 만든다. 그 코드가 다른 종류의 광고는 아니다. html 모드에서 번호 붙여진 광고 이름을 검색해서 그 공간에 붙여 넣어주기 위함이다. 그러니까 html에서는 내가 지정해 둔 곳을 찾기 어렵고 헷갈리니 이름을 이렇게 붙여 넣고 html 모드에서 ctrl+F로 찾기 하여 그 자리에 광고 코드를 수동으로 넣어준다. 이 방식으로 한 번만 해보면 알겠지만 무척 복잡한 과정을 거치게 된다.

광고 깨짐이 발생한다.

위와 같은 복잡한 과정을 거쳐서 광고가 잘 보이면 상관이 없는데 나의 경우 이전에 발행해 놓은 글에 더듬더듬 광고 코드 4개를 삽입한 후 다시 발행을 해보니 광고 2개 정도가 보이지 않았다. 다시 html 모드를 열어 광고가 맞게 들어갔는지 대조도 해보고, 다시 코드를 붙여 넣기도 해 봤지만 광고가 안보였다가 다시 보였다를 반복했다. 답답한 마음만 커져갔는데 광고코드 앞뒤로 <div></div>를 넣으면 코드 깨짐이 발생하지 않는다는 글을 읽었다. 그래서 <div></div>를 넣어봤지만 역시 광고는 보이지 않았다. 이런 저런 시도를 해보니 깨진 광고코드에다가 <div></div>를 넣으면 광고가 보이지 않는듯 하다. 그러니까 광고코드를 새로 붙여 넣기 한 후 앞뒤로 <div></div> 넣어줘야 광고가 제대로 잘 보였다. 이걸 해보느라 반나절을 보냈다. 어쨌든 수동 광고 넣는 방법을 알게 됐으니 기분은 좋았다.
 

서식으로 <div></div>를 넣은 광고코드를 만들어두자. 

수동으로 광고코드를 일일이 붙여넣기 해주려니 부담이 됐다. 새로운 글을 쓸 때마다 글 쓰는 시간도 걸리는데 광고코드를 붙여 넣기까지 하려니 글 쓰고 싶은 마음까지 사라져 버리는 느낌이다. 그러나 다행히 서식에서 html 모드에서 애드센스 광고 코드를 넣어주면 글을 쓰다가 광고를 넣고 싶은 곳에 커서를 둔 후 서식으로 불러와주면 수동으로 광고코드를 쉽게 넣을 수 있다. 광고코드 1개로 서식을 만들고 서식으로 불러오기만 하면 되니 정말 간편했다. 나처럼 수동으로 광고코드 넣는 것에서 고생을 좀 한 경우라면 서식으로 간편하게 넣을 수 있다는 것에 얼마나 감사한지 모르겠다. 광고코드를 서식으로 만들어둘 때 <div></div>도 같이 넣어줬다. 애드센스에서 광고 코드를 만든 후 복사해 서식을 만드는 방법은 아래 글에 자세히 남겨놓았다.
 
▼ 아래 글은 수동 광고를 서식으로 만드는 과정을 담은 글이다.

 
https://bemylooove.tistory.com/8

 

티스토리 애드센스 수동 광고 서식 만들어서 간편하게 넣자. feat.<div></div>

1개의 수동 광고 넣기는 쉽다.나의 경우 글의 길이가 조금 길어지면 중간에 광고를 하나 더 넣어도 되겠다는 생각이 들었다. 그럴 때는 아래 이미지처럼 원하는 위치에 커서를 두고 '광고'를 클

bemylooove.tistory.com

 

이전 발행한 많은 글의 수동 광고, 서식으로 해결하자.

앞으로 발행할 글도 서식으로 간편하게 수동 광고를 넣을 수 있어서 다행이기도 했지만 이미 발행한 많은 글들도 서식으로 수동 광고를 넣을 수 있어 편했다. 이미 발행한 200여 개 정도의 글을 일일이 html모드에서 광고코드를 붙여 넣기 했다면 어느 순간 폭발해 버릴 정도로 스트레스를 받았을 것이다. 
 

서식을 만든 후 수동 광고를 적용하는 방법

(1) 글의 수정상태에서 광고가 삽입되길 원하는 곳에 커서를 둔다.
(2) 상단 점 세개 모양의 아이콘을 클릭한다.
(3) 하위메뉴가 나타나면 서식 클릭한다.

 
(4) 만들어 놓은 서식 제목을 클릭한다.
 

 
 
(5) 아래와 같이 적용된 광고코드가 잘 나타난다.

 
 
광고 코드를 서식에 적용해 만들어 두는 방법은 정말 시간을 최대한으로 줄여주는 방법 같다. 이 방법은 무척이나 요긴하게 쓰이니 서식을 만들어 사용해 보자.

반응형