좌충우돌 티스토리 본문 배너 만들기

티스토리 블로그는설치 형 블로그에 가깝기 때문에  매우 것들을 할 수 있습니다. 디자인을 변경하거나 본문내부에 광고를 삽입하거나 하는 등의 일을 할 수가 있습니다. 그래서 배너광고 등으로 블로그에서 통하여 수익을 만들 수 있습니다.

   

수익형 블로그의 운영을 위하여 티스토리 블로그에 구글 배너와 같은 배너를 만들어 보려고 했습니다. 블로그에서 수익을 얻기 위한 블로그 수익형 블로그 운영은 제 블로그에서 시작을 하여도 3개월 정도의 장기 프로젝트로 준비를 해보고 있습니다.

   

수익형 블로그 운영을 위하여서는 기본적으로 어느 정도의 배너를 블로그에 삽입을 해야 하는 문제가 있었습니다. 제 경우는 이전의 다음 뷰에드가 있던 자리에 수익성 배너를 만들 계획을 짜고 있습니다.

   

   

   

제가 진행하고 있는 에드리더스(www.adleaders.com) 배너 광고로 보험상담 신청을 하는 경우 건당 10,000원 ~ 40,000원 까지 수입이 발생 할 수 있습니다. 개인적인 목표는 1일 1건의 보험 관련 고객 DB를 만들고 월 30만원 정도의 수익을 목표로 잡고 있습니다. 배너의 렌딩 페이지인 메리츠몰 의 공식 브랜드 블로그 운영도 함께 하고 있습니다.

   

개인적으로 비슷한 시간을 투자하는 브랜드 블로그에서 얻을 수 있는 수입의 70% 정도를 산정한 것입니다. 보험 정보 포스팅을 1주일에 1~2건 정도로 제한을 두고 있기 때문에 결코 쉬운 목표는 아니라고 생각합니다.

   

좌충우돌 티스토리 본문 배너 만들기

   

티스토리의 본문에 배너를 삽입을 하려면 간단한 코딩에 대하여 알아야 가능합니다. 저는 일단 간단한 코딩이 가하기 때문에 간단하게 배너를 만들었습니다.

   

배너의 만드는 단계

   

1. 이미지 만들기 - 저는 메리츠몰 배너를 제 블로그 사이즈로 조정하여 스킨편집>> 파일 업로드로 직접 제 블로그에 올렸습니다.

   

2. 포스팅 내부에 적합한 배너 코드 생성 - 배너 코드는 div를 이용하여 우측 상단에 고정으로 위치하게 만들었습니다.

   

3. 본문 삽입 - 블로그 변수 위에 코드를 집어넣고 마무리

   

* 배너의 본문 삽입은 블로그 변수인 "_article_rep_desc_" 검색하여 위와 아래에 광고를 넣을 수 있습니다.

<div class="article">

   

티스토리 블로그는설치 형 블로그에 가깝기 때문에  매우 것들을 할 수 있습니다. 디자인을 변경하거나 본문내부에 광고를 삽입하거나 하는 등의 일을 할 수가 있습니다. 그래서 배너광고 등으로 블로그에서 통하여 수익을 만들 수 있습니다.

   

수익형 블로그의 운영을 위하여 티스토리 블로그에 구글 배너와 같은 배너를 만들어 보려고 했습니다. 블로그에서 수익을 얻기 위한 블로그 수익형 블로그 운영은 제 블로그에서 시작을 하여도 3개월 정도의 장기 프로젝트로 준비를 해보고 있습니다.

   

수익형 블로그 운영을 위하여서는 기본적으로 어느 정도의 배너를 블로그에 삽입을 해야 하는 문제가 있었습니다. 제 경우는 이전의 다음 뷰에드가 있던 자리에 수익성 배너를 만들 계획을 짜고 있습니다.

   

   

   

제가 진행하고 있는 에드리더스(www.adleaders.com) 배너 광고로 보험상담 신청을 하는 경우 건당 10,000원 ~ 40,000원 까지 수입이 발생 할 수 있습니다. 개인적인 목표는 1일 1건의 보험 관련 고객 DB를 만들고 월 30만원 정도의 수익을 목표로 잡고 있습니다. 배너의 렌딩 페이지인 메리츠몰 의 공식 브랜드 블로그 운영도 함께 하고 있습니다.

   

개인적으로 비슷한 시간을 투자하는 브랜드 블로그에서 얻을 수 있는 수입의 70% 정도를 산정한 것입니다. 보험 정보 포스팅을 1주일에 1~2건 정도로 제한을 두고 있기 때문에 결코 쉬운 목표는 아니라고 생각합니다.

   

좌충우돌 티스토리 본문 배너 만들기

   

티스토리의 본문에 배너를 삽입을 하려면 간단한 코딩에 대하여 알아야 가능합니다. 저는 일단 간단한 코딩이 가하기 때문에 간단하게 배너를 만들었습니다.

   

배너의 만드는 단계

   

1. 이미지 만들기 - 저는 메리츠몰 배너를 제 블로그 사이즈로 조정하여 스킨편집>> 파일 업로드로 직접 제 블로그에 올렸습니다.

   

2. 포스팅 내부에 적합한 배너 코드 생성 - 배너 코드는 div를 이용하여 우측 상단에 고정으로 위치하게 만들었습니다.

   

3. 본문 삽입 - 블로그 변수 위에 코드를 집어넣고 마무리

   

* 배너의 본문 삽입은 블로그 변수인 "_article_rep_desc_" 검색하여 위와 아래에 광고를 넣을 수 있습니다.

<div class="article">

   

   

</div>

위 변수의 상단에 넣은 첫 번째 배너 였습니다.

<div style="clear: both; float: right;width:250px; height:208px; margin-left:10px;margin-top:0px; font-size:10px;">

<a href="http://www.meritzdirectmall.com/H002/chunchu" target="_blank">

<img src="http://cfs.tistory.com/custom/blog/86/868489/skin/images/ben_20131030.jpg" width="250"></a>

</div>

원하는 위치 매우 만족스럽게 세팅이 되었습니다.

   

   

배너의 위치에 대한 미세 조정도 마치고 나니 매우 흡족했습니다.

   

   

사설 배너의 문제점

   

너무 편하게 생각을 하고 배너를 만들었던 것 같습니다. 본문에 제일 처음 나오는 이미지가 배너의 이미지다 보니 검색 페이지에 보이는 제 블로그는 아래와 같이 됐습니다.

   

검색 결과는 역시 배너가 메인 이미지로 검색

   

검색 로봇이 본문의 첫 이미지를 배너로 가지고 간 것입니다.

   

아차 하면서 1단계 수정 작업에 들어 갔습니다. 위의 내용을 별도의 별도의 HTML 페이지로 만들고 블러오는 방법을 썼습니다.

   

배노 소스 2번 -  iframe 활용

<div style="clear: both; float: right;width:250px; height:220px; margin-left:10px;margin-top:10px; font-size:10px;">

   

<IFRAME src="http://cfs.tistory.com/custom/blog/86/868489/skin/images/ad.htm" name="chuncuh" width="250" height="218" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"> </IFRAME>

   

</div>

   

제가 봐도 멋진 아이디어 였습니다. 하지만 역시 네이버에서 검색결과는 좌절이었습니다.

검색 결과는 역시 배너가 메인 이미지로 검색

   

그래서 아이패드에서 보이지 않는 단점을 감수하고 플래시로 만들어서 사용하는 방법을 생각하고 플래시를 만드려고 보니 플래시 파일을 만들 수 있는 프로그램이 없었습니다. 개인적으로는 거의 3년이상 플래시를 쓰지 않다 보니 관련 프로그램이 없었던 것입니다.

   

그래서 약간의 삽질(?) 이후에 대안으로 생각을 한 것이 div에 배경으로 배너의 이미지를 넣고

   

배너 넣기 최종

   

<div style="clear: both; float: right; margin-left:10px;margin-top:20px; width:250px; height:208px; background-image:url(http://cfs.tistory.com/custom/blog/86/868489/skin/images/ben_20131030.jpg) ">

<a href="http://www.meritzdirectmall.com/H002/chunchu" style="display:block; width:300px; height:208px;" target="_blank">

<fon size="10px" color="#ffffff">[ad] 메리츠 다이렉트몰 </font><br/>

</a>

   

</div> 

Div에 배경으로 배너 이미지를 넣고 하이퍼 링크에 스타일을 넣어서 빈 배너(배경에 이미지가 있기 때문에 내용은 없는 것입니다) 영역을 클릭이 가능하게 하였습니다.

   

위에 백그라운드 이미지는 제 블로그에 파일 올리기로 올리고 이미지 주소를 확인 한 것입니다.

   

   

이미지 주소 얻는 법은 위 이미지를 보시면 이해가 빠르 실 것입니다.  

배너이미지를 배경으로 넣고 하이퍼 텍스트 부분을 설정 값을 넣어서 빈공간에도 클릭이 가능하게 한 것입니다.  

프리랜서 블로거로 수익을 얻을 수 있는 방법에 대하여 다양한 이야기를 풀어가 보려고 합니다. 

개인적을 블로그가 제 취미여서 남서울대학교 관련 제안 작업이나 업무 때문에 컴퓨터 앞에 있는 시간이 늘어나면서 포스팅 글감이 폭주를 합니다. 

---

천추의 보험 이야기 첫 번째 - 의료 실비보험에 정보

아이폰 5의 거치대 추천! 벨킨 iPhone 5용 충전 + 싱크 독[Belkin Charge+ Sync Dock]

프리랜서 블로거 수익형 블로그에 도전하다!

원노트 강좌 [2] 원노트로 기본 시스템의 이해

2013년 소니 HRA 발표 행사장 스케치

원노트 강좌 [1] 원노트 강좌에 프롤로그

실제 해상도와 업무 해상도 디스플레이 설정

윈도 8.1 리뷰 [3] windows 필수 패키지를 아십니까?

   

   

</div>

위 변수의 상단에 넣은 첫 번째 배너 였습니다.

<div style="clear: both; float: right;width:250px; height:208px; margin-left:10px;margin-top:0px; font-size:10px;">

<a href="http://www.meritzdirectmall.com/H002/chunchu" target="_blank">

<img src="http://cfs.tistory.com/custom/blog/86/868489/skin/images/ben_20131030.jpg" width="250"></a>

</div>

원하는 위치 매우 만족스럽게 세팅이 되었습니다.

   

   

배너의 위치에 대한 미세 조정도 마치고 나니 매우 흡족했습니다.

   

   

사설 배너의 문제점

   

너무 편하게 생각을 하고 배너를 만들었던 것 같습니다. 본문에 제일 처음 나오는 이미지가 배너의 이미지다 보니 검색 페이지에 보이는 제 블로그는 아래와 같이 됐습니다.

   

검색 결과는 역시 배너가 메인 이미지로 검색

   

검색 로봇이 본문의 첫 이미지를 배너로 가지고 간 것입니다.

   

아차 하면서 1단계 수정 작업에 들어 갔습니다. 위의 내용을 별도의 별도의 HTML 페이지로 만들고 블러오는 방법을 썼습니다.

   

배노 소스 2번 -  iframe 활용

<div style="clear: both; float: right;width:250px; height:220px; margin-left:10px;margin-top:10px; font-size:10px;">

   

<IFRAME src="http://cfs.tistory.com/custom/blog/86/868489/skin/images/ad.htm" name="chuncuh" width="250" height="218" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"> </IFRAME>

   

</div>

   

제가 봐도 멋진 아이디어 였습니다. 하지만 역시 네이버에서 검색결과는 좌절이었습니다.

검색 결과는 역시 배너가 메인 이미지로 검색

   

그래서 아이패드에서 보이지 않는 단점을 감수하고 플래시로 만들어서 사용하는 방법을 생각하고 플래시를 만드려고 보니 플래시 파일을 만들 수 있는 프로그램이 없었습니다. 개인적으로는 거의 3년이상 플래시를 쓰지 않다 보니 관련 프로그램이 없었던 것입니다.

   

그래서 약간의 삽질(?) 이후에 대안으로 생각을 한 것이 div에 배경으로 배너의 이미지를 넣고

   

배너 넣기 최종

   

<div style="clear: both; float: right; margin-left:10px;margin-top:20px; width:250px; height:208px; background-image:url(http://cfs.tistory.com/custom/blog/86/868489/skin/images/ben_20131030.jpg) ">

<a href="http://www.meritzdirectmall.com/H002/chunchu" style="display:block; width:300px; height:208px;" target="_blank">

<fon size="10px" color="#ffffff">[ad] 메리츠 다이렉트몰 </font><br/>

</a>

   

</div> 

Div에 배경으로 배너 이미지를 넣고 하이퍼 링크에 스타일을 넣어서 빈 배너(배경에 이미지가 있기 때문에 내용은 없는 것입니다) 영역을 클릭이 가능하게 하였습니다.

   

위에 백그라운드 이미지는 제 블로그에 파일 올리기로 올리고 이미지 주소를 확인 한 것입니다.

   

   

이미지 주소 얻는 법은 위 이미지를 보시면 이해가 빠르 실 것입니다.  

배너이미지를 배경으로 넣고 하이퍼 텍스트 부분을 설정 값을 넣어서 빈공간에도 클릭이 가능하게 한 것입니다.  

프리랜서 블로거로 수익을 얻을 수 있는 방법에 대하여 다양한 이야기를 풀어가 보려고 합니다. 

개인적을 블로그가 제 취미여서 남서울대학교 관련 제안 작업이나 업무 때문에 컴퓨터 앞에 있는 시간이 늘어나면서 포스팅 글감이 폭주를 합니다. 

---

천추의 보험 이야기 첫 번째 - 의료 실비보험에 정보

아이폰 5의 거치대 추천! 벨킨 iPhone 5용 충전 + 싱크 독[Belkin Charge+ Sync Dock]

프리랜서 블로거 수익형 블로그에 도전하다!

원노트 강좌 [2] 원노트로 기본 시스템의 이해

2013년 소니 HRA 발표 행사장 스케치

원노트 강좌 [1] 원노트 강좌에 프롤로그

실제 해상도와 업무 해상도 디스플레이 설정

윈도 8.1 리뷰 [3] windows 필수 패키지를 아십니까?