티스토리 반응형 스킨 FastBoot 카테고리 글 더보기 위치 변경하기

광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

예전 블로그 글에 카테고리 글 더보기 위치 변경하기 글 작성을 했었습니다.

그때 작성한 글 내용은 카테고리 글 더보기 위치 변경을 하면서 믹시,다음뷰를 넣는 글이였지요.

이번에 새롭게 작성하는 카테고리 글 더보기 위치 변경하기는 소스를 새롭게 하는것이 아니라 응용편이라고 보시면 될듯합니다.

제가 반응형 스킨 FastBoot를 테스트 블로그에 설치해서 이것저것 해보는데 '카테고리 글 더보기 위치 변경하기'는 꼭 추가해야 겠더군요.

관련글 : 믹시 추천위젯,카테고리 글 더보기 위치 변경하기

그래서 글 작성을 다시 합니다.

'카테고리 글 더보기'플러그인을 사용하면서 본문 글 하단에 어떠한 아이템을 장착하고자 할때 아래 이미지처럼 보일것 입니다.

전 각종 SNS버튼 + 블로그 도움말 (?) 링크를 걸어둘려고 소스 입력을 했습니다. 제가 의도한 레이아웃은 '카테고리 글 더보기' 위로 보여야 하는데 위 이미지처럼 카테고리 글 더보기 아래로 들어가 버렸네요.

이 부분을 소스 추가를 통해 바꿔 보겠습니다.

위 이미지처럼 나오게 하는거랍니다.^^

작업전 사용중인 스킨을 백업해 주세요. 티스토리 스킨 수정전 백업은 필수!!!!!

FastBoot 카테고리 글 더보기 위치 변경하기

스킨 백업을 하셨다면 진행해 보겠습니다.

티스토리 관리 - > HTML/CSS 편집란에 추가할 소스는 2군데 입니다.

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

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

글 더보기.txt

카테고리 글 더보기 위치 변경 소스1 ,카테고리 글 더보기 위치 변경 소스2 로 나눠져 있는데 일단 카테고리 글 더보기 위치 변경 소스1 을 넣어 보겠습니다.

티스토리 관리 - > HTML/CSS 편집을 선택 하시고 Ctrl + F를 눌러 찾기 창에 </head>를 입력하세요.

검색된 '</head>'위 (화살표 참조)에  부터 까지 넣어주시면 됩니다.

그리고 찾기 창에 'article_rep_desc'를 입력 하세요.

'article_rep_desc', /DIV 사이에  부터 까지 넣어주시면 됩니다.

그리고 저장을 해주시면 카테고리 글 더보기 위치 변경 작업은 끝났습니다.

이제 사용자 아이템을 넣을때  위로 소스를 입력하면 '카테고리 더보기' 목록 위로 보이고  아래로 소스를 입력하면 '카테고리 더보기'목록 아래로 보이게 됩니다.

간단하게 소스 추가를 통해 본문 글 하단을 꾸밀수 있게 되었습니다.

블로그를 운영하면서 여러가지 신경쓸것들이 많지만 글 읽는 입장에서 편안하고, 깔끔하게 정리된 본문 글이 가독성이 좋습니다.

그러니 방문자 편의를 위한 아이템을 설치할때 정리된 느낌을 주는것도 중요하다고 생각합니다.^^