티스토리 블로그, 카테고리 글 더보기 플러그인 위치 바꾸기

HTML/CSS

by ⠀⠀⠀⠀⠀⠀ 2015. 12. 11. 15:54

티스토리의 플러그인 카테고리 글 더 보기 기능은 많은 블로거가 사용하는 플러그인 중 하나이다. 블로그 내 콘텐츠를 더 읽게 하기 위해서는 유용한 기능이긴 하지만 플로그인이 본문 하단으로 고정으로 노출되기에 블로그에 디자인 구성을 할 때는 성가신 기능이기도 하다.

우선 해당 플로그인은 관리툴의 기본적인 기능으로는 자유로운 이동이 불가능하다. 티스토리 관리자 페이지의 꾸미기 메뉴 HTML/CSS 편집을 선택한다. 그리고 HTML 탭에서 <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){

     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>

스크립트 제작자: MissFlash

해당 스크립트를 적용을 했으면 위치이동을 위한 사전작업이 완료된 상태이다. 그리고 카테고리 글 더보기 플러그인을 노출할 티스토리 치환자의 위치에 아래 코드를 적용한다.

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

스크립트 제작자: MissFlash

두 개의 스크립트를 모두 적용했다면, 카테고리 글 더 보기의 플로그인이 원하는 위치에 노출되는 것을 볼 수 있다.