티스토리 에서 카테고리 글 더보기 플러그인 위치 변경하기

Posted by 대혀니_
2015. 3. 22. 22:20 IT/티스토리 팁

이게 바로 카테고리 플러그인...

티스토리에서는 기본적으로 같은 카테고리 안에있는 글을 보여주게 하는 글이 있다.

근데 광고라든가.. 위젯이라든가 를 위해서 위치를 변경해주고 싶었는데 해당 플러그인에는 치환자도 없었고...


다행히 찾아본결과 존재했다. (원글은 트랙백했습니다)


1. 해당 플러그인을 활성화 하세요

2. 다음과 같은 소스를 /head 앞에다가 붙여 넣으세요

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

3. 아래의 소스를 이제 원하는 위치에 넣으시면 거기에서 카테고리 글 더보기가 뜹니다.

<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");
if (ref_source == null) //카테고리로 분류되지 않은 글이 있는 경우 에러처리
 {
   // alert("Error of NULL data"); This article doesn't have categories.
   // return true; 
 }
else     // This article is classified into some of categories.
 {
   MF_Reference.innerHTML = ref_source;
   MissFlash_Div_Num += 1;
   //]]>
 }
</script>

이 때 another_category_color_gray 부분만 본인이 원하는 색상에 맞춰 Gray, Red, Blue, Green, Violet 으로 수정하여 적용하시면 됩니다.

그 외의 나머지 부분은 손대지 않으시는 게 좋습니다.


3. 카테고리 글 더보기 박스의 추가적인 수정

h추가적으로 아래와 같이 스타일을 적용하여 카테고리 글 더보기 박스의 크기를 조절할 수 있습니다. another_category 박스의 padding 이 상하좌우 10px 이고 border 가 1px 이니 width 값은 원하는 크기에서 -22px 를 적용하시면 됩니다. 가운데 정렬이 필요하면 여백을 Auto 로 설정하시면 됩니다.

<div style="width: 688px; margin: 0px auto;" id="MF_Reference" class="another_category another_category_color_gray"></div>


계산하기 귀찮으시면 어차피 박스의 width 가 100% 이니 그냥 원하는 크기의 박스로 감싸셔도 됩니다.

<div style="width: 710px; margin: 0px auto;">
    <div id="MF_Reference" class="another_category another_category_color_gray"></div>
</div>



또한 날짜 부분이 출력되질 않길 원하시는 분들이 계시는데 그런 분들은 style.css 에 다음과 같은 .another_category 클래스 스타일을 추가하시면 됩니다.

.another_category td {display: none;}



그 외에 카테고리 글 더보기 박스에 배경 이미지를 넣고 싶다면 스킨에 이미지 파일을 업로드하고 .another_category 클래스에 아래와 같은 식으로 배경 스타일을 지정해주시면 됩니다.

.another_category {background: transparent url(./images/이미지파일) no-repeat center center;}