[티스토리] 스킨변경부터 광고설치 A to Z

Posted by 두두오빠
2019. 6. 4. 20:16 블로그/티스토리

 

FastBoot 반응형 스킨 설치하기

 

FastBoot 반응형 스킨에 관한 정보

 

 

우선 여기까지 하면, 사이트에 기본적인 광고를 추가할 수 있는 구조가 된다.

 

다음은 티스토리에 광고를 설치하는 방법이다.

 

텐핑은 사이트에 대한 심사 없이, 쉽게 등록 가능하다

 

모바일용 텐핑광고 추가하기

 

PC버전으로도 텐핑광고 추가하기

 

사이드바에 텐핑광고 추가하기

 

 

다음 애드핏을 등록한다.

 

심사가 필요하다. 구글 애드센스보다 까다롭지 않다.

 

다음 애드핏 사이트

 

등록하는 방법 잘 설명되어 있는 페이지

 

스크립트를 플러그인을 통해서 등록하면 된다.

 

 

 

심사보류의 문제가 발생해서, 해결 방법을 찾으려고 고생..   의외로 해결방법은 간단했다.

 

오류 : 728 X 90 광고를 PC용으로 올렸으나, 웹으로 봤을때는 잘리는 문제가 발생.

 

고생 : window 사이즈에 맞춰서, pc나 모바일 기기 일때를 분리하려고 해봤으나.. 잘 안됨.  관련 정보들도 없음.

 

해결 방법 : 320 X 100 광고를 사용하면 됨. 해당 광고가 반응형으로 작동하면서, 각 매체에 맞도록 사이즈 자동 조절이 된다.

 

해결 방법은 여기서 찾았다. 좋은 정보 감사!!!

 

애드핏 광고는 어떤것 좋을까? 그리고 몇개가 좋을까?

 

팁1 - 하나의 광고단위를 만들어서 여러군데 넣어도 한군데만 노출됨. 각각 광고단위를 따로 만들어야 함.

팁2 - 실제로 확인해봐야 하나, 클릭없이 노출만으로도 일정 수익을 얻을 수 있음. 

         > 그럼 상단이나, 사이드바에 넣어줘야 하는거 아닌가? 

         > 애드센스는 오직 클릭만 수익이었나? 

 

수정 완료 후 재심사를 요청하여, 결과를 기다린다.

 

한개의 사이트가 정상적으로 심사 완료가 되면, 다음 사이트를 등록하여 심사를 받는다.

 

 

 

 

 

다음은 구글 애드센스를 추가하는 방법을 알아보자.

 

 

 

 

 

 

[티스토리] HTML을 이용하여 Table 다루기

Posted by 두두오빠
2018. 5. 25. 16:37 블로그/티스토리
HTML을 사용하여서 테이블을 등록하는 방법에 대한 정리중

주식에 대한 재무정보테이블로 표기하려고 하다보니, 다양한 문제를 접하게 됨


간단히 내용만 정리하면서, 다양한 케이스에 대한 테스트를 해보는 것이 좋겠다


우선 간단히 html 만 사용해서 table을 직접 만들어 보자

원하는 테이블이 잘 만들어진 것처럼 보이나, 문제가 있다

모바일로 봤을 경우는 테이블이 적당한 비율로 줄어들어서 한번에 조회되지 않는다

좌우로 표 스크롤을 통해서 확인을 해야하는 번거로움이 발생한다


문제는 width

2013.12 2014.12 2015.12 2016.12 2017.12
매출액 1234 1234 1234 5678 9012
영업이익 1,234 1,234 1,234 5,678 9,012
순이익 1234 1234 1234 5678 9012


문제는 width


<table align="center" width="600px">

테이블 속성에 width 값이 있는데, 그것이 테이블이 자동으로 줄어들지 못하게 한다

테이블 속성중에 width를 지우면, 모바일에서도 딱 그 크기에 맞도록 나올 수 있다고 함

내가 만들어야 할 테이블에서도 width 값은 넣지말도록 하자!!

< width 값 삭제 이후 >

2013.12 2014.12 2015.12 2016.12 2017.12
매출액 1234 1234 1234 5678 9012
영업이익 1,234 1,234 1,234 5,678 9,012
순이익 1234 1234 1234 5678 9012



한줄에 대한 속성을 한번에 설정할 수 있으나, 한개의 속성을 바꾸려면, 각각 설정해줘야 한다

- align을 각 각 설정해줌


이런 식으로 각 라인별로 속성 설정이 가능함   

<tr align="center">   ,   <tr align="right">


한 라인에서도 문자는 가운데 정렬, 숫자는 우측 정렬 형태로 표현하고 싶은 경우가 있음

각 <td> 별로 right, center 값을 사용해서 align 속성을 지정해줘야 한다

- 우측 정렬을 위해서 <td align="right">

- 가운데 정렬을 위해서 <td align="center">


[티스토리] 글의 우측 상단에 애드센스 광고 설치하기

Posted by 두두오빠
2017. 6. 26. 00:09 블로그/티스토리

티스토리에 구글 애드센스를 배치하는 방법 중에서, 이번에는 글의 우측 상단에 광고를 설치하는 방법을 확인해보자. 좌측에는 글이 나오고 우측에는 애드센스 광고가 나오는 구조여서, 광고가 더 많이 눈에 띈다는 장점이 있다. 그리고 글의 흐름을 막지 않는 선에서 적절한 광고 배치라고도 할 수 있다.


광고를 어떤 곳에 배치할지에 대한 것은 각자의 판단이다. 

혹시, 사이드바에 애드센스 광고를 설치하고 싶은가? 이곳에 있다.

바로가기 : 사이드바에 애드센스 광고 설치


혹시, 본문 중간에 애드센스 광고를 설치하고 싶은가? 이곳으로 가면 된다.

바로가기 : 본문 중간에 애드센스 광고 설치



다시 원래 계획대로 우측 상단에 애드센스 광고를 설치하는 방법을 확인해보자. 글의 우측 상단에 애드센스 광고를 설치하고자 하는 사람은 해당 방법을 따라서 설치를 하면 된다. 


먼저 구글 애드센스에서 광고 코드를 가져와야 한다. 반응형 광고 코드를 가져와서 사용할 수 있다. 혹시 광고 코드를 생성하는 방법을 모르고 있다면 이곳으로 가서 확인 할 수 있다.

바로가기 : 애드센스에서 광고코드 생성하는 방법




위와 같은 구글 애드센스 광고코드를 확인 할 수 있다. 우측 상단에 광고를 배치하기 위해서는 위 코드를 모두 사용하는 것이 아니라, client와 slot 값만 사용할 것이다. 각 애드센스에 맞게 고유의 값이 들어있기 때문에 지금부터 각 값을 다음으로 바꿔서 설명한다.


data-ad-client="12345", data-ad-slot="67890"


이 광고 코드를 적용하기 위해서는, 스킨의 HTML을 수정해야 한다. '꾸미기-HTML/CSS편집'에 들어가면, HTML 수정할 수 있는 부분이 나온다. HTML에서 광고코드 수정을 위해서 본문이 들어가는 부분을 찾아야 한다. ##_article_rep_desc_## 로 검색을 해보면 본문이 들어가는 부분을 쉽게 찾을 수 있다.





##_article_rep_desc_##  부분은 <div> </div> 구문으로 쌓여져 있다. 이 안에 우리가 작성하고자 하는 코드를 넣어야 한다. ##_article_rep_desc_## 윗부분에 <div> </div> 구조를 사용하여서 다음과 같이 넣어보자. <!-- 본문 우측상단 광고 --> 로 표기되는 부분이 해당 광고를 입력하는 코드이다. 해당 소스를 직접 입력할 수도 있겠지만, 번거로운 작업이 될것이다. 아래 소스 복사가 불가하면, 사용 가능한 해당 코드는 글 하단 댓글에서 확인이 가능하다.

<!-- 본문 우측상단 광고 -->

<div style="float:right; margin:5px 0px 0px 5px;">

<script>

if(window.getWindowCleintWidth()>=768){

document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" data-language="ko" style="display:inline-block;width:336px;height:280px" data-ad-client="12345" data-ad-slot="67890"></ins>');

(adsbygoogle = window.adsbygoogle || []).push({});

}

</script>

</div>

내용을 잠시 보자면, 768보다 큰 사이즈일 경우에는 336-280 사이즈의 광고를 넣겠다는 것이다. 물론 그 광고는 구글 애드센스에서 가져온 data-ad-client="12345", data-ad-slot="67890"이다. 이 값은 예시로 사용한 것이고, 실제로 구글 애드센스에서 가져오는 코드에 있는 본인의 값들을 사용해야 한다. 


실제로 적용된 HTML 소스를 확인하면 다음과 같이 볼 수 있다. '저장' 버튼을 클릭하면, 내 티스토리의 글들에 우측상단 광고가 적용이 된다. 추가 설정없이 기존에 작성된 글도 변경이 되니 확인 가능하다.




[티스토리] 텐핑 광고를 티스토리 사이드바에 설치하기

Posted by 두두오빠
2017. 6. 23. 23:25 블로그/티스토리

텐핑 광고를 사이드바에 설치하는 과정을 보고자 한다. 티스토리 플러그인에서 텐핑 광고를 추가할 수 있는 기능을 제공해주고 있다. 하지만 PC버전에서도 텐핑 광고를 추가할 수 있는 방법이 있다. 직접 소스를 수정해야 한다는 번거로움이 있지만, 쉽게 적용시킬 수 있으니 방법을 확인해보자.


본문 하단에 텐핑 광고를 추가하는 방법은 이곳에서 확인 가능하다.

바로가기 : 본문 하단에 텐핑 광고 추가


이제 사이드바에 추가하는 방법을 확인해보자. 우선 텐핑 서비스에 가입이 되어 있어야 한다. 혹시 가입이 되지 않은 상태라면 바로가기를 통해서 텐핑부터 가입하자.

바로가기 : 텐핑 가입하기


선배 아이디로는 never-stop@naver.com 를 추천한다.


다시 티스토리에 적용하는 방법을 확인해보자. 텐핑 사이트에서 소문박스를 하나 만든다. 여러 형태의 소문박스 중에서, 본인이 사용하고자 하는 것을 선택한다. 그리고 해당 코드를 복사해 둔다.




이제 티스토리에 넘어와서 사이드바에 해당 소문박스를 넣는 작업을 한다. '꾸미기 - HTML/CSS 편집'으로 가서, HTML 소스를 직접 편집해 본다. 


HTML 소스에서 사이드바 부분을 찾아야 하는데, s_sidebar 로 검색하면 다수의 결과가 나온다. 뭔가 규칙적으로 나오는데, 검색 결과들이 <s_sidebar_element> 로 시작해서 </s_sidebar_element> 로 끝나는 것을 확인 할 수 있다. 우리가 넣고자 하는 텐핑 광고코드도 이 규칙을 사용해야 한다. 이런 구조가 되어야 한다.

<s_sidebar_element>

텐핑광고 소스코드

</s_sidebar_element> 




지금까지 모든 작업을 완료했다면, 나의 티스토리의 사이드바에 텐핑 광고가 잘 나오는 것을 확인할 수 있다.




[티스토리] 텐핑 광고를 PC버전으로 설치하기

Posted by 두두오빠
2017. 6. 22. 17:55 블로그/티스토리

티스토리에 적용시킬 수 있는 광고중에 '텐핑'이 있다. 티스토리에서는 플러그인으로 텐핑 광고를 설치할 수 있도록 해준다. 하지만, 그 기능은 모바일 기기에만 적용해주는 것이기 때문에 PC버전에서는 사용할 수가 없다. 그래서 PC버전에서는 직접 스킨 소스를 수정하여 적용할 수 있다.


텐핑이 아직 설치되어 있지 않다면 다음을 보고 텐핑 가입을 하면 된다.


선배아이디로 never-stop@naver.com을 추천한다.  


텐핑 설치가 완료되었으면, 티스토리에 적용하는 방법을 계속 살펴보자. 먼저 텐핑 사이트에서 원하는 소문박스를 생성한다. 여러가지 소문박스 형태중에, 리스트 형태를 선택한다. 하단에 사용가능한 코드가 나올것이다.




다음단계는 티스토리에서 HTML 소스를 수정하는 것이다. '꾸미기 - HTML/CSS 편집'에 들어가 HTML 소스를 수정한다.

##_article_rep_desc_## 을 검색하여, 이 부분을 찾아서 텐핑에서 복사해온 코드를 붙여넣는다. ##_article_rep_desc_## 에는 본문에 작성된 글의 내용이 보여질 것이다. 그 밑에 붙여넣은 것은, 본문의 내용 밑에 해당 코드를 넣겠다라는 의미로 생각하면 된다.



본문 하단에 텐핑광고가 적용되는 것을 확인할 수 있다.



[티스토리] FastBoot 반응형 스킨 설치하기

Posted by 두두오빠
2017. 6. 22. 10:07 블로그/티스토리

티스토리에서 제공해주는 무료 스킨을 변경한지 얼마 되지 않았다. 스킨에서 사용하고 있는 기능들을 CSS에서 변경해야 하는데, 해당 CSS소스를 알아보기가 쉽지 않았다. 인터넷으로 변경방법을 확인해봐도 관련 정보가 너무 부족했다. 그래서 스킨을 다시 바꿔보도록 한다. 반응형 스킨인 FastBoot라는 스킨으로, 많은 사람들이 사용하고 있어서인지 관련 정보들도 인터넷으로 쉽게 확인할 수 있다.


FastBoot 반응형 스킨을 제작한 사이트에 들어가보자. 해당 스킨에 대한 설치방법과 설명이 자세히 나와있다. 

바로가기 : 간단히 설치하는 반응형스킨!


해당페이지의 중간 부분을 보면, 다운로드 가능한 파일들이 있다. 최신버전인 1.6.2를 다운로드 받아서 사용하자. 




꾸미기 - 스킨으로 가면 스킨 설정을 하는 화면이 나온다. 우측상단의 '스킨등록+' 를 눌러서 새 스킨 등록 화면으로 넘어가자.




다음과 같이 새로운 스킨을 등록할 수 있는 화면으로 넘어왔다. 윗단계에서 다운 받아놨던 파일을 등록할 수가 있다. 압축파일인 FastBoot를 압축해제하여 사용가능하도록 준비해 놓는다. 하단에 보면 '+추가' 버튼이 있는데, 클릭하여 파일들을 업로드 시키자.






FastBoot 를 압축해제 놓은 파일들은 아래와 같다. 이 파일들을 모두 업로드 해야 한다. 먼저 images 폴더를 제외한 6개 파일들을 업로드한다. 다음으로 images 폴더 안에 있는 파일들을 추가로 업로드시킨다.






업로드가 완료되면, 다음처럼 파일목록 확인이 가능하다. 스킨 저장명을 입력하고 '저장'버튼을 눌러서 스킨등록을 마친다.




저장을 마친 스킨은 스킨-PC보관함 에서 확인이 가능하다. 상단에 보이는 Flatinum 스킨이 변경전 사용하고 있던 것이고, 하단에 보이는 FastBoot v1.6.2 는 이번에 새로 등록한 스킨이다. '적용' 버튼을 클릭하여, 해당 스킨을 내 티스토리에 적용시키자. 



적용이 완료가 되었다. FastBoot v1.6.2 를 통해서, 다음과 같은 레이아웃을 가진 스킨으로 티스토리가 변경이 되었다.




[티스토리] 티스토리의 스킨을 변경하기

Posted by 두두오빠
2017. 6. 22. 00:00 블로그/티스토리

티스토리의 좋은 점 중에 하나는 화면의 구조라고 할 수 있는 스킨을 내 마음대로 선택하기 쉽다는 것이다. 스킨을 직접 만들어서 사용할 수도 있겠지만, 어느정도 실력이 있는 것이 아니면 도전해보기 쉽지 않다. 하지만 염려할 필요가 없다. 무료로 내가 마음에 드는 스킨들을 선택할 수 있는 방법이 있기 때문이다.


티스토리의 관리 페이지에 들어가면, 꾸미기 - 스킨 선택이 가능하다. 여기에서 변경가능한 스킨을 선택하는 것이 가능하다. 스킨을 클릭해보면, 우측으로 PC - 모바일 - PC보관함이라고 보여지는 것을 확인 할 수가 있다.




반응형 스킨이 대세이기 때문에 반응형 스킨을 사용하고 있었는데, 사용하다보니 내가 처음에 선택했던 스킨이 사이드바를 제공해주지 않았다. 직접 스킨을 수정하면서 사이드바를 추가할 수도 있겠지만, 사이드바를 제공해주고 있는 반응형 스킨을 찾는것이 더 쉬운 일이다. 




각 스킨에 대해서 미리보기를 할 수도 있고, 각 스킨의 상세한 설명들도 볼 수 있다. 각자 입맞에 맞는 형태 및 기능들을 확인하여서 적절한 스킨을 선택하면 된다. 내가 선택한 스킨은 Flatinum 스킨이다.




반응형 + 사이드바가 주요 목적이었기 때문에 Flatinum 을 선택했다. 우선 내가 사용하려고 했었던 사이드바가 배치되어 있고, 글을 보여주는 부분의 길이도 넓었다. 페이지의 상세 기능들은 직접 수정도 가능하지만, 어느정도 기능이 제공되어 있는 것을 사용하는 것도 상당한 시간을 줄여주는 일이다.




내가 사용하고자 하는 스킨을 선택하고, 한가지 더 체크해야 할 일이 남아있다. 바로 반응형 스킨을 사용하고자 선택했다면, 모바일 탭을 변경해줘야 한다. 모바일 탭에서 모바일웹 ON OFF 를 선택 가능한데, OFF로 설정을 해야 한다.




이제 나의 티스토리에, 새로운 반응형 스킨이 적용되었다. 사이드바가 있는 스킨을 원했던 이유가 사이드바에 애드센스 광고를 설치하려는 목적이었다. 이제 사이드바에 애드센스 광고를 설치하는 다음 단계로 가보자.


바로가기 - 사이드바에 광고추가하기


[티스토리] 티스토리 사이드바에 애드센스 광고 삽입하기

Posted by 두두오빠
2017. 6. 21. 23:58 블로그/티스토리

티스토리에 다양한 광고를 본인이 원하는 위치에 삽입할 수가 있다. 그중에서도, 이번에 알아볼 것은 구글 애드센스 광고를 티스토리의 사이드바에 삽입하는 것이다. 사이드바에 구글 애드센스 광고를 적용하는 방법을 한번 따라해보자.


구글 애드센스에서 사이드바에 등록하기 위한 새로운 광고 하나를 만들어야 한다. 사이드바는 위아래로 길쭉한 모양이므로, 우리가 사용할 광고도 위아래로 길쭉한 모양을 선택해서 만들어야 한다. 사각형모양의 광고를 등록할 수 없는 건 아니지만, 긴 사이드바를 효율적으로 사용하기 위해서는 비슷한 모양을 선택하는 것이 좋다.



다음 작업을 하기위해서 미리 확인해두어야 할 정보가 있다. 내가 가지고 있는 페이지의 사이드바의 크기를 알아야한다. 광고를 사이드바에 넣는 것이므로, 사이드바의 크기를 알아야 광고를 넣을때 크기를 조절해서 적용시킬 수가 있다.


나는 이 부분에서 잠시 작업을 멈출 수밖에 없었다. 내가 사용하고 있었던 스킨이 사이드바를 허용하지 않는 스킨이었다. CSS에서 #sidebar를 검색한 결과를 찾을 수가 없었다. 그래서 스킨을 변경하는 작업을 먼저 진행했다. 스킨변경 이후, 사이드바에 광고 삽입하기 과정을 계속 진행을 하고 있다.


바로가기 : 스킨변경하는 과정 확인


사이드바 배너를 사용하기 위해서는 티스토리에서 플러그인 설정을 해야 한다. 관리 및 통계 항목 중 배너출력을 사용하도록 설정을 한다. 사이드바에 배너를 출력가능하게 해주는 기능이다.




플러그인 설정이 완료되었다면, 다음작업을 진행하면 된다. 꾸미기 - 사이드바 설정을 통해서, 사이드바의 환경을 변경시킨다. 좌측 기본모듈에 보이는 HTML 배너출력을 우측 사이드바에 추가시킨다. + 버튼 클릭으로 이동시킬 수 있다. 




마지막으로 사이드바의 광고에 적절한 HTML소스를 넣는다. 구글 애드센스에서 등록했었던 광고의 코드를 가져와서 붙여넣어준다. 이제 사이드바에 구글 애드센스 광고가 적용이 되었다.




사이드바에 적용되는 광고의 크기는 HTML소스를 변경하여 수정이 가능하다. 소스내의, width:200px;height:600px 부분을 수정해가면서 내 사이드바에 설정할 광고크기를 선택하면 된다.


티스토리에 적용된 사이드바의 애드센스 광고를 확인하다보니, 인터넷 창의 크기에 따라서 사이드바가 아랫부분으로 옮겨지기도 한다. 그럼 글을 보여주는 부분의 길이를 줄이면, 사이드바가 더 오랫동안 보여지지 않을까? 글 부분의 길이 조정을 통해서 사이드바가 어떻게 되는지 확인을 해보는 것을 다음 주제로 삼아야겠다.


[티스토리] 티스토리 본문 중간에 애드센스 광고 삽입하기

Posted by 두두오빠
2017. 6. 17. 23:31 블로그/티스토리

티스토리에 광고를 삽입하는 다양한 방법중에서, 이번에 알아볼 것은 본문 중간에 애드센스 광고를 넣는 방법이다.


애드센스를 티스토리에 넣는 방법 중, 간편하게 본문 중간에 광고를 적용할 수 있는 방법을 알아보자.


본문 중간 광고는 다음과 같이 본문 중간에 나오는 광고를 의미한다. 


광고의 내용이 어떤것이 나올지는 우리가 선택할 수는 없지만,


어떠한 광고를 배치시키고, 어떤 상황에서 보여줄 것인가는 선택가능하다.


본문 중간에 애드센스 광고를 삽입하는 과정을 살펴보자.






애드센스 광고를 티스토리에 삽입하기 위해서는 당연히 구글 애드센스에 이미 가입이 되어 있어야 한다.


그리고 티스토리에 설치하기 위한, 광고단위를 구글 애드센스에서 만들어줘야 한다.


구글 애드센스에 로그인 해보자.


페이지 상단의 좌측을 보면 메뉴목록을 조회할 수 있는 버튼이 있다.


그것을 클릭하면, 다음과 같은 내광고를 설정할 수 있는 "내광고" 메뉴를 찾을 수 있다.


내광고 - 콘텐츠 - 광고단위를 클릭하면, 실제 광고 등록이 가능하다.








애드센스의 광고단위 페이지에는, 다음과 같이 활성화가 되어있는 나의 모든 광고리스트들이 조회가 된다.


티스토리에 다양한 광고를 설치해보면서, 본인에게 잘맞는 광고를 확인해보는 작업도 필요하다.


화면상단, 본문중간, 화면하단, 사이드 등 다양한 이름으로 광고단위를 만들어서, 


어떤 곳에서 수익이 가장 많이 발생하는지 확인해볼 수도 있다.







이제 실제로 새 광고를 추가해보자. 


화면 좌측상단에 보이는 " + 새 광고 단위 " 버튼을 클릭하여, 아래와 같은 내 광고를 새롭게 만들 수 있다.


다양한 크기의 광고를 선택할 수 있으며,


본문중간에 넣을 광고를 선택하려면, 아래에서 확인 가능한 300 X 250 크기가 적당하다.


이름과 광고크기를 정하고, 저장 및 코드생성 버튼을 누른다.









"광고 단위가 성공적으로 만들어졌습니다." 라는 메시지와 함께, 광고 만들기는 완료되었다.


내 광고를 확인 할 수 있는, 광고 단위 페이지에


방금 등록했던 본문중간광고가 등록되어 있음을 확인할 수 있다.






해당 광고를 보면,


광고이름 밑에 코드 가져오기가 있다.


코드 가져오기를 클릭해보면, 위에서 광고가 만들어졌을때 나오는 메시지와 비슷한 화면을 볼 수가 있다.


해당 광고코드를 복사해서, 티스토리에 적용시키는 방법으로 사용하는 것이다.






이제 구글 애드센스에서 할 수 있는 일들은 끝이났다.


다음으로 티스토리에서 해당 광고를 실제로 적용하는 절차만 남았다.


티스토리에서 본문 중간에 애드센스 광고를 삽입하는 방법은, 간단하게 서식을 이용할 수가 있다.




먼저 새로운 글을 작성하는 페이지를 띄운다.


글 제목 입력하는 란의 우측을 보면 서식이라는 선택가능한 항목이 있다.


서식을 선택하고, 글 작성하는 창으로 가기전에 우측을 보면 HTML 이라고 나와있는 부분을 확인 할 수 있다.


이 부분을 체크하고, HTML로 되어있는 광고코드를 입력한다.


여기에 애드센스에 등록해두었던, 두두패밀리 본문중간광고를 입력을 한다.


이제 이 서식을 발행하면 된다. 내가 사용할 수 있는 서식으로 해당 작업이 적용되었다.






이제 마지막 단계로, 만들어 놓은 서식을 글 작성시에 사용하면 된다.


새로운 글을 작성하게 되면, 우측에 글 정보를 관리하는 부분이 있는데,


가장 하단으로 내려가면 서식부분이 있다.


서식을 누르면, 지금껏 사용하고자 등록했었던 '본문중간광고'가 있음을 확인할 수 있다.


글 중간에 넣고 싶은 부분에 커서를 놓고, 해당 서식을 클릭하면 그 곳에 본문 중간광고가 들어가게 된다.






본문의 끝부분이지만, 실제 적용되는 것을 확인시켜주기 위해서, 나는 바로 윗 부분에 본문중간광고를 삽입하였다.


지금까지 등록하려고 했던 광고가 위와 같은 방식으로 삽입되는 것을 확인 할 수 있다.


[티스토리] 텐핑 설치하여 티스토리에서 광고수익 발생시키기

Posted by 두두오빠
2017. 5. 27. 10:50 블로그/티스토리
티스토리에는 다양한 광고를 설치하여 광고수익을 발생시킬 수 있다.


티스토리에서 광고수익을 발생시키는 다양한 방법중, 텐핑에 대해서 살펴보자.


이번은 텐핑을 어떻게 티스토리에 적용하고 광고수익을 발생시킬지 하는 것에 대해서 다뤄보려한다.


우선 가장 먼저, 텐핑 홈페이지에서 회원가입을 해야한다.



텐핑 사이트 바로가기 (http://tenping.kr)



텐핑 사이트에 접속하면 회원가입을 한다. 회원가입은 간편하게 휴대전화번호만을 가지고서도 등록이 가능하다.


텐핑에서는 선후배 맺기 제도를 이용해서, 많은 사람들이 참여할 수 있도록 하고,


맺어진 선후배들 간에 많은 혜택을 제공한다.


선배의 활동에 대해, 후배의 활동에 대해, 서로간의 인센티브를 제공해준다.


신규 가입시, 다음을 선배에 등록을 한다


never-stop@naver.com






회원가입이후 로그인을 하면, 텐핑을 티스토리에 등록할 수 있다


회원가입을 완료했으면, 로그인을 하여 다음 등록과정을 따라가자.


좌측에 다음과 같은 항목이 나오는 것을 볼 수 있다.


그 중에 소문박스를 클릭한다






소문박스 퍼가기 페이지가 나오면서,  원하는 소문박스 형태의 선택이 가능하다.


소문박스 형태는 다섯가지 종류가 있다.





해당 페이지 하단에 참고할만한 내용이 적혀있다.


수익성이 가장 높은 동영상 콘텐츠는 '큰 형태'에만 나온다고 하단에 표기가 되어있다.


소문박스 형태를 큰 형태(동영상 콘텐츠 포함)으로 설정하자. 사용 가능한 코드가 부여가 된다.



텐핑에서 할 수 있는 일은 여기까지이다.







이제 티스토리에 해당 코드를 적용하는 부분으로 다시 넘어와야 한다.


티스토리에서는 텐핑 등록이 가능하도록 기본 플러그인을 제공해주고 있다.


텐핑을 티스토리에 적용하기 위해서는 플러그인 설정을 해야한다.


티스토리의 관리페이지를 보면 다음과 같이 플러그인 설정하는 부분을 확인할 수 있다.





플러그인 설정을 클릭해보면, 사용가능한 리스트가 조회가 된다.


그 중에서, 텐핑 모바일용을 선택한다.


아래와 같이 광고코드를 등록할 수 있는 플러그인 창이 뜬다.


광고 위치는 글 하단에 배치가 되는 것으로 수정을 할 수 없다.


플러그인 창 하단에 텐핑 광고 코드를 입력하는 곳이 있는데, 여기에 텐핑 사이트에서 복사할 수 있었던 코드값을 붙여넣으면 된다.






코드값을 붙여넣고 확인버튼을 누르면, 정상적으로 텐핑이 등록된 것을 확인 할 수 있다.


해당 플러그인은 모바일용으로 제공되는 것이다.


PC에서 해당 플러그인 설치를 했다면, 아래와 같이 텐핑 (모바일용) 에 체크박스가 설정된것을 확인할 수 있을 것이다.


PC버전에는 텐핑광고가 적용되지 않는다.


모바일 기기에서 텐핑 광고가 잘 적용되었는지 확인할 수 있다.


내가 작성한 글들의 하단에 텐핑 광고가 붙어있음을 알 수 있다.





이제 사람들이 해당 광고를 클릭하게 되면 수익이 발생한다.


수익 발생은 텐핑 사이트에서 확인 가능하다.