티스토리 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님의 블로그를 참고 하였습니다.

• 위즈군의 라이프로그 - CSS로 티스토리 추천버튼 정렬하기!
• MissFlash - 티스토리에서 믹시&블로거뉴스 추천 위젯, 카테고리 글 더보기 위치 설정하기!!!

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

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