본문 바로가기

IT/TISTORY 블로그 만들기

티스토리 본문 중간에 광고 삽입하는 방법(서식 활용)

 티스토리 블로그를 운용하는 이유 중 하나가 바로 애드센스 광고를 설치할 수 있고 여러 가지 부분에서 편리한 부분이 많기 때문일 것입니다. 저의 블로그에도 애드센스를 설치하여 약간의 수익을 내고 있지만 상단과 하단 만으로는 한계가 있다는 것이 아쉬움을 남기게 됩니다. 이것을 조금이나마 충족할 만한 것이 본문에 약간의 광고를 삽입하는 것인데 글을 쓸 때마다 매번 HTML의 광고 코드를 삽입해야 한다는 단점이 있어서 굉장히 번거로운 작업이라고 할 수 있습니다.

 오늘은 그 번거로운 작업을 티스토리 설정인 서식을 통해서 보다 손쉽고 빠르게 광고 코드를 삽입하는 방법에 대해서 설명해 보겠습니다.

 

 

 중간에 사용할 광고 만들기

 

 다른 CPC 및 CPM 등등의 광고 코드를 복사해서 사용해도 되지만 애드센스를 사용하는 분들이 많을 것이라고 생각이 들어서 애드센스를 예로 들겠습니다. 애드센스 외에 다른 광고를 사용하시는 분들은 광고 만들기를 스킵하고 다음 단계로 넘어가시면 됩니다.

 

 

▲ 애드센스에 접속을 한 후 내 광고 - 광고 단위 - 새 광고 단위를 클릭하여 서실에 들어갈 새 광고를 만들어줍니다. 기존에 사용하고 있는 광고 코드를 복사해서 사용해도 무관합니다.

 

 

▲ 새 광고를 눌렀다면 광고 크기와 종류를 선택한 후에 저장 및 코드 생성을 클릭하여 광고를 생성시켜 줍니다. 저는 가로로 쭉 이어진 반응형 광고를 선택하겠습니다.

 

 

▲ 광고 단위가 성공적으로 만들어졌다면 위에 보이는 것처럼 광고 코드가 나올 것입니다. 저곳을 클릭해서 Ctlr + C를 눌러 복사를 해둡니다.

 

 

 서식을 활용한 광고 삽입

 

 

▲ 그리고 나의 티스토리 블로그로 돌아가 글쓰기를 누릅니다.

 

 

▲ 글쓰기를 클릭하면 빈 공간의 글쓰기 서식이 나올는데 오른쪽 위에 보이는 서식을 체크하고 그 오른 편에 있는 HTML을 체크합니다. 광고 코드가 HTML로 구성되어 있기 때문에 만약 HTML을 체크하지 않고 서식을 만들어 불러온다면 광고를 삽입하는 것이 아닌 광고 코드 글씨가 불러와질 것입니다.

 

 

▲ 제목은 본문 중간 반응형 광고로 저장을 하고 광고와 글씨 및 그림 사이에 간격을 설정하기 위해서 Div Style를 이용하여 간격을 줄 것입니다. 코드는 아래 텍스트 파일을 받아서 복사해서 사용하시면 됩니다.

 코드가 정상적으로 삽입되었다면 발행을 눌러서 서식을 추가해줍니다.

애드센스 코드삽입.txt

 

 

▲ 글쓰기 목록을 보면 서식하고 제목에서 적었던 본문 중간 반응형 광고가 생성된 것을 확인할 수 있을 것입니다.

 

 

▲ 서식이 추가되었으면 현재 작성하고 있는 글이나 이전의 글을 불러와서 본문 중간에 광고를 삽입해 보겠습니다. 글을 불러와서 오른쪽 하단에 있는 작성 중인 글 옆에 보이는 서식을 클릭하면 목록이 나열되는데 광고를 삽입하고 싶은 곳으로 이동하여 내가 만들었던 본문 중간 반응형 광고 서식을 클릭해서 추가해줍니다. 추가를 하게 되면 작성 중인 글에는 보이지 않지만 발행을 누르고 블로그로 돌아가서 보게 되면 광고가 추가된 것을 확인할 수 있을 것입니다.

 

 

▲ 저는 미칠 전에 작성하였던 글을 불러와서 그림 아래에 서식 코드를 삽입하였는데 위와 같이 광고가 표시된 것을 확인하였습니다.