View 애드박스 서비스는 어쩌면 계륵과도 같은 존재일지 모릅니다.


수익은 상위 블로거들에게 집중되어 있는데

가장 광고 효과가 높은 본문 상단 오른쪽에 딱 차지하고 있으니 말이죠


옮기고 싶어도 HTML/CSS에 익숙하지 않은 블로거분들은

원래 위치대로 사용하고 계시거나 비활성화 하신 분들도 많으실텐데요


그동안 저도 귀차니즘으로 놔두고 있다가 사이드바로 옮기는 작업을 감행했습니다.

이쁘게 잘 옮겨져서 방법을 소개드려볼까 합니다.


▼ 사이드바로 옮긴 View 애드박스




View 애드박스 활성화


View 애드박스 위치때문에 비활성화 해놓으셨다면 우선 플러그인 설정에서

View 애드박스를 다시 활성화 합니다.





사이드바에 해당 블로그 View 애드박스 추가하기


활성화 하면 View 애드박스가 본문 상단 오른쪽에 떡하니 위치하게 되는데

본문에서 없애기 전에 사이드바로 이동을 시켜줍니다.


본문에서 소스보기를 해서 아래와 같은 소스를 찾으시면 됩니다.

ad250으로 검색하시면 금방 찾으실 수 있습니다.



해당 소스를 복사해서


사이드바 -> HTML배너출력 으로 하나 추가한다음 소스를 추가하고

이름은 간단하게 View 애드박스로 해서 사이드바에 추가합니다.

좌우 여백이 일정하도록 <center></center>로 싸줍니다.


<center>

<div class="ad250" style="background: transparent url(http://i1.daumcdn.net/img-media/media3/common/ad250_bar_r2.gif) no-repeat scroll 0 0; width: 250px; height: 250px; padding: 18px 0 0; position: relative; width: 250px">
            <iframe width="250" height="250" border="0" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://amsv2.daum.net/ad/adview?secid=00659&mkvid=1&blogid=465466"></iframe>        </div>
</center>


지금까지 하시면 View 애드박스가 본문에 하나 있고 사이드 바에 하나 있게됩니다.

이제 본문의 애드박스를 없애보겠습니다.


본문 View 애드박스 없애기


없애는 방법은 생각보다 간단한데

티스토리 관리 -> 꾸미기 -> HTML/CSS편집에서 Style.css 에서 다음과 같은 소스를 찾습니다.


.ad250_outter {margin: 6px 18px 6px 9px !important;}


해당 DIV를 안보이게 하기위해서 아래처럼 display:none 스타일을 추가해줍니다.


.ad250_outter {display:none; margin: 6px 18px 6px 9px}


혹시 모르니 원래 소스는 주석처리 하는게 좋겠지요?

그래서 저는 아래와 같이 수정해놨습니다.


/*.ad250_outter {margin: 6px 18px 6px 9px !important;}*/
.ad250_outter {display:none; margin: 6px 18px 6px 9px}


이렇게 수정하시고 적용하시면 본문의 View 애드박스가 사라지고

사이드바에만 활성화되어 보이게 됩니다.


생각보다 간단하지요?

응용하시면 원하시는 위치로 View 애드박스 위치를 변경하실 수 있을 것 같네요


비록 지금까지 최대 수익금이 만원인 애드박스지만

다시 한번 활성화해서 언젠가는 상위권 랭크를 기대해 봅니다. ^^


이상 티스토리 View 애드박스 사이드바로 옮기는 방법이었습니다.




  1. Favicon of http://www.ablee.kr Ablee 2012.08.19 14:33 신고

    잘보고 갑니다 유용하게 사용하였습니다^^

  2. Favicon of http://freefisher.tistory.com 대물잡어 2012.08.20 09:00 신고

    아~ 이런 방법이 있었네요.. 좋은 정보 감사합니다.
    그런데 요즘은 저 애드박스에 맞춰서 글을 쓰게 되더라구요,.^^
    나중에 한번 옮겨보긴 해야겠네요.

    • Favicon of http://kkwaks.net kkwaks 2012.08.20 10:47 신고

      저도 처음에는 맞춰서 썼는데 애드박스 맞춰서 글을 써야하는게 은근히 신경쓰이더라구요
      그래서 한동안 비활성화 하고 있다가 이번에 옮겨서 적용해 봤습니다. ^^

  3. Favicon of http://applepieblog.tistory,com 사과 2012.08.21 16:28 신고

    저는 style.css에서 ad250이 안보여요

    • Favicon of http://kkwaks.net kkwaks 2012.08.22 11:15 신고

      안보이시면 해당 클래스 속성을 추가하시면 될거 같습니다.

  4. Favicon of http://flashdota.oa.to KBS 2012.08.23 16:19 신고

    클래스 속성은 어떻게 어디에 추가하나요?

    • Favicon of http://kkwaks.net kkwaks 2012.08.23 19:30 신고

      본문 참고하셔서 없는 속성은 style.css 에 추가하시면 됩니다.

    • Favicon of http://flashdota.oa.to KBS 2012.08.23 20:53 신고

      ㅎㅎ 해결됬네요 감사합니다!

  5. Favicon of http://comterman.tistory.com 컴터맨 2012.09.01 12:48 신고

    올려주신 포스팅이 큰 도움 되었습니다. 감사합니다^^

  6. Favicon of http://sset.tistory.com/ 해질녁 2012.09.08 13:04 신고

    정말 유용한 정보입니다.

    감사합니다.

    저도 다시 활성화 해야 겠습니다.

    감사합니다.

    • Favicon of http://kkwaks.net kkwaks 2012.09.08 17:07 신고

      2주정도 지켜보고 저는 View 애드박스 위치를 본문 하단으로 바꿨습니다.
      아무래도 명당자리에는 구글 광고가 있는게 효과적인 거 같아서요

      응용하셔서 좋은 위치로 옮기시면 좋겠습니다.

  7. Favicon of http://abcdudgks.tistory.com 김영한 2012.09.12 11:10 신고

    이상하네여....
    저도 윗님 처럼 style.css에 ad250 없어서

    하단에 통째로 만들어서 넣었거든요 이거 맞나요???

    /* 뷰 애드박스 */
    /*.ad250_outter {margin: 6px 18px 6px 9px !important;}*/
    .ad250_outter {display:none; margin: 6px 18px 6px 9px}

    근데 이렇게 하면 사이드바 애드박스하고 본문에 있는 애드박스 둘다 사라지더라구요...

    그래서 사이드바에 있는 애드박스 소스를 밑에 보시는거와 같이 제일 위에 ad250 outter 를

    ad250 outtter (t하나 더붙여서) 했는데 본문꺼는 사라지고
    사이드바는 안사라지고 떠있네요... 다행히 이래도 되는건가요??

    다행히 뜨긴 뜨는데 찝찝해서... 초보라..ㅠㅠ


    <center>
    <div class="ad250_outtter" style="float: right; margin: 0 0 20px 10px; position: relative; width: 250px;">
    <div class="ad250" style="background: transparent url(http://i1.daumcdn.net/img-media/media3/common/ad250_bar_r2.gif) no-repeat scroll 0 0; width: 250px; height: 250px; padding: 18px 0 0; position: relative; width: 250px">
    <iframe width="250" height="250" border="0" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://amsv2.daum.net/ad/adview?secid=00659&mkvid=1&blogid=1136221"></iframe> </div>
    </div>
    </center>

    • Favicon of http://kkwaks.net kkwaks 2012.09.12 13:19 신고

      아!!

      실제 보여주는 코드에서는 class = ad250_outter 인 div 태그 통째로 빼시면 됩니다. 빼실때 대응되는 </div> 도 같이 빼주시는 거 잊지마시구요

      실제로 class = ad250 인 div 태그만 있으면 되거든요

      성공하시길 ^^

    • Favicon of http://abcdudgks.tistory.com 김영한 2012.09.12 15:00 신고

      아 그렇군요 ㅎㅎ
      수정했습니당 감사합니다~

  8. Favicon of http://chaosland.tistory.com chaosland 2013.01.11 02:04 신고

    지금은 html배너출력없는걸로아는데어떻게하나요?

    • Favicon of http://kkwaks.net kkwaks 2013.01.11 14:37 신고

      저도 아직 쓰고 있고 말씀하셔서 확인해보니 사용 가능하던데요?

    • Favicon of http://chaosland.tistory.com ChaosLand 2013.01.11 16:37 신고

      어떻게 하는지 자세히 좀 알려주실수있으신가요? 저는 못찾겠어서

    • Favicon of http://kkwaks.net kkwaks 2013.01.14 18:43 신고

      티스토리 관리자 화면에서 왼쪽 사이드바에
      꾸미기라는 메뉴 아래 사이드바 메뉴가 있습니다.

      거기 들어가시면 기본모듈중에 HTML 배너 출력 옆에 + 버튼으로 추가하셔서 사용하실 수 있습니다.

      성공하시길 ^^

  9. Favicon of http://minorang.tistory.com 미노랑 2013.01.18 12:11 신고

    본문글하고 댓글 참고해서 저도 옮겼습니다^^ 올블릿하고 겹쳐서 깔끔하지가 않았는데
    이제 보기 좋네요^^ 고맙습니다~!

    • Favicon of http://kkwaks.net kkwaks 2013.01.18 13:06 신고

      네 옵션으로 사이드바에 적용하게 해주면 좋을텐데
      가장 광고 효과 좋은 위치를 못 바꾸게 하는 건 좀 그렇죠?

      도움이 되셨다니 좋네요 ^^

  10. 2013.01.19 14:41

    비밀댓글입니다

    • Favicon of http://kkwaks.net kkwaks 2013.01.21 00:19 신고

      옮기고 나서도 애드박스 순위가 나오는 걸로 봐선 제대로 동작하는 것 같은데
      아직 여러가지 이유로 옮기고 나서 지원금을 받은 적이 없어서 뭐라 말씀드리긴 어렵네요

      아무래도 옮기고 나서 지원금을 받는다면 제일 정확할텐데 한 번 노력해 보겠습니다. ^^

티스토리 글쓰기 에디터가 2012/3/27일자로 업데이트 되었다는 공지가 떴네요.

다음 에디터를 기반으로 통합된 것 같습니다.



이번 글쓰기 에디터 변경 사항 중에서 가장 맘에 드는 점 몇가지를 소개해 볼까 합니다.


빠른 속도와 안정성


잠깐 써보면서 느낀거지만

한결 가벼워진 느낌에다가 저장시에도 빠른 속도와 한층 안정적인 동작을 하더군요

아무래도 오래된 에디터를 최신 다음 에디터로 변경해서 그런 것 같습니다.


글쓰기 화면을 넓게 사용할수 있는 화면 구성


글 공개 여부, 파일보관함, 태그 등을 설정하는 화면이 오른쪽 메뉴로 통합되어서

글쓰기 창을 더 넓게 사용할 수 있습니다.

게다가 상단 도구들과 제목란도 줄여져서 더욱 글쓰기 화면을 넓게 사용할 수 있어서 좋습니다.


대표 이미지 설정 기능 추가


티스토리에 글을 올리면서 가장 불편했던 점이 이번에 수정되었네요

글을 순서대로 올려도 맨 처음 올린 이미지가 대표이미지가 되지 않고 뒤죽박죽 되었었는데

이제 대표이미지를 선택할 수 있게 되었습니다.

글 하나만 올렸을때는 자동으로 대표이미지로 선택됩니다.


이미지 서명 일괄 적용 기능 추가


기존에 이미지에 서명을 넣기 위해서는 일일이 이미지에 작업을 해야 했는데

바뀐 이미지 등록인 다음 이미지 업로더에서는 서명 기능을 이용해서

이미지 전체에 서명을 등록할 수 있게 되어 있습니다.

내 서명으로 저장해서 반복해서 사용할 수도 있지만 현재 사용중인 컴퓨터에만 저장이 된다니

이 부분은 서버에 저장이 되도록 개선이 되었으면 좋겠네요



이상 새로 변경된 티스토리 글쓰기 에디터 변경 기능 중 가장 맘에 드는 기능들을 뽑아봤는데요

전체적으로 개선된 성능과 편의성으로 과거 에디터로 돌아가지는 않을 것 같네요


새로운 에디터로 작성된 글은 과거 에디터로 수정이 불가하다니 참고하시기 바랍니다.


기타 변경된 전체 내용은 아래 링크를 참조하기기 바랍니다.

티스토리 글쓰기 에디터 변경 공지 바로가기



오늘 애드센스 알림 메일에 그동안 서비스하던
모바일 콘텐츠 광고를 온라인 콘텐츠로 통합해서 제공한다고 하는군요

그동안 애드센스 관리자 페이지에 공지가 되던 내용인데
실제로 시스템에 반영이 되었습니다.

저도 모바일 콘텐츠를 적용하고 있었는데 변경을 해야할 것 같습니다.


애드센스 새 광고 만들기로 들어가보면

아래와 같이 모바일 배너라는 광고 단위가 새로 추가 되었습니다.


몽상팬더는 300X250 짜리를 사용했었는데

같은 사이즈들은 기존 온라인 광고로 통합되고 모바일 용은 320x50 으로 단일화 한 것 같습니다.



모바일 콘텐츠 광고를 게재하시는 분들은 내용 참고하시고 4월말까지는 전환하셔야 할 것 같습니다.

다만 적용해 보니 온라인 콘텐츠 3개 개수 제한에 포함되니 참고하시기 바랍니다.

이상 애드센스 모바일 콘텐츠 전환에 대해서 알려드립니다.



  1. Favicon of http://http://hanjabbu.tistory.com/4064 한갑부 2012.02.26 18:25 신고

    http://hanjabbu.tistory.com/4064
    지금 열심으로 수정하고 있지요.

이번에 애드센스를 이것저것 테스트 해보면서 확인 한 것중에 하나가 바로

권장 크기를 달아야 한다 는 점이었습니다.

권장 크기를 달아야 하는 점 중에 애드센스 도움말에 나오는 설명에는
크기가 크기 때문에 노출이 잘되어서 광고 효과가 크다는 점인데

< 아래 애드센스 도움말 참고 >


그런데 몽상팬더가 생각하는 가장 큰 이유는 다름 아니라
권장 크기를 선택해야 광고가 다양하다 는 점이 아닐까 합니다.

광고주들도 어떤 크기가 광고가 잘 된다는 통계를 통해 광고비를 지불할 것이고
이왕이면 광고 효과가 높은 광고를 하고자 한다면
결국 권장 크기로 애드센스를 달아야 더 많은 광고들로 인한
더 큰 광고 효과가 나오지 않을까 하는 생각을 해봅니다.


실제로 광고 크기를 모두 권장크기로 바꾸고 나서 보니
광고의 종류나 내용들도 달라지고 특히나 광고의 개수 자체가 많은 것 같더군요

이왕 광고를 게재할 것이라면 효과가 좋은 광고를 다는 편이 낫지 않을까요?

이상 애드센스에서 권장 크기를 사용해야 하는 이유에 대해 생각해봤습니다.



이번에 애드센스 광고를 새로 적용하면서 콘텐츠 광고의 갯수 제한이
3개라는 사실을 알게되었는데요


그런데 이상한 사실은 계정을 옮기기전에는
타이틀 상단에 1개
사이드 바에 2개
그리고 본문 상단과 하단에 링크 광고 2개
총 5개의 애드센스가 적용되어 있었는데요
새로 등록하고 적용해보니 4번째 광고부터는 적용이 안되는겁니다.

도움말을 찾아보니 콘텐츠 광고의 경우 페이지당 3개가 제한이더군요

그런데 한가지 더 변경된 건 모바일 광고까지 합쳐진 것 같습니다.

본문에 3개를 적용하고 모바일 광고를 추가했는데 안나오더니
본문에 광고하나를 빼고나니 모바일 광고가 보이더군요

그러고 보니 애드센스 변경사항 중에
휴대기기용 광고 단위를 지원하지 않는다고 뜨더니
아마도 모바일 콘텐츠도 페이지별 광고 3개에 포함되는 것 같습니다.

참고로 링크단위 광고는 페이지당 2개까지 되는 것 같습니다.


그래서 이번에 애드센스 적용을
PC 브라우저 접속시 2개를 적용하고
모바일 브라우저 용으로 1개를 적용하게 바꾸었습니다.

가장 효과가 높다는 본문 상단 2개 배치로 깔끔하게 정리했구요
336X280 2개를 사용하였습니다.


모바일 광고의 경우에는
300x250 의 광고로 적용하였습니다.

예전에는 320x50 짜리를 적용했었는데
따로 처리를 해주지 않으면 짤리기 때문에
가장 보기 좋은 가로 300 사이즈로 변경했습니다.

티스토리에 모바일 광고를 적용하기 위해서는
본문에 직접 삽입을 해야하기 때문에 서식으로 하나 등록하여 사용하시는게 편합니다.



페이지 당 달 수 있는 광고 3개를
본문 상단 2개
모바일 페이지 상단 1개
로 적용해봤는데요

어떻게 수익이 변화하는지 지켜봐야 겠습니다.

그나저나 새로 변경한 모바일 광고를 기존 포스팅에 적용하려면
시간 꽤나 걸리겠네요



  1. Favicon of http://comterman.tistory.com 컴터맨 2012.05.26 10:15 신고

    거의 방치수준이었던 블로그에 좀더 신경써볼 요량으로 이것저것 건드리고 있습니다.
    상단 2개 배치와 상단 1개에 본문을 섞는 방식 중 어떤게 나을까...고민 중입니다(...만 물론 트래픽이 뒷받침되지 않는 상황인점을 간과하고 있었네요ㅎㅎ)
    좋은 글 잘 봤습니다^^

    • Favicon of http://kkwaks.net kkwaks 2012.05.28 13:58 신고

      여러가지 시도해 본 결과 상단 2개와 하단 1개가 최적인 것 같습니다.

      상단에 본문 포함해서 하시는 경우에는 광고가 오른쪽으로 가도록만 세팅하시면 됩니다. 대부분의 클릭은 오른쪽 광고에서 발생하니까요 ^^

      모바일에서는 티스토리 특성상 본문에 포함된 광고만 보이기 때문에 하단은 웹에서보다는 모바일 접근시 보이는 용도가 더 크다고 보시면 됩니다.

      특히나 사이드바는 여러번 시도해 봤으나 본문만큼 큰 효과는 없으니 참고하시구요 ^^

    • Favicon of http://comterman.tistory.com 컴터맨 2012.05.30 11:21 신고

      본문 포함 광고를 시도해보려 했지만, 그간 써왔던 포스팅의 글 상자와 겹쳐서 표시되는 바람에 상단 2개를 그냥 유지하기로 했습니다.

      친절한 조언 감사드립니다. 앞으로도 자주 찾아뵙겠습니다^^

    • Favicon of http://kkwaks.net kkwaks 2012.05.30 17:50 신고

      네 상단 2개가 스킨에 포함하고나면 신경 안 써도 되니 편한것 같습니다.

      본문 하단 광고는 서식으로 저장해서 필요한 곳에 넣으시면 좀 더 편하구요

+ Recent posts