티스토리 ViewOn, 믹시 추천 버튼 옆에 광고달기


제 블로그에 ViewOn 과 믹시 추천 버튼이 있는데 공간 활용이 비효율적인거 같아 ViewOn 과 믹시 추천 버튼 왼쪽에 구글 애드센스를 넣고 싶었습니다.

하지만 ViewOn과 믹시 추천 버튼은 티스토리 플러그인으로 넣은 것이기 때문에 소스를 수정할수 없어서 곤란했습니다. 하지만 검색의 힘...

한참을 검색을 해서 제가 원하는 곳을 찾았지만 HTML 이란게 100% 모든 환경에 다 맞는 것이 아니기 때문에 한참을 애 먹었습니다. 결국 해결을 하고 저와 같이 ViewOn 과 믹시 버튼 옆에 광고를 넣고 싶어 하는 분께 지식을 공유하려 합니다.


   애드센스, ViewOn, 믹시 위치 정하기
 

일단 구글 애드센스 코드를 넣어 보겠습니다. HTML 편집 코드에서 ##_article_rep_desc_## 코드를 찾아서 코드 아래에 div 코드 안에 구글 애드센스를 넣습니다. 그리고 애드센스 사이즈는 저 같은 경우 200X200으로 하였습니다.

<div class="GAD">
구글 애드센스 코드 삽입
</div>

그리고 CSS 편집 코드 맨 마지막에 아래의 코드를 넣습니다. IE 및 파폭 에서 정상적으로 보이는 코드 입니다.

div.blogger-news-widget {display:inline;float:right;clear:both;text-align:left;width:410px !important;overflow:hidden !important;margin-top:10px;}
div.mixup_widget {display:inline;float:right;clear:both;width:420px !important;margin-bottom:-5px;}
div.GAD {clear:none;width:200px !important;}
div.GAD tr {line-height:15px;height:15px;}
div.blogger-news-widget embed {float:left;}

위외 작업을 다 하시고 페이지를 보시면 아래 이미지와 같이 되어 있을것입니다.


여기서 주의 하실점은  ViewOn, 믹시 버튼 아래에 있는 플러그인은 다 해제를 해주시기 바랍니다. 그렇지 않으면 애드센스가 제대로 들어가지 않습니다. 만약 아래에 올블로그 광고나 카테고리 글더보기를 넣고 싶으시면 플러그인이 아닌 HTML 코드에서 직접적으로 넣어야 합니다.

올블로그 광고는 홈페이지에 올블릿 관리에서 쉽게 코드를 얻어서 원하는 자리에 넣으면 정상적으로 보여서 쉽게 해결했습니다.

하지만 카테고리 글더보기는 쉽게 되는게 아니더군요. 그럼 지금부터 카테고리 글더보기 원하는 위치에 넣기 코드를 알아 보도록 하겠습니다.


   카테고리 글더보기 원하는 위치에 넣기
 

아래 코드를 HTML 코드 편집에서 </title> 아래에 아래 코드를 넣으십시요.

<script type="text/javascript" language="javascript">
var MissFlash_Div_Num = 1;
</script>

<script type="text/javascript" language="javascript">
function getElementsByClass(MissFlash_Div_Num,searchClass,node,tag){
    // JavaScript function was developed by MissFlash (http://blog.missflash.com)
    var classElements = new Array();
    if(node == null) node = document;
    if(tag == null) tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    var j = 0;
    var MissFlash_Check = 1;
    var MissFlash_ID = "MF_Reference" + MissFlash_Div_Num;
    for(i=0; i<elsLen; i++){
        if(pattern.test(els[i].className)){
            classElements[j] = els[i];
            j++;
            if(els[i].id.indexOf("MF_Reference") == -1){
                var result = els[i].innerHTML;
                els[i].style.display = "none";
            }
        }
    }
    return result;
}
</script>

그리고 실질적으로 카테고리 글더보기 부분을 원하는 위치에 넣는 코드 입니다.
div id="MF_Reference" 부분이 실질적으로 카테고리 글더보기 부분이 표현될 코드 입니다.

<div id="MF_Reference" class="another_category another_category_color_gray"></div>
<script type="text/javascript">
//<![CDATA[
// Created by MissFlash(http://blog.missflash.com)
var MF_Reference = document.getElementById('MF_Reference');
MF_Reference.setAttribute("id", "MF_Reference" + MissFlash_Div_Num);
MF_Reference.className = "another_category another_category_color_gray";
var ref_source = getElementsByClass(MissFlash_Div_Num,"another_category");
MF_Reference.innerHTML = ref_source;
MissFlash_Div_Num += 1;
//]]>
</script>

여기서 주의 하실점은 티스토리 플러그인에서 카테고리 글더보기를 설정하신 다음에 위 코드를 넣어야
카테고리 글더보기가 보입니다.

이상과 같이 코드를 다 넣으셨으면 제 블로그 하단 부분과 같이 플러그인들이 정리가 됩니다. 이 코드를 정리는 위즈님과 MissFlash님의 블로그를 참고 하였습니다.


제가 사용한 디자인 말고 더 다양한 모양과 디자인을 내기 위한 코드는 위 사이트를 참조 하시면 많은 정보를 얻으실수 있을것입니다.

아울러 이런 좋은 자료를 알려주신
위즈님과 MissFlash님께 감사드립니다.



  1. 하루종일 고생하다가 겨우 어설프게 된거같아요.
    감사합니다.^^;
  2. 궁금한게 있습니다. 따라 하다가 한번에 맨 위에 다음뷰와 믹시에 따른 문제는 간단히 해결이 되었습니다. 그런데 카테고리 글 더 보기 란에서의 아래 마지막 소스는 어디에 다가 대입을 해야 하는지 모르겠네요. ㅠㅠ
    • 2009.12.17 12:42 신고 [Edit/Del]
      제 본문에 있는 카테고리 표현 소스 통째로 복사 하셔서 위치 하고 싶은 사이에 붙여넣기 하시면 됩니다.
      저 같은 경우는 올블로그와 아이태그 이미지 사이에 소스를 넣었습니다.
  3. 질문좀 드릴께요~글쓴이님처럼 광고랑 믹시랑 다음뷰랑 같이 올리고 밑에 올블로그도 님처럼 올리고 싶은데요
    <올블로그 광고는 홈페이지에 올블릿 관리에서 쉽게 코드를 얻어서 원하는 자리에 넣으면 정상적으로 보여서 쉽게 해결했습니다> 하셨는데요~정확하게 어디다 코드를 넣는지 몰라서요~가르쳐주시면 안될까용?
    • 2010.02.17 15:35 신고 [Edit/Del]
      저처럼 글카테고리 위에 자리를 잡으시려면 코드 수정 부분에 _article_rep_desc_ 부분 아래 원하는 순서대로 차례로 넣으시면 됩니다.
  4. 감사합니다^^ 예쁘게 잘 했어요^^친절한 설명 쵝오에요^^
  5. 안녕하세요 BAN님~ 올려주신 소스 너무 잘 보았어요..
    그런데 제 블로그에 적용시키니 오류가 조금 생기네요~
    저는 왼쪽으로 다음뷰와 믹시를 정렬하고 오른쪽에 배너를 넣으려고 하거든요..
    괜찮으시다면 소스를 좀 알려주심 감사하겠어요 ㅠ.ㅠ..
    애드센스가 들어가는 부분은 배너로 대체를 하여서 div 소스를 넣었어요.
    css에 정렬하는 부분이 좀 어긋난거 같애요..
    부탁드립니당. (__);;
  6. 안녕하세요.
    저두 따라 해볼려고 하니까, 잘 안되네요..
    저두 왼쪽에 광고, 오른쪽에 다음뷰 추천(위) / 믹시(아래)
    이렇게 하려고 하는데, 잘 안되네요..
    위에 가르쳐 주신대로 해보니까...추천 버튼은 오른쪽에 잘 정렬이 되었는데,
    추천버튼 왼쪽은 광고가 안들어가고 비어있구요.
    그 광고는 밑에 '카테고리 다른글' 밑에 광고가 붙어요...어떻게 해야 하나요?
    제가 하고 싶은게요..

    이미지 광고 - 다음뷰(믹시) 추천버튼

    -----------------------------

    카테고리다른글 - 이미지광고

    -----------------------------
    이렇게 만들고 싶은데요..
    • 2010.03.15 16:01 신고 [Edit/Del]
      음... 광고가 내려와 있네요. 저도 HTML 전문가가 아니라 그냥 봐서는 원인 파악을 잘 하지 못합니다. 소스를 함 봐야 할거 같은데...
  7. 아아....젠장 뭔 소리인이 하나도 이해 못하겠어요 ㅠ.ㅠ
  8. 흑흑..제꺼두 봐주시면 안될까여?
    저두 광고가 내려와 있어여..
    • 2010.04.01 09:00 신고 [Edit/Del]
      지금은 제가 일이 있어 봐드리긴 힘들거 같고 아래 사이트 댓글에 보시면 님과 같은 문제를 호소하다 해결한 분이 해결책을 내놓고 있으니 한번 해보시기 바랍니다.

      http://wiz.pe.kr/544

      해결해 드릴수 없는점 정말 죄송하게 생각합니다.
  9. 흠....알수록 어렵네여 많은 도움되었습니다. 감사합니다.
  10. 블로그 하단 정리하는데 계속 예쁘게 정렬되지 않았는데
    이글 보고 해결했어요 ㅠㅠ ㅋㅋ
    카테고리 다른 글 보기 옵션을 끄니까 간단하게 해결 되는 군요..
    컴맹이라 여기까지 오는데도 머리가 뽀개지는 듯 해서
    일단 여기까지 해놓고 나중에 카테고리 글 보이는 코드도 따라해봐야겠어요 ㅋㅋㅋ
    진짜 도움 많이 되었어요. 감사합니다 ㅠㅠ ㅋ
  11. 전에 카테고리 글 보이는 코드는 자꾸 실패해서 결국 못했다가 이제 겨우 이해해서 성공했어요; ㅎ
    카테고리 글 더보기를 위치 지정하는 코드란 말이 무슨말인지 조차 이해 못해서(워낙 컴맹이에요ㅠ ㅋ)
    덧글 중 _article_rep_desc_ 아래 넣으라는 말만 보고 무조건 거기 넣는거구나 싶어서 했더니 자꾸만
    광고가 내려가더라구요.. ㅋㅋㅋ
    알고보니 말 그대로 원하는 위치에 그 코드를 집어넣으면 되는 거였네요^^;;

    제 경우에는 다음뷰 추천버튼과 믹시버튼은 플러그인 설정으로 자동으로 들어가는거라
    html편집창에서는 두 버튼의 코드위치가 어딘지 알 길이 없어서 여기저기 시도해보다가 결국
    추천버튼들 옆에 있는 구글 좌측 하단 광고 코드가 끝나는 바로 아래 이어붙였더니
    구글 광고만 혼자 아래로 밀리는 현상이 사라졌어요. ㅋㅋ
    덧글 보니까 광고만 밀리는 현상 겪는 분들 저 말고도 계신것 같아서 혹시나 도움될까 싶어 덧글 남기고 가요 ㅋ
  12. 제가 따라해보니 다음뷰는 오른쪽에 딱 붙는데 믹시는 그대로 한가운데 있어서 광고가 들어가지 않는데요. 뭐가 문제일까요?

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기