본문 바로가기

Tistory

티스토리 본문 하단 깔끔하게 정리하기




티스토리 본문 하단 깔끔하게 정리하기


티스토리 본문 하단 깔끔하게 정리하기

 


티스토리 분문 하단 깔끔하게 정리하기


포스트 하단에 여러 가지 버튼과 광고를 정리해보도록 하겠습니다.


전체적인 틀은 투명테이블 소스를 이용하여 버튼과 광고들을 넣어주면 됩니다. 


 

티스토리 본문 하단 깔끔하게 정리하기


하지만 이런 소스들을 포스트 하단에 넣게 되면 위 이미지와 같이 카테고리의 다른 글 아래에 출력돼서 부자연스러운 모습이 되는데 카테고리의 다른 글 목록 자체를 따로 분리하여 자유롭게 출력할 수 있는 스크립트와 소스를 추가해 줍니다.


아래 소스는 skin.html에서 <head> 와 </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>


위 소스에서는 수정할 게 없으니 그대로 넣어주면 되고 아래 소스는 카테고리의 다른 글 출력 부분입니다.


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


gray 부분은 관리자 페이지 → 플러그인 설정 → 카테고리 글 더 보기 설정에서 5가지 색상으로(gray, red, blue, green, violrt) 선택 수정이 가능한데 이 소스를 넣게 되면 소스에서 색상을 직접 수정해 줘야합니다. MissFlash_Div_Num += 1; 부분은 카테고리 글 더 보기 설정에 설정된 목록 개수보다 한 줄 더 보이게 되는 것이므로 참고해 두시면 되겠습니다. 이렇게 소스를 넣게 되면 카테고리의 다른 글 목록이 2개가 생성되는 것이 아니고 따로 분리되어 테이블 소스를 이용하여 다른 버튼, 광고들과 자유롭게 꾸밀 수 있게 됩니다.


[파일 다운로드]

ct_p.txt


이번에는 믹스 버튼을 분리하여 위 테이블 소스 안으로 넣어보겠습니다.


우선 관리자 페이지 → 플러그인 설정 → 믹시 설정에서 표시 안 함으로 설정 후 저장합니다. 그리고 믹시 홈페이지에서 마이믹시페이지 왼쪽 하단에 블로그/위젯 등록에 들어가면 아래와 같이 위젯 소스를 얻을 수 있습니다.


 

티스토리 본문 하단 깔끔하게 정리하기


위 위젯 소스를 복사해서 테이블 안에 넣어주면 됩니다.


카테고리의 다른 글 목록을 자유롭게 움직일 수 있으니 포스트 하단에 널부러져 있던 것들을 깔끔하게 정리할 수 있게 되었네요.^^


그리고 추천 버튼들은 아래 링크로 가면 쉽게 만들 수 있습니다.

페이스북 : http://developers.facebook.com/docs/reference/plugins/like/
트위터 : http://twitter.com/goodies/tweetbutton
구글+1 : http://www.google.com/intl/ko/webmasters/+1/button/index.html

 

티스토리 본문 하단 깔끔하게 정리하기