티스토리 카테고리 글 더 보기 위치 수정 팁

오늘 알려드릴 이야기는 "티스토리 블로그의 <카테고리 글 더 보기> 위치 수정"에 관한 팁입니다. 많은 사람들이 티스토리에서 기본 제공하는 플러그인 중에 하나인 "카테고리 글 더 보기"를 사용하고 있습니다.

사용하는 이유 중에 가장 큰 요인은 자신의 블로그 글과 관련있는 다른 글을 손쉽게 볼 수 있다는 점이 크다고 할 수 있습니다. 많은 블로거들이 사용하고 있는 "카테고리 글 더 보기", 왜 위치 수정을 해야할까요?

사실 포스팅 하단에 있는 "카테고리 글 더 보기"는 수정하지 않아도 되는데 구지 수정하는 이유는 애스센스와 관련이 있습니다. 뭐 다른 여러가지 이유도 있을 수 있지만 저 같은 경우에는 본문 하단에 애드센스를 넣었는데 그냥 두면 글 - 카테코리 글 더 보기 - 애스센스의 순으로 출력이 됩니다.

티스토리에서 제공하는 카테고리 글 더 보기 플러그인

저는 글 - 애드센스 - 카테고리 글 더 보기의 순으로 보이기를 원했기 때문에 바꾸었습니다. 애드센스 수익과 얼마나 차이가 날지는 잘 모르겠지만 글이 끝나는 시점에 애드센스가 있는게 좋을 것 같고 보이에도 더 깔끔한 것 같습니다.

그럼 어떻게 해야 순서를 바꿀 수 있는지 알아보도록 하겠습니다.

우선 아래 코드를 복사합니다.

카테고리 글 더보기 위치 수정 코드.txt

수정하기 쉽게 하기 위해 TXT 파일로 코드를 첨부했습니다. ▲

<!-- 카테고리 글 더보기_1 -->

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

<!-- 카테고리 글 더보기_1 -->

복사를 한 뒤 블로그 관리 - 꾸미기 - HTML/CSS 편집을 클릭합니다.

그리고 나서 "HTML"에서 </HEAD> 를 찾아서 그 위에 아까 복사한 코드를 붙여 넣습니다. 

¶ TIP - </HEAD>는 키보드의 Ctrl+F 를 눌러서 찾으면 쉽습니다.

에 해당하는 코드를 삽입한 모습

그 뒤에 해야할 일은

"카테코리 글 더 보기" 위치를 정해주는 것입니다. 자신이 원하는 위치에 코드를 넣으면 되는데요, 아래 코드를 복사합니다.

<!-- 카테고리 글 더보기_2 -->

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

<!-- 카테고리 글 더보기_2 -->

위 코드를 복사 한 뒤에 전 본문 하단에 카테고리를 넣을 예정이므로 "article_rep_desc"을 찾아서 검색해봅니다.

손쉽게 찾는 방법은 위에 Tip으로 적어놨습니다.

저는 본문 하단에 "카테고리 글 더 보기"를 위치할 예정이고 그 위에 애드센스를 넣고 싶었습니다. 그래서 두 번째로 삽입한 코드 위에 보시면 애드센스 코드가 위치하고 있습니다.

그럼 제 실제 블로그에서 어떻게 적용이 되고 있는지 살펴볼까요?

포스팅 하단에 애드센스 - 카테고리 글 더 보기 순으로 출력

제가 의도한 대로 포스팅 하단에 글 - 애드센스 - 카테고리 글 더 보기 순으로 출력이 되고 있습니다.

또 다른 팁들도 천천히 포스팅하도록 하겠습니다. :-)