티스토리 카테고리 글 더보기 위치변경하기

티스토리 카테고리 글 더보기 위치변경하기

티스토리를 꾸밀때 본문하단에 다음뷰와 믹시 버튼을 많이 사용하게 됩니다. 다만, 이 공간을 조금 더 효과적으로 활용하기 위해 통합박스를 구성하여 좌측으로 본인 PR이나 광고를 넣는 분들이 많은데 여기서 문제점이 다음뷰랑 믹시를 게시글 하단에 통합할때 플러그인으로 설정한 '카테고리 글 더보기'의 위치가 광고 상단으로 가게 된다는 것 입니다. 그래서 오늘은 다음뷰,믹시 추천버튼과 광고영역 통합 하단으로 '카테고리 글 더보기'를 위치시키는 법을 배워볼까 합니다.

다음뷰와 믹시를 통합할경우 검색어 상단으로 자동으로 노출되도록 하는 플러그인으로 설정되는게 아니라 HTML에서 직접 세팅되어야하는 까닭에 아래 설명처럼 카테고리 다른글 박스가 애드센스,다음뷰 박스 위로 노출되게 됩니다. 이를 해결하는 방법은 2가지 명령문만 HTML에 삽입시켜주면됩니다. 

 

아시는 것처럼 카테고리 글 더보기는 플러그인 설정 > 꾸미기에서 직접 지정이 가능합니다. 이 기능은 원하는 개수와 색상으로 설정을 유지시켜 주시기 바랍니다. (단, 색상은 오늘 사용할 스크립트에서 직접 지정하게 됩니다.)

오늘 소개해드릴 소스는 MISSFLASH 님이 공개한 소스를 활용하였습니다. 

(MissFlash님 블로그 바로가기)

먼저, 카테고리 글 더보기 위치 변경 명령어 입니다.  skin.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>

<!-- 카테고리 다른 글 위치 변경(명령) 끝 -->

두번째로, 해당 기능이 위치하게될 실제 명령문입니다. skin.html에서 원하는 위치에 넣어주세요. 

본인은 다음뷰,믹시 통합 추천 테이블 아래로 명령문을 노출시켰습니다.  

추가로, 카테고리 글 더보기 색상은 아래 음영표시한 gray 를 원하는 색상으로 변경하면 됩니다. 

<!-- 카테고리 다른 글 위치 변경(위치) 시작 -->

<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>

<!-- 카테고리 다른 글 위치 변경(위치) 종료-->

어렵지 않게 적용하셨나요? 카테고리 글 더보기 기능은 티스토리 블로그에서 없어서는 안될 기능인 만큼, 다음뷰와 믹시를 통합하였거나, 통합을 계획할 예정이라면 반드시 숙지하셔서 더욱 효율적인 블로그를 꾸미시기 바랍니다.