블로그 마케팅 강좌 - 프롤로그..

강좌의 대상 층은 "전업 블로거"의 수입을 조금 늘릴 수 있는 방법을 제시하고, 마케팅 비의 부담을 느끼는 소기업이나 소상 점을 위한 내용을 중심..

블로그 1:1 멘토링 교육 안내..

블로그가 요동을 치고 있는 상황입니다. 덕분에 저도 블로그 교육을 다시 시작을 하려고 합니다. 교육 방식은 1:1교육으로 메토링을 진행 하려고 ...

IT 제품 등에 대한 리뷰를하고...

브랜드 블로그와 블로그 마케팅을 블로그를 전문적으로 운영해드리고 있습니다.
TEL.010-2776-9081 / chunchu99@gmail.com

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

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

   

수익형 블로그의 운영을 위하여 티스토리 블로그에 구글 배너와 같은 배너를 만들어 보려고 했습니다. 블로그에서 수익을 얻기 위한 블로그 수익형 블로그 운영은 제 블로그에서 시작을 하여도 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">

   

[##_article_rep_desc_##]

   

</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 필수 패키지를 아십니까?


   

홍보배너링크

댓글을 달아 주세요

  1.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://toyvillage.tistory.com BlogIcon 라이너스™

    또 이렇게 하나 배웁니다^^

  2.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://hansik07.tistory.com BlogIcon Hansik's Drink

    덕분에 많이 배워 갑니다 ^^
    알찬 오늘이 되세요~~

  3.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://rainbowheart.tistory.com BlogIcon 괴도별성

    컴퓨터를 잘하셔서 좋겠어요. HTML은 언제봐도 어렵고 빙글빙글 돌아요. ㅎㅎ 그래도 잘보고 갑니다. ^^

  4.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://bizrus.tistory.com BlogIcon 자유혼.

    배너만들기 유용하게 잘 활용할 수 있을것 같아요.
    덕분에 좋은 내용 알아가네요~^^

  5.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://sensechef.com BlogIcon SenseChef

    구글 애드센스만 달고 있는데 저도 추가 수익 모델을 찾아봐야겠네요. 검색 로봇에 의한 데이터 수집과 충돌이 있을 수 있다는 걸 처음 알았네요 ^^ 잘 보고 갑니다. 감사합니다.

  6.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://maker.so BlogIcon sky@maker.so

    언젠가는 저도 기본 페이지를 뜯어 고칠 날이 오겠지요. ㅎㅎㅎ 강좌 잘 보았습니다.

  7.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://1109rna.tistory.com BlogIcon 킴00C

    http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=10605&docId=209845301
    이곳에다가 저의 티스토리 블로그의 Skin.htm에있는 걸 캡쳐해서 하나의 이미지로 올려놓았는데요
    일단 그거에 나온곳에서요
    3. 본문 삽입 - 블로그 변수 위에 코드를 집어넣고 마무리
    아래에있는거랑
    위 변수의 상단에 넣은 첫 번째 배너 였습니다.
    아래에있는건
    각각어디뒤에다가 두어야되죠?!
    구글 애드센스 배너광고를 본문맨위에 나오게하려고하거든요
    그런데 처음이라서 하는방법을몰라서 그러거든요
    그래서그런데 꼭좀 어디에다가 뭘어찌삽입하고
    그다음에 애드센스에서만든배너는 어디에다가 삽입하면되는지좀 자세하면서 알아듣기슆게 저가 링크해놓은곳에다가 답변해주시면대단히 감사하겠습니다

    •  댓글주소  수정/삭제 Favicon of http://chunchu.tistory.com BlogIcon 천추


      앞이나 뒤에 넣으면 됩니다..

      <div align="left">광고 </div>
      ##_article_rep_desc_##
      광고가 왼쪽으로 붙어서 옵니다.

      변수 는 []않에 넣으세요.. 댓글에 [] 넣으니 변수가 사라져 버리네요!!

  8.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://blogramer.tistory.com BlogIcon ***********

    배너 사이즈는 어느정도까지 가능한가요? 어느정도가 적당한가요?
    제가 소스는 잘몰라서.. 위에가 이미지 사이즈부분 같은데 아래에 있는 사이즈는 어떤건가요? 그리고 배너를 중앙에 뜨게 하려면 어떻게해야하나요?

  9.  댓글주소  수정/삭제  댓글쓰기 Favicon of http://chunchu.tistory.com BlogIcon 천추

    저는 배너는 폭의 40% 정도가 정당합니다.