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

2013.12.06 11:21
저자 : Kurien

카테고리 글 더 보기 위치가 맘에 안드시죠?

카테고리 글 더 보기, 카테고리의 다른 글


티스토리의 기본 플러그인에는 카테고리 글 더 보기란 플러그인이 있습니다.

목록 개수와 색상 부분을 설정 하는걸로 글 제일 아래쪽에 카테고리의 다른 글이 나오게 됩니다.

방문자에게 다른 글도 볼 수 있게 유도 할 수 있어서 참 좋은 플러그인이긴 한데, 기본적인 위치가 상당히 좋지 않습니다.


카테고리 글 더 보기, 카테고리의 다른 글


이렇게 글 바로 아래 위치하게 되어 광고나 추천 버튼이 밑으로 가버리는 부분이죠,

방문자가 추천을 누르거나 광고를 보고 다른 글을 보는게 블로거 입장에선 좋은데 말이죠.


그래서 카테고리 위치를 변경 해봤습니다.

어렵지 않으니 한번 따라해보세요!


위치 변경 방법

먼저 자신의 티스토리 관리 페이지로 들어가 HTML/CSS 편집 부분을 눌러줍니다.

그 다음 아래의 부분을 <head>와 </head> 사이에 넣어줍니다.


잘 모르시겠다면 </head>를 검색 하셔서 바로 위에 붙여넣기  해주시면 됩니다.


<!-- 카테고리 글 더보기_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 -->


이 부분을 넣으셨다면 하나 더 추가하셔야 하는데요.

바로 이 부분입니다.


<!-- 카테고리 글 더보기_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 -->


카테고리 글 더 보기, 카테고리의 다른 글


다시 HTML/CSS 편집 부분을 들어가서 article_rep_desc를 검색 해줍니다.

[##_article_rep_desc_##] 이런게 나올텐데요.

이 부분의 아랫 부분에 글 더보기_2 코드를 넣어줍니다.


카테고리 글 더 보기, 카테고리의 다른 글


저장하고 확인하면 이런 결과가 나오게 되죠.

[##_article_rep_desc_##] 이 부분이 바로 본문 글이기 때문에 본문글 바로 아래에 나오게 됩니다.

저의 경우엔 [##_article_rep_desc_##]과 글 더 보기 태그 사이에 다음 뷰와 구글 광고를 넣은 상태입니다.


그리고 카테고리 글 더보기_2 부분에 보시면 굵게 적은 gray란 부분이 있는데요.


이 부분은 gray, red, blue, green, violet과 같은 색상이 있으니 gray 부분에 넣으시면 색이 바뀌게 됩니다.


보고 따라하기만 하면 되니 간단하다고 생각하지만, 어려워 하시는분이 있으니 궁금한점 댓글로 남겨주세요.

최대한 빨리 답변 해드릴께요^^