[팁] 티스토리에서 믹시&블로거뉴스 추천 위젯, 카테고리 글 더보기 위치 설정하기!!!

* 이 포스트는 티스토리에서 믹시와 다음 블로거뉴스 추천 위젯의 크기나 위치를 임의로 조절하는 것과 관련된 팁입니다.
* 이전 글을 참고하시면 설치와 관련된 팁이나 노하우를 쉽게 이해하실 수 있습니다. 꼭 한 번 읽어 보실 것을 추천합니다.

2009/04/11 - [팁] 티스토리에서 믹시와 다음 블로거뉴스 추천 위젯 통합하기!!!
2009/04/11 - [팁] 티스토리에서 카테고리 글 더보기 플러그인 위치 바꾸기!!!

위에 소개한 두 개의 포스트를 발행한 후 많은 분들이 설치와 관련된 문의를 하셨습니다. 급하게 작성하느라 제대로 설명하지 못한 부분이 있기도 했지만, 티스토리 치환자 관련 잘못 게시한 부분도 있었기 때문입니다.

하지만, 여러 이웃들의 도움으로 문제를 하나씩 해결하면서 더 이상 수정하거나 추가할 내용이 없는 듯 했습니다. 그러다, 오늘dogfood님이 글 목록 개수와 관련해서 다음과 같은 문의를 하셨습니다.

감사합니다. 유용하게 사용하고 있습니다.
그런데, 한 가지 문제점이 있어 댓글 남깁니다.

한번에 포스트 1개만 출력되는 경우에는 상관이 없는데,
포스트 여러개가 한 페이지에 출력되는 경우 (카테고리 페이지라든가...) 에는
'카테고리 글 더 보기' 가 한 번에 여러개 붙어서 출력되는 경우가 발생합니다.

http://www.dogfood.kr/category/이슈%20클러스터링

이 문제는 어떻게 하면 해결할 수 있을까요?

아뿔사!
...
아직, 끝난게 아니었구나;;;
...
...

제 경우에는 카테고리 보기를 했을 때 목록만 보이게^[각주:1]한데다, 출력되는 글의 개수도 1개로 지정해 미처 인지하지 못했던 문제였습니다. dogfood님의 말씀대로 한 페이지에서 2개 이상의 글이 출력되는 상황이 생긴다면..., 추천 위젯 및 카테고리 글 더 보기 플러그인의 출력 위치에 문제가 생길 수 밖에 없었던거죠...^[각주:2]

어쨋든, dogfood님의 신고(?)로 늦게나마 문제를 확인했고... 다행히 빠른 시간안에 문제를 해결할 수 있었습니다.(아직 많이 테스트하지는 못해서 또 어떤 문제가 발생할지는 모르겠네요 ㅎㅎ;)



그럼 지금부터 새롭게 개선된 추천위젯 통합 방법에 대해 설명하도록 하겠습니다.
* 이전 팁보다 다소 복잡해졌기 때문에 빨간색과 녹색 부분을 제외하고는 수정없이 쓰시기를 권장합니다.



0. 공통적으로 반드시 적용해야 할 사항^[각주:3]

• </title> 태그 바로 밑에 아래 소스 붙여넣기(수정할 필요없음)
  

<script type="text/javascript" language="javascript">
var MissFlash_Div_Num = 1;
</script>

1. 카테고리 글 더보기 플러그인 위치 수정하기

• </title> 태그 바로 밑에 아래 소스 붙여넣기(수정할 필요없음)
  

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

• 위 소스에서 굵게 표시한 MF_Reference라는 id의 <div>가 카테고리 글 더보기 플러그인이 출력될 위치입니다.
  

2. 믹시 & 다음 블로거뉴스 추천 위젯 위치 수정하기

• 믹시 & 다음 블로거뉴스 추천 위젯을 넣고싶은 위치에 붙여넣기(빨간색과 녹색만 수정할 것!)

<div id="MissFlash_Div">
<div class="MF_Left_Float" style="height:70px; margin-left:5px;">
    <object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='73' height='79' align='left' style="border-bottom: 1px solid #CFD4DA; border-right: 1px solid #CFD4DA;">
    <param name='allowScriptAccess' value='always'/>
    <param name='movie' value='http://www.mixsh.com/widget/mixup/loader.html?muid=47189&guid=http://blog.missflash.com/<##_article_rep_id_##>&rdate=<##_article_rep_date_##>&showhitcnt=1&platform=2'/>
    <param name='quality' value='high'/>
    <param name='wmode' value='window'/>
    <embed src='http://www.mixsh.com/widget/mixup/loader.html?muid=47189&guid=http://blog.missflash.com/<##_article_rep_id_##>&rdate=<##_article_rep_date_##>&showhitcnt=1&platform=2' quality='high' wmode='window' width='73' height='79' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'/>
    </object>
</div>
<script type="text/javascript">
//<![CDATA[
// Created by MissFlash(http://blog.missflash.com)
var MissFlash_Div = document.getElementById('MissFlash_Div');
MissFlash_Div.setAttribute("id", "MissFlash_Div" + MissFlash_Div_Num);
var MF_Recommend_ID = "MF_Recommend" + MissFlash_Div_Num;
var MF_Recommend_Div = document.createElement('div');
MF_Recommend_Div.setAttribute("id", MF_Recommend_ID);
MF_Recommend_Div.className = "MF_Right_Float";

// by chatii - http://chatii.tistory.com/52
// last updated at 09/03/15

// Modified by MissFlash(http://blog.missflash.com)
var recombox = document.getElementsByTagName("embed");
for (var i=0; i<recombox.length; i++) {
    if (recombox[i].getAttribute("src") && recombox[i].getAttribute("src").indexOf("http://api.v.daum.net/static/recombox1.swf") != "-1") {
        var recomdiv = recombox[i].parentNode;
        recomdiv.innerHTML = recomdiv.innerHTML.replace("recombox1.swf", "recombox3.swf").replace("400", "67");
        var param = recomdiv.parentNode.getElementsByTagName("param");
        for(var j=0; j<param.length; j++) {
        if (param[j].getAttribute("value").indexOf("mixup") != "-1") {
            param[j].parentNode.removeAttribute("align");
                recomdiv.appendChild(param[j].parentNode);
            }
        }
        MF_Recommend_Div.innerHTML = recomdiv.innerHTML;
        recomdiv.style.display = "none";
    }
}
MissFlash_Div.appendChild(MF_Recommend_Div);
//]]>
</script>
</div>

• 위 소스에서 빨간색의 muid와 guid 값은 이 곳에서 확인하실 수 있습니다. 자신의 블로그에 해당하는 muid, guid 값으로 바꿔주시기 바랍니다.
  
• 위 소스에서 녹색의 <과 >는 각각 [과 ]로 바꿔주시면 됩니다.(<4곳 >4곳, 총 8곳입니다.)
  

• 믹시와 다음 블로거뉴스 추천 위젯을 한 줄에 출력하기 위해 티스토리 스타일시트(style.css) 제일 끝에 아래의 소스를 추가하시기 바랍니다.
  

.MF_Left_Float {float:left; margin-bottom:5px; }
.MF_Right_Float {float:right; margin-bottom:5px; }

* 만약 다른 추천위젯을 추가하지 않아서 두 위젯이 떨어져서 보이면 위의 CSS 대신 아래 소스를 사용하시기 바랍니다.

.MF_Left_Float {float:left; width:76px; margin-bottom:5px; }
.MF_Right_Float {float:left; margin-bottom:5px; }

• 믹시 추천 위젯의 경우, 2개가 중복해서 표시되는 것을 막기 위해 티스토리 플러그인 설정에서 "mixUP 위젯 표시안함"으로 설정하셔야 합니다.
  

수정 #1. 다음 블로거뉴스가 다음 뷰로 개편되면서 소스 주소가 http://api.bloggernews.media.daum.net/ 에서 http://api.v.daum.net/ 로 바뀌었습니다.

추가 #2. 위 소스를 원래대로 초기화하기 위해서는 회색박스 안의 추가한 소스를 삭제(본문에 나와있는 소스만 해당하며 개인적으로 수정하거나 추가한 소스는 안 빼셔도 됩니다.)해주시면 됩니다.

추가 #3. 일부 다음뷰 스크립트 오류가 발생하는 분들은 "0. 공통적으로 반드시 적용해야 할 사항"을 반드시 최 상단에 붙여넣어주시기 바랍니다.



이전에 설정하신 분들은 새로운 소스로 교체해 주시구요... 혹시 안되거나 어려운 점 있으면 주저하지 마시고 댓글달아 주세요~
시원한 스노보드 사진 보시고 마음까지 뻥 뚫리는 하루 되세요~ :)

1. 제 경우에는 장문의 글을 쓸 때가 많다보니 아무래도 로딩속도를 생각하지 않을수 없더군요... [본문으로]
2. 구체적으로 설명하자면, div 태그의 id를 기준으로 추천위젯의 위치를 동적 생성했기 때문에 발생하는 문제입니다. [본문으로]
3. 미티드님의 멋진 의견으로 긴급 업데이트합니다. 도움주셔서 감사합니다. ^_^; [본문으로]