'Information/Tistory (FastBoot 1.6.2)' 카테고리의 글 목록 :: The Importance of History

[티스토리] 반응형 스킨 FastBoot 1.6.2 본문 하단 텐핑(10Ping) 광고(소문박스) 넣기

Posted by Rintaro
2018.10.15 15:00 Information/Tistory (FastBoot 1.6.2)

 

FastBoot 1.6.2 스킨 본문 하단 텐핑(10Ping) 광고(소문박스) 넣기

 

티스토리 블로그를 보다보면 ‘구글 애드센스(Google AdSense)’, ‘데이블(Dable)’, ‘텐핑(10Ping)’을 이용한 광고가 블로그의 사이드바나 본문, 본문 상·하단 등에 기재되어 있는 것을 볼 수 있다. 이번에는 ‘텐핑’을 블로그 반응형 스킨 FastBoot 1.6.2 하단에 삽입하는 방법을 알아보도록 하자.

 

▶ Step.01 - 텐핑 가입 → 소문박스 복사해오기

 

 

1. 먼저 텐핑 홈페이지(http://tenping.kr/)로 이동, 혹은 어플리케이션을 설치해 회원가입을 한다.

 

- 텐핑 어플리케이션 안드로이드 설치하기

- 텐핑 어플리케이션 아이폰 설치하기

 

2. 텐핑은 회원가입시 ‘선배’를 등록하는 것이 무조건 이득이다. april3654@naver.com을 선배로 등록하고 텐핑에서 제공하는 혜택을 체험해보자.

 

선배/후배에 대한 것을 설명하자면 등록하는 선배가 꼭 상위 랭커일 필요는 없다. 결국에는 자신이 얼마나 활동하느냐에 따라 수익이 발생하기 때문이다. 선배가 고소득자라고 해서 후배에게 돌아오는 추가 인센티브 같은건 없다. 누구를 등록하든 선배를 등록하는 것이 텐핑에서 제공하는 500포인트 혜택을 받는 유일한 방법이기 때문에 이득인 것이다.

 

3. 회원가입 후, 좌측 사이드바 메뉴에서 ‘소문박스’를 클릭한다.

 

 

4. ‘소문박스’를 클릭하면 위와 같은 화면으로 이동한다.

 

5. 먼저 ‘소문박스 형태’를 지정하자. 큰 형태·작은 형태·리스트 형태 중 선택할 수 있다. 일반적으로 하단에 노출되는 광고는 리스트 형태의 광고를 많이 사용한다.

 

6. ‘소문박스 형태’를 지정했으면 밑의 복사하기 버튼을 클릭해 ‘소문박스 코드’를 복사한다.

 

 

▶ Step02 - 티스토리 블로그 HTML/CSS 편집

 

 

1. 티스토리 블로그 관리 화면 좌측 사이드바 메뉴에서 ‘스킨 편집’을 클릭한다.

 

2. ‘스킨 편집’을 클릭하면 나오는 화면에서 우측 상단에 위치한 ‘html편집’을 클릭한다.

 

 

3. HTML 탭에서 Ctrl+F 검색을 활용해 article_rep_desc를 검색한다.

 

 

4. [##_article_rep_desc_##] 아래 부분에 복사한 ‘텐핑 소문박스 코드’를 붙여넣기 해준다.

 

5. 적용이 끝나면 우측 상단에 있는 ‘저장’버튼을 클릭해 스킨에 적용해주면 본문 하단에 텐핑 광고가 삽입되었음을 확인할 수 있다.

 

 

▶ 텐핑의 수익 발생

 

텐핑에서 수익이 발생하기 위해서는 광고를 본 사람이 어떤 행위를 해야한다. 이 행위를 기준으로 수익이 발생하는 사항을 4가지로 나눌 수 있다.

 

- CPC(Cost Per Click) - 누군가가  광고를 클릭할 때마다 수익 발생

 

- CPI(Cost Per Install) - 어플 등 프로그램을 설치할 때 수익 발생

 

- CPS(Cost Per Sale) - 광고하는 제품의 실제 판매가 이루어질 때마다 수익 발생

 

- CPA(Cost Per Action) - 광고주가 원하는 행동을 할 때 수익이 발생 예) 회원가입, 구매 등

 

뒤로 갈수록 어렵지만 수익은 확실히 차이가 난다. 그래서 초심자들은 CPC를 먼저 해보고, 어느 정도 감을 익혔다 싶으면 그 때 CPI를 해보는 것을 추천한다. 텐핑 고수들은 CPA를 통해서 많은 수익을 올린다고 한다.

 

 

▶ 텐핑의 광고 유형

 

텐핑의 메뉴별 광고 유형은 아래와 같다.

 

- 클릭 : 해당 광고를 게재하고 불특정 다수의 이용자가 광고를 클릭했을 때 수익이 발생하는 광고. ‘클릭+5’는 클릭 후 5초 동안은 창을 닫지 않고 광고를 시청해야 클릭 카운트로 인정 된다는 뜻이다.

 

- 재생 : 재생은 텐핑에서 강점으로 세우는 동영상 컨텐츠다. 일부는 정보성 동영상도 있어서 게시하는 부담이 덜하다는 장점이 있다. 동영상을 보면 수익이 발생하지만 시청한 시간에 따라 수익금의 일부만 적립되기도 한다.

 

- 설치 : 어플리케이션을 설치하고 실행하는 경우 수익이 발생하는 광고.

 

- 참여 : 참여는 단가가 높은 광고이다. 단순히 광고의 클릭이 아니라 상품에 참여를 해야 수익이 발생한다. 광고주가 심사를 하기 때문에 수익 발생 후 인출까지 다소 시간이 소요되기도 하는 광고다.

 

- 쇼핑 : 쇼핑은 해당 링크를 통해 제품을 구매하는 경우 수익이 발생한다. 특정 상품으로도 광고를 만들 수 있다. 재밌는 부분은 특정 상품 광고를 보고 클릭해서 한 번 인입되고 나면 그 후 다른 상품을 구매해도 수익이 발생한다는 점이다.

 

실제 광고를 게재할 수 있는 곳은 SNS, 카페, 블로그 등 클릭할 수 있는 곳이라면 거의 모든 곳에 텐핑 광고를 게재할 수 있고 QR코드로도 만들어서 활용할 수 있다. 광고 개재 후, 첫 술에 배부를 수는 없지만 차분히, 꾸준하게 하면 누구나 수익이 가능하리라 생각한다.

이 댓글을 비밀 댓글로

[애드센스] 티스토리 블로그 사이드바에 구글 애드센스(Google AdSense) 반응형 광고 달기

Posted by Rintaro
2018.10.15 14:50 Information/Tistory (FastBoot 1.6.2)

 

FastBoot 1.6.2 사이드바에 구글 애드센스(Google Adsense) 반응형 광고 달기

 

 

▶ Step.01 - Google AdSense 홈페이지에 로그인 후 콘텐츠 → 광고 단위로 이동한다.

 

 

 

 Step.02 - +새 광고 단위 → 텍스트 및 디스플레이 광고를 선택한다.

 

 

 

▶ Step.03 - 광고 이름을 설정하고 광고 크기가 ‘반응형’으로 되어 있는지 확인 한 후, 저장 및 코드 생성을 눌러 광고를 생성한다.

 

 

 

▶ Step.04 - 생성한 광고 코드를 사용하기 편하게 복사해 메모장에 붙여넣기 한다.

 

 

 

▶ Step.06 - 블로그에 접속해 블로그 관리로 들어가 좌측 카테고리에서 ‘플러그인’을 클릭한다.

 

 

▶ Step.07 - 티스토리에서 제공해주는 여러 가지 플러그인 중에서 ‘배너출력’을 선택, 활성화 한다.

 

 

 

▶ Step.08 - 블로그 관리 화면 좌측 카테고리에서 ‘꾸미기’의 하위 카테고리 ‘사이드바’를 클릭한다.

 

 

 

▶ Step.09 - 기본 모듈 항목에서 HTML 배너출력에서 +를 클릭해 사이드바1 카테고리에 추가한 후,  추가한 배너출력에서 ‘편집’을 클릭한다.

 

 

 

▶ Step.10 - HTML 배너출력의 편집창이 나오면 이름을 설정하고 HTML 소스 항목에 구글 애드센스에서 복사한 광고 코드를 입력하고 확인을 클릭한다.

 

이 댓글을 비밀 댓글로

[애드센스] 티에디션(T-Edition) 활용 메인화면에 구글 애스센스(Google AdSense) 적용하기

Posted by Rintaro
2018.10.15 14:40 Information/Tistory (FastBoot 1.6.2)

 

티에디션(T-Edition) 활용 메인화면에 구글 애스센스(Google AdSense) 적용하기

 

 

▶ Step.01 - Google AdSense 홈페이지에 로그인 후 콘텐츠 → 광고 단위로 이동한다.

 

 

 

▶ Step.02 - +새 광고 단위 → 텍스트 및 디스플레이 광고를 선택한다.

 

 

 

▶ Step.03 - 광고 이름을 설정하고 광고 크기가 ‘반응형’으로 되어 있는지 확인 한 후, 저장 및 코드 생성을 눌러 광고를 생성한다.

 

 

 

▶ Step.04 - 생성한 광고 코드를 사용하기 편하게 복사해 메모장에 붙여넣기 한다.

 

 

 

▶ Step.05 - 블로그에 접속해 메인화면 우측 상단에 있는 티에디션을 이용해 메인화면을 편집한다.

 

① 블로그 메인화면에서 ‘티에디션’을 클릭해 편집화면으로 이동한다.

② 메인화면 구성에서 ‘+’를 클릭해 메인화면에 새로운 항목을 추가한다.

③ 티에디션 리모컨에서 새로 추가한 항목의 아이템을 선택한다. (html을 수정할 것이므로 아무거나 선택해도 상관없다)

 

 

 

▶ Step.06 - 새로 추가 설정한 항목을 클릭한 상태에서 티에디션 리모컨의 ‘디자인’ 탭에 있는 ‘html’을 클릭해 편집화면을 연다.

 

 

▶ Step.07 - html 편집화면에서 기존의 소스를 모두 삭제하고 메모장에 복사해놓은 구글 광고 코드를 붙여넣기 한 후, 적용을 눌러 저장한다.

 

 

 

▶ Step.08 - 블로그 메인화면 우측 최상단에 있는 ‘적용하기’ 버튼을 눌러 변경한 설정을 메인화면에 적용한다.

 

이 댓글을 비밀 댓글로

[티스토리] 반응형 스킨 FastBoot 1.6.2 본문/사이드바 폭 조정하기

Posted by Rintaro
2018.10.12 09:30 Information/Tistory (FastBoot 1.6.2)

FastBoot 1.6.2 스킨 본문/사이드바 폭 조정하기

 

 

FastBoot 1.6.2 반응형 스킨은 기본적으로 본문과 사이드바 폭은 본문 9, 사이드바 3의 비율로 설정되어 있다. 구글 애드센스(Google AdSense) 반응형 광고를 사이드바에 적용하기 위해서는 9:3의 비율로 되어있는 스킨을 8:4의 비율로 본문과 사이드바 폭의 조절이 필요하다.

 

▶ Step.01 - 블로그 관리 홈 → 꾸미기 → 스킨 편집 → html 편집으로 이동한다.

 

 

 

▶ Step.02 - html 탭에서 ‘Ctrl + F’를 입력하고 ‘추천 광고위치 1’을 검색해 위쪽에 있는 ‘col-md-9’ 항목을 ‘col-md-8’로 수정해 본문 폭을 조정한다.

 

 

 

▶ Step.03 - 다시 ‘Ctrl + F’를 입력하고 ‘블로그 설명 모듈’을 검색해 위쪽에 있는 ‘col-md-3’ 항목을 ‘col-md-4’로 수정해 사이드바 폭을 조정한다.

 

 

 

▶ Step.04 - 우측 상단의 저장 버튼을 눌러 본문/사이드바 폭 변경사항을 저장한다.

 

 

이 댓글을 비밀 댓글로

[티스토리] 반응형 스킨 FastBoot 1.6.2 본문 글씨체(폰트/글꼴) 바꾸기

Posted by Rintaro
2018.10.12 09:20 Information/Tistory (FastBoot 1.6.2)

FastBoot 1.6.2 스킨 본문 글씨체(폰트/글꼴) 바꾸기

 

 

▶ Step.01 - 구글 웹폰트 적용을 위해 아래 사이트에서 원하는 글씨체를 고른다.

 

 

 

▶ Step.02 - 원하는 글씨체를 골랐으면 해당하는 글씨체의 ‘@import url’을 복사한다. (여기서는 ‘Nanum Gothic (나눔고딕)’을 적용해 진행합니다)

 

 

 

▶ Step.03 - 블로그 관리 홈 → 꾸미기 → 스킨 편집 → html 편집 → CSS 편집 탭으로 이동한다.

 

 

 

▶ Step.04 - @charset 바로 아래 원하는 글꼴의 주소 ‘@import url~’ 을 붙여넣고 ‘font-family : ’ 바로 뒤에 'Nanum Gothic'이라고 글씨체의 이름명을 적어준다.

 

 

 

▶ Step.05 - 우측 상단의 저장 버튼을 눌러 글씨체를 적용한다.

 

 

이 댓글을 비밀 댓글로

[티스토리] 반응형 스킨 FastBoot 1.6.2 티에디션(T-Edition) 활성화 하기

Posted by Rintaro
2018.10.11 21:20 Information/Tistory (FastBoot 1.6.2)

FastBoot 1.6.2 스킨 티에디션(T-Edition) 활성화 하기

 

 

▶ Step.01 - 블로그 관리 홈 → 꾸미기 → 스킨 편집을 클릭해 스킨 편집 창을 띄운다.

 

 

 

▶ Step.02 - 스킨 편집 화면 → 홈 화면 꾸미기 항목에서 티에디션 클릭, 홈 화면에 편집 버튼 표시를 활성화 한다.

 

 

 

▶ Step.03 - 스킨 편집 화면에서 html 편집을 클릭해 html 편집 화면으로 이동한다.

 

 

 

▶ Step.04 - html 편집 화면의 html 탭에서 ‘Ctrl + F’를 입력하고 찾을 검색어에 ‘enableTedition’을 입력 후 Enter를 누른다.

 

 

 

▶ Step.05 - ‘enableTedition’을 검색해 이동한 항목에 ‘false;’로 되어 있는 부분을 ‘true;’로 변경한 후 저장 한다.

 

 

이 댓글을 비밀 댓글로

[티스토리] 반응형 스킨 FastBoot 1.6.2 블로그에 적용하기

Posted by Rintaro
2018.10.11 21:10 Information/Tistory (FastBoot 1.6.2)

반응형 스킨 FastBoot 1.6.2 설치하기

 

 

▶ Step.01 - FastBoot 1.6.2 소스를 다운 받는다.

 

 

 

▶ Step.02 - 다운 받은 FastBoot 1.6.2 파일의 압축을 푼다.

 

 

 

▶ Step.03 - 블로그 관리 홈 → 꾸미기 → 스킨 변경 클릭 → 스킨 등록으로 클릭해 이동한다.

 

 

 

▶ Step.04 - 스킨 등록 화면에서 추가 클릭 한다.

 

 

 

▶ Step.05 - 업로드할 파일 선택 창에서 ‘image 폴더’를 제외한 파일을 모두 업로드 한다.

 

 

 

▶ Step.06 - 폴더 안의 파일들을 업로드 한 후, 다시 추가를 클릭 한다.

 

 

 

▶ Step.07 - image 폴더 안으로 들어가 폴더 안의 모든 파일을 업로드 한다.

 

 

 

▶ Step.08 - 모든 파일을 업로드 하고 저장을 눌러 스킨 이름을 설정한 후, 스킨 등록을 마친다.

 

 

 

▶ Step.09 - 블로그 관리 홈 → 꾸미기 → 스킨 변경 클릭 → 스킨 보관함으로 클릭해 이동한다.

 

 

 

▶ Step.10 - 스킨 보관함 → 저장한 스킨 정보 → 적용을 눌러 FastBoot 1.6.2 스킨 적용을 완료한다.

 

 

이 댓글을 비밀 댓글로