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

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>

  • 위 소스에서 빨간색muidguid 값은 이 곳에서 확인하실 수 있습니다. 자신의 블로그에 해당하는 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. 공통적으로 반드시 적용해야 할 사항"을 반드시 최 상단에 붙여넣어주시기 바랍니다.



이전에 설정하신 분들은 새로운 소스로 교체해 주시구요... 혹시 안되거나 어려운 점 있으면 주저하지 마시고 댓글달아 주세요~
시원한 스노보드 사진 보시고 마음까지 뻥 뚫리는 하루 되세요~ :)
Canon EOS 5D | Aperture priority | Pattern | 1/800sec | F/2.8 | +0.33 EV | 75.0mm | ISO-100
  1. 제 경우에는 장문의 글을 쓸 때가 많다보니 아무래도 로딩속도를 생각하지 않을수 없더군요... [본문으로]
  2. 구체적으로 설명하자면, div 태그의 id를 기준으로 추천위젯의 위치를 동적 생성했기 때문에 발생하는 문제입니다. [본문으로]
  3. 미티드님의 멋진 의견으로 긴급 업데이트합니다. 도움주셔서 감사합니다. ^_^; [본문으로]
저작자 표시 비영리 변경 금지
신고

이 글은 새로운 정보가 추가될 때마다 업데이트됩니다. 추천으로 아래 숫자에 1을 더해보세요. :)
RSS구독을 하시면 포스트를 배달해 드립니다. ▷ 한RSS 구독하기, 구글리더 구독하기

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 안녕하세요, 꼭 필요한 기능이라서 적용 해 보았으나, undefined으로만 나오고 아무것도 나오질 않네요 ㅜㅜ
    본문이 출력되는 부분인, [###_article_rep_desc_###] 바로 위에 넣었습니다. 헤더 안에도 넣을것 다 넣었구요. 참고로 제가 쓰고있는 스킨은 티스토리 기본스킨입니다. j편지님의 증상과 저의 증상과 매우 똑같은 증상입니다. 왜그런걸까요.. 제 블로그에 쓰고있는 스킨은 '기본스킨'인데요... 그래서 다른 5종의 스킨을 무작위로 뽑아서 적용 해 보았지만 실패입니다. 티스토리 관리자 화면에 있는 146종의 스킨을 모두 적용 해 본다고 해도 제가 만지면 안나올것 같네요.이 저주받은 두뇌같은니...ㅡㅡ 도대체 뭐가 잘못된거죠?ㅜㅜ 제가 뭘 빠뜨리거나 잘못 추가한걸까요? 이런말씀 드려 죄송하지만, 한번 봐주시면 안될까요...ㅜㅜ 부탁드립니다.. 제가 임의로 수정한 스킨이 아니라, 기본스킨이라서 보기 편하실꺼에요...http://palnote.tistory.com 입니다... 지금 수능 시험보다, 군대가는것보다 더 초조합니다...ㅜㅜ

    2009.12.16 05:05 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 간절히 부탁하셔서 잠시 살펴봤는데, 일단 소스는 정상적으로 넣으신 것 같더군요...

      문제를 해결하기 위해서는 좀 더 살펴봐야 할 것 같은데... 제가 시간이 많지가 않네요;;;

      죄송합니다.

      2009.12.16 20:19 신고 [ ADDR : EDIT/ DEL ]
    • 아! 혹시!!! 제가 윈도우7에 익스플로러 8을 쓰거든요!! 혹시 이런문제 아닐까.. 머릿속에 스치는!!! 제가 넣은 위치가 정상이라니 그건 다행이네요.. 감사합니다^^; 익스플로러 6에서도 테스트 해봐야 겟어요.. 그리고 다른 스킨에서도...

      2009.12.16 21:24 신고 [ ADDR : EDIT/ DEL ]
    • 더프맨님, 소스코드는 정상적으로 들어간 것 같은데 출력은 제가 보기에도 에러가 났습니다.

      저는 현재 아이맥&사파리 조합을 사용하고 있습니다.

      티스토리는 사용자가 제한된 환경에서 블로그 스킨을 수정할 수 있기 때문에 종종 문제가 발생할 수 있습니다.

      너무 초조해하지 마시고, 천천히 해결해 보세요~ ㅎㅎ;

      2009.12.17 10:38 신고 [ ADDR : EDIT/ DEL ]
  3. 유용한팁 잘 받아갑니다.~ 그런데 다름게 아니고 제 블로그에 보면 한줄 쭉 나와있는데
    믹시위젯 부분이 정상적으로 나오지가 않네요. 밑에 짤린글을 대략 유추해본다면 "등록된 다른..." 이런 말인것 같은데 이건 왜이런거죠?

    2010.01.16 22:26 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 아... 믹시 블로그 삭제후 재등록한뒤 해봤더니 문제없이 되네요..^^ 잘쓰겠습니다.

    2010.01.16 22:41 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. html의 초보인지라..조금 이해가 가지않아 댓글로 질문합니다..ㅠ
    다음뷰와 믹시를 한줄로 정렬을 하기위해 소스를 넣었는데
    결국 실패하여, 큰 버튼으로 사용을 하려합니다.

    근데.. 다음 뷰를 넣으면 믹시가 활성화가 되지않습니다.
    'mixUP 위젯 표시안함'으로 설정하여도요
    어떻게 해야하나요..?

    2010.01.29 12:20 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 초기화를 위해서는 본 포스트에서 추가한 소스를 모두 삭제하시면 됩니다.

      간혹 플러그인 쪽에서 오류가 생기기도 하니까 플러그인을 ON/OFF 해보시는 것도 도움이 되겠네요~

      2010.01.29 15:45 신고 [ ADDR : EDIT/ DEL ]
  6. 아주 유용한 스킨 감사합니다. 너무너무 원하던 팁입니다!!

    2010.02.04 03:51 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 도움되었다니 저도 좋네요~ 앞으로도 종종 들러서 응원해주세요~ ㅎㅎ;

      2010.02.04 16:25 신고 [ ADDR : EDIT/ DEL ]
  7. 카테고리 버튼 위치 때문에 속 좀 썩었는데, MissFlash님 글 보고 해결 되었어요.
    너무너무 감사드립니다.

    다음뷰온 제가 100 채웠네요.
    행복하세요`~

    2010.02.21 12:11 신고 [ ADDR : EDIT/ DEL : REPLY ]
  8. 추천 버튼 있는 위젯 달면 지저분해서 달기 싫었는데, MissFlash님 덕분에 깔끔히 정리했습니다.
    유용한 팁 정말 감사합니다:)

    그런데.. 티스토리 쓰는거 맞으시죠? 근데 왜 MissFlash님 블로그만 오면 로그아웃 상태가 될까요ㅠㅠ 흑

    2010.02.24 07:55 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 한 번에 성공하셨나 보네요~ 축하드립니다.

      제 블로그는 티스토리가 맞는데... 로그아웃이 되신다구요?

      그것 참 신기하네요~ 그런 이야기는 처음 듣는데... 왜 그럴까요?

      2010.02.24 11:17 신고 [ ADDR : EDIT/ DEL ]
  9. 비밀댓글입니다

    2010.04.27 00:43 [ ADDR : EDIT/ DEL : REPLY ]
    • 적용방법이라고 해봤자 별다른 건 없구요... 아이콘은 Krang님이 만드신 것입니다.

      제 블로그 소스보기를 하셔서 적용하셔도 되고, Krang님 블로그를 통해서 소스 적용방법을 배우셔도 됩니다. :-)

      2010.04.27 10:35 신고 [ ADDR : EDIT/ DEL ]
    • http://krang.tistory.com/378

      위 링크 참고하세요~ ㅎㅎ;

      2010.04.27 10:36 신고 [ ADDR : EDIT/ DEL ]
  10. 믹시를 사용해서 위젯 보이지 않게 하고, 주소도 제대로 작성하고 번호도 똑같이 썼는데, 이전 게시글은 믹시 버튼이 나오는데 새로 발행한 게시글은 믹시 버튼이 나오지 않고 로드 되지 않음 으로 표시되는군요. 왜 이런지 혹시 아시나요?

    2010.05.02 13:55 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 흠; 저는 괜찮은데 몇몇분들이 이런 보고를 하는 것을 보면 믹시에 무슨 문제가 있나보네요...

      저도 정확하게 원인은 알수없네요~

      2010.05.04 21:24 신고 [ ADDR : EDIT/ DEL ]
  11. 카테고리로 글 더 보기 플러그인을 사용하면, 네이버 검색에 노출 될 때 본문 부분에 카테고리 더 보기 부분이 노출됩니다. 저만 그런 것이 아니라 MissFlash님께서도 그런 것 같습니다. 기타 이 기능을 사용하시는 다른 분들도 그렇구요. 확인좀 부탁드립니다. 글 작성하는 것마다 그러네요 ^^;

    2010.05.31 20:47 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • Kritz님 정보 감사합니다. 그런데 제가 정확하게 문제를 알수가 없네요~ 혹시 참고할만한 링크나 방법 알려주시면 확인후 조치 혹은 공지하도록 하겠습니다.

      2010.06.01 09:11 신고 [ ADDR : EDIT/ DEL ]
    • 네이버에서 RSS 수집하는 방식에 문제가 있었던 듯 합니다. 제가 문의 메일 보내서 해결해달라 하니까 해결해주네요.

      2010.06.02 01:02 신고 [ ADDR : EDIT/ DEL ]
    • 다행입니다. ^_^;

      2010.06.07 10:44 신고 [ ADDR : EDIT/ DEL ]
  12. 6월 1일 다음 AD인가 새로 생긴 이후로 이 소스가 정상적으로 먹히지 않고 있습니다 ~_~

    2010.06.02 01:02 신고 [ ADDR : EDIT/ DEL : REPLY ]
  13. 한가지 질문이 있어서 여쭤 봅니다. 제가 이전에 2단스킨 쓸 때는 MissFlash님이 알려주신대로 하면 추천 위젯을 모아서 깔끔하게 정리할 수 있었습니다. 헌데 스킨을 3단형으로 바꾸고 나니 사이드바가 하단으로 이동합니다. -_-
    http://hurrypark.tistory.com/ 여기에 가시면 그 현상을 보실 수 있구요;; 스킨 소스 중에 <div class="Meta_Blog"> 요부분을 삭제하면 다시 사이드바가 제자리로 옵니다. 하지만 추천 위젯을 감싸고 있던 박스는 없어지구요. 제 현재 홈페이지는 escribir.kr이구요. 위와 같은 이유로 글 하단부가 엉망인 상태입니다. 한번 보시고 조언 부탁드립니다.

    2010.08.04 19:04 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 말씀하신 부분은 CSS만 잘 아시면 충분히 해결하실수 있는 문제입니다. 적용 오류에 대한 문의가 아닌 개인 블로그 최적화에 대한 답변은 일일이 드리기가 힘드네요...

      div, float, clear:both 같은 css 사용법을 살펴보시면 쉽게 해결하실 수 있을 것 같네요...

      2010.08.04 23:59 신고 [ ADDR : EDIT/ DEL ]
  14. 정말 잘 보고 갑니다. 안그래도 카테고리 위치를 바꿀 줄 몰라 난감했는데
    큰 도움이 되었습니다. 감사합니다.
    즐거운 하루 되시구요. ^^

    2010.09.10 12:42 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 의외로 이 팁을 원하신 분이 참 많은 것 같아요...
      한방에 성공하신 것 같은데 축하드립니당!

      2010.09.11 08:27 신고 [ ADDR : EDIT/ DEL ]
  15. 도아님의 믹시업과 블로거뉴스 대통합 플러그인 포스트를 읽고 동하여 포스트 하단을 정리해보기로 했어요. 새벽 3시까지 삽질많이 했네요.

    2011.03.12 20:25 신고 [ ADDR : EDIT/ DEL : REPLY ]
  16. 우아 너무 어려워요 ㅠ.ㅠ

    2011.06.21 16:44 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • ㅠㅠ; 저도 더이상 도움을 드리기가... 차근차근 읽어보시면 쉽게 따라하실 수 있을거에요...

      2011.06.21 20:47 신고 [ ADDR : EDIT/ DEL ]
  17. 믹시 & 다음 블로거뉴스 추천 위젯 위치 수정하기 이것은 이해가 잘 안되서 패스 하고
    위치 수정만 했습니다. ㅎㅎ 좋은 정보 감사합니다.^^

    2011.10.24 01:35 신고 [ ADDR : EDIT/ DEL : REPLY ]
  18. Favicon of http://www.hermesitalyz.com/ BlogIcon kelly hermes

    관리자의 승인을 기다리고 있는 댓글입니다

    2013.01.05 00:01 [ ADDR : EDIT/ DEL : REPLY ]
  19. Favicon of http://www.cheapmichaelkorsy.com/ BlogIcon michael kors

    관리자의 승인을 기다리고 있는 댓글입니다

    2013.01.05 00:04 [ ADDR : EDIT/ DEL : REPLY ]
  20. Favicon of http://www.cheapmichaelkorsy.com/ BlogIcon michael kors

    관리자의 승인을 기다리고 있는 댓글입니다

    2013.01.05 00:06 [ ADDR : EDIT/ DEL : REPLY ]
  21. Favicon of http://dressroze.tistory.com BlogIcon DressRoze

    관리자의 승인을 기다리고 있는 댓글입니다

    2014.04.20 00:38 [ ADDR : EDIT/ DEL : REPLY ]


티스토리 툴바