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>

  • 위 소스에서 빨간색의 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. 공통적으로 반드시 적용해야 할 사항"을 반드시 최 상단에 붙여넣어주시기 바랍니다.



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

'Tip&Tech > Tistory' 카테고리의 다른 글

티스토리 첫화면 꾸미기 클로즈 베타에 응모합니닷!!!  (0) 2010/03/08
[팁] 다음뷰 개편에 따른 티스토리 추천 위젯 설정 수정하기!!!  (31) 2009/05/12
[팁] 티스토리에서 믹시&블로거뉴스 추천 위젯, 카테고리 글 더보기 위치 설정하기!!!  (156) 2009/05/12
[팁] 티스토리에서 믹시와 다음 블로거뉴스 추천 위젯 통합하기!!!  (93) 2009/04/11
[팁] 티스토리에서 카테고리 글 더보기 플러그인 위치 바꾸기!!!  (71) 2009/04/11
레퍼러 로그로 확인해 본 다음 트래픽의 비밀  (12) 2009/03/16

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

TAG , , , , , , , , , , , , , , , , , 대한민국>대전>KAIST>동문창업관
blog comments powered by Disqus
Trackback 11 Comment 156

TRACKBACK http://blog.missflash.com/trackback/543 관련글 쓰기

  1. [팁] 티스토리에서 믹시와 다음 블로거뉴스 추천 위젯 통합하기!!!  삭제

    2009/04/22 00:14TRACKBACK FROM [ MissFlash - Digital Life ]

    먼저 이 팁은 다음의 여러 게시물을 참고로 작성한 것임을 밝힙니다. 아래 글들을 읽어보시면 추천 위젯 통합이 어떤 식으로 돌아가는지 쉽게 파악할 수 있으리라 생각합니다. 도아님의 믹시업과 블로거뉴스 대통합 플러그인 블로그진님의 포스팅시 믹시 버튼을 이쁘게 – For 워드프레스 chatii님의 (티스토리) 블로거뉴스 추천 버튼 작게 바꾸기 위 게시물들이 좋은 정보를 제공하고 있음에도 불구하고... 티스토리 환경에서 믹시 추천 위젯과 다음 블로거뉴스 추..

  2. [팁] 티스토리에서 카테고리 글 더보기 플러그인 위치 바꾸기!!!  삭제

    2009/04/22 00:14TRACKBACK FROM [ MissFlash - Digital Life ]

    * 본 포스트에 사용된 소스는 티스토리 카테고리 글 더보기 플러그인 외에도 JavaScript를 이용해 클래스명으로 엘리먼트를 찾을 때 사용할 수 있습니다. 티스토리를 사용하면서 불편한 점 중 하나는 플러그인의 위치나 디자인을 마음대로 편집하지 못하는 것입니다. (물론 PHP 파일을 사용하지 못한다는 훨씬 큰 단점이 있긴 하지만, 무료 블로그 서비스에서 이것까지 바란다는 것은 너무 염치가 없기에... ^^;) 그 중 하나가 바로 카테고리 글 더보기[..

  3. (티스토리) 블로거뉴스 추천 버튼 작게 바꾸기  삭제

    2009/04/22 09:48TRACKBACK FROM chatii의 웹노트

    작은 버튼요청이 있어서 만든 건데, 티스토리에서 블로거뉴스 추천 박스를 작은 버튼으로 바꿔주는 자바스크립트입니다. 아래 소스를 skin.html의 &#91;##_article_rep_desc_## ] 치환자 바로 뒤에 삽입하면 됩니다. 물론 그 전에 블로거뉴스 플러그인이 켜져있어야 하겠지요. 비록 innerHTML는 현재 표준 DOM은 아니고 채택 예정인 상태이지만, 일단은 IE 6, 7, 8 Beta와 오페라, 파이어폭스, 사파리 최신 버전에서 정상..

  4. 티스토리 디자인 변경 팁 정리  삭제

    2009/04/22 10:20TRACKBACK FROM 12가지 재주가 있으면 굶어 죽는다

    밑에 링크는 되도록 첫 게시자분을 링크했습니다. 첫 게시자분이 누군지 모를경우에는 제가 참고한 블로그를 링크했습니다. 카테고리 항상 펼치기 대부분의 스킨은 하위 카테고리가 열려있지 않기 때문에 항상펼치기를 원하시면 위의 팁을 적용해 보세요 본문의 [카테고리 더보기] 상자 위치 바꾸기 플러그인 조작으로 본문에 [카테고리리글 더 보기]를 하면 그 위치를 정할 수 없어 짜증날때가 있습니다. 이 해결해주는 팁입니다. 수정된 내용 아이폰 스타일 메타사이트 추..

  5. 믹시업과 블로거뉴스 대통합 플러그인  삭제

    2009/04/22 16:27TRACKBACK FROM 도아의 세상사는 이야기

    블로그에 글을 쓰다 보면 가끔 믹시업 위젯을 달지 않는 이유를 물어 보는 분이 있다. 믹시가 나름대로 편하고 또 인기를 끈 것도 사실이다. 그러나 트래픽 유입에 도움이 되는 믹시업 위젯을 달지 않는 이유는 아주 간단하다. 블로거뉴스 추천 위젯과 믹시업 위젯을 함께 달면 배치가 상당히 어긋나기 때문이다. 깔끔하고 정렬된 것을 좋아하는 나로서는 두개의 위젯이 떨어져 표시되는 것이 마음에 들지 않았다. 누에고치님의 제안처럼 두개의 위젯이 통합된다면 믹시...

  6. 제 블로그 하단 정리 이쁘지 않나요?  삭제

    2009/05/16 04:01TRACKBACK FROM 관심꺼리.log

    도아님의 믹시업과 블로거뉴스 대통합 플러그인 포스트를 읽고 동하여 포스트 하단을 정리해보기로 했어요. 새벽 3시까지 삽질많이 했네요. Missflash님의 글, [팁] 티스토리에서 믹시와 다음 블로거뉴스 추천 위젯 통합하기!!!도 참고하고 해서 도아님의 믹시업 블로거뉴스 대통합 플러그인에 거의 근접하게 맹글었어요. IE8과 크롬에서 확인 해보니 별 문제는 없네요. 추가로 저는 모든 글이 Daum view에 발행하진 않기때문에 일부 포스트는 다음뷰 위..

  7. 다음뷰와 믹시,메타사이트 추천버튼 통합하기  삭제

    2009/09/07 12:38TRACKBACK FROM 필넷의 블로그라이프

    이번에는 다음뷰, 믹시 그리고 메타사이트 추천버튼을 한줄로 통합하는 작업을 위해 또다시 삽질을 했습니다. 티스토리의 블로그에서는 missflash님 께서 공개한 자바스크립트로 비교적 쉽게 적용을 할 수가 있었는데, 설치형 텍스트큐브에서는 역시나 또 미묘한 차이(?)때문인지 missflash님의 자바스크립트 코드가 동작하지 않습니다. 역시나 구글링을 시도하니 관련 포스트는 몇개 검색이 됩니다. 하지만 제 블로그에서는 잘 동작하지 않습니다. 믹시업과...

  8. 홈페이지 꾸미기 완료 - RSS구독, 공유도구, 트위터연동, 이동메뉴  삭제

    2009/11/30 21:05TRACKBACK FROM 직장인 로망 공작실

    지난 주말동안 짬을 내서 홈페이지를 대대적으로 개편했다. 2009.08.06 에 티스토리 블로그로 홈페이지를 오픈한 이후 실질적으로는 두 번째 개편인셈이다. 첫번째 개편에서는 기본적인 의사소통 및 브랜딩 도구를 설치했고, 한참 SNS를 따라잡던 터라 SNS 와의 기본 연결고리를 만들었었다. - 링크나우 프로필 버튼 : 사이드바 설정의 이미지배너 출력 사용 - 믹시, 다음 뷰 등의 메타블로그 위젯 : 각 메타블로그 사이트가 제공하는 위젯 사용 - 멋진..

  9. 아무도 안알려주는 티스토리 디자인 총망라!  삭제

    2010/02/07 22:02TRACKBACK FROM 리버보이의 세상리뷰!

    왼쪽의 사진은 저의 블로그 대문 사진입니다. 깔끔하죠?? 아직 부족한 점이 많이 있는 블로그지만 이렇게 만드는데에도 많은 우여곡절을 겪었습니다. 이 우여곡절을 겪고 계시는 초보 블로거님들을 위해(저도 초보지만;;) 정보를 모아 보려고 합니다. 링크는 되도록 최초로 게시한 분의 게시물로 링크를 걸어두었고, 적용 사진을 보시면 무슨 내용인지 알기 쉽게 적용 화면 스크린샷을 함께 올릴 예정입니다. 계속 업데이트될 예정이니 즐겨찾기 해두면 좋겠죠? 다음뷰..

  10. 다음뷰, 블로그독, 마이픽업 추천버튼 쉽게 달기  삭제

    2010/06/10 01:39TRACKBACK FROM 경제를 읽어라!! 미래가 보인다.

    포스팅을 하다보면 각종 추천버튼들이 있습니다. 글을 쓰시는 분들은 아시겠지만 내가 올린 글이 오늘은 몇 개의 추천을 받고 글을 읽은 사람은 몇 명인지 또한 방문자는 얼마나 왔는지 참으로 궁금하지 않을 수 없습니다. 어제 트위터 가입방법을 포스팅하고 열심히 방문자 수를 늘려볼 요량으로 검색창에서 트위터로만 검색을 해보니 많은 분들이 있길래 한 열분 정도에게 트랙백을 날렸습니다.^^ 그리고 오늘 제 블로그에 트랙백 1개가 달려있어서 인사차 보내주신 분의..

  11. [블로그 꾸미기] 다음뷰 믹시 추천버튼 완전 통합!!!  삭제

    2010/06/11 00:46TRACKBACK FROM 스몰테일

    블로그 하단 추천버튼 많은 블로거들이 블로그 포스트 하단에 추천버튼을 달고 있습니다. 실제로 저 같은 경우에도 블로그에 추천버튼을 달지 않았을 때 보다 달았을 때 추천 수가 훨씬 많습니다. 그런데 추천버튼을 다는 것 까지는 좋은데.. 너무 많이 달다 보니 공간도 많이 차지하고 보기에도 별로 좋지 않습니다. 그래서 이번에 다음뷰와 믹스업 추천 버튼을 완전통합해서 보기 좋게 정리하는 방법에 대해서 써보겠습니다.^^ 뷰온, 믹스업 추천버튼 다음뷰와 믹시를..