2012/11/28

블로거에 라벨별 목록 페이지 만들기

차례

1. 개요

구글 블로거는 한국의 블로그 서비스들은 모두 가지고 있는 글목록 기능이 없다. 따라서 한 카테고리의 글을 한꺼번에 보는 것이 좀 어려운 편이다. 사이드바에 라벨 위젯을 설치한 경우 라벨명을 클릭해서 그 라벨에 있는 글만 모아서 보는 것이 가능하기는 하지만 라벨별 보기에서도 글이 목록 형태로 나오지 않고, 원래 템플릿에서 보여지는 그대로 보여진다. 즉, 만약 템플릿에서 글전체를 모두 보여주도록 되어 있다면, 라벨별 보기에서도 글이 다보여지고, 만약 템플릿에서 요약문을 보여주도록 되어있으면, 라벨별 보기에서도 요약문으로 보여주도록 되어있다. 따라서 라벨별 보기에서 글이 많을 경우 전체글을 모아서 보기 상당히 힘든 구조이다. 그것을 해결하기 위해 블로그 전체의 글을 라벨별로 분류해서 글목록만 보여주는 페이지를 만드는 방법이 있다. 아래의 스크린 샷을 보면 어떤 모양으로 나오는 지 알 수 있다. 아래의 그림에서 라벨제목을 누르면 그 라벨에 속하는 글목록이 나오는 방식이다. 현재 이 블로그 상단의 목차 메뉴를 클릭하면 어떻게 작동하는 지 확인할 수 있다.

2. 적용 방법

2.1. 템플릿 편집

  1. 블로거 대시보드 ⇒ 템플릿
  2. 백업/복원 버튼을 누르고, 거기에서 기존 템플릿 백업
  3. 백업/복원 창 닫고, HTML편집을 누른 후 ]]></b:skin> 검색
  4. 바로 그 위에 아래의 CSS 코드를 복사해서 붙여넣은 후 템플릿 저장 (폰트는 각자 알맞게 바꿔준다.)
  5. /*--------MBT TOC-----*/
    .judul-label{
    background-color:#E5ECF9;
    font-weight:bold;
    line-height:1.4em;
    margin-bottom:5px;
    overflow:hidden;
    white-space:nowrap;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    font: bold 16px/108% 나눔고딕,"맑은 고딕","Malgun Gothic",NanumGothic,Arial,Helvetica,sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 4px #AAAAAA;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    color: #e9e9e9;
    border: 2px solid white !important;
    background: #6e6e6e;
    background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
    background: -moz-linear-gradient(top,  #888,  #575757);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
    }
    .data-list{
    line-height:1.5em;
    margin-left:5px;
    margin-right:5px;
    padding-left:15px;
    padding-right:5px;
    white-space:nowrap;
    text-align:left;
    font-family:나눔고딕,"맑은 고딕","Malgun Gothic",NanumGothic,Arial,Helvetica,sans-serif;
    font-size:14px;
    }
    .list-ganjil{
    background-color:#F6F6F6;
    }
    .headactive{
        color: #fef4e9;
        border: 2px solid white !important;
        background: #1C8DFF;
        background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
        background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
    }
  6. jquery 스크립트를 추가한다. </head>를 검색해서 바로 그 위에 아래 코드를 입력한다. 이미 템플릿에 jquery 스크립트가 입력되어 있다면 이 단계는 건너뛴다.

    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
    

2.2. 글목록 페이지 작성

  1. 페이지를 생성 (새 글을 생성하는 것이 아니다!)
  2. "XYZ Table Of Contents"등과 같은 적절한 페이지 이름을 적는다.
  3. 편집창을 HTML모드로 바꾸고 아래의 코드를 붙여 넣는다.
  4. 이제 YOURDOMAINNAME.com를 자신의 블로그 주소로 바꾸고 저장한다.

    <script language="Javascript" type="text/javascript">
    //<![CDATA[
    eval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))};if('0'.replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'([3-9m-ru-yA-Z]|1\\w)'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('4(typeof jQuery==\'undefined\'){Q={};Q.s=7.createElement(\'script\');Q.s.1p=\'1q://1r.googleapis.1s/1r/libs/1t/1.10.2/1t.min.js\';7.getElementsByTagName(\'head\')[0].appendChild(Q.s)}3 5=F G();3 r=F G();3 v=F G();3 o=F G();3 8=F G();3 x=F G();3 m="H";3 11=1u;3 numChars=250;3 A=\'\';3 12=0;p loadtoc(k){p l(){4("y"in k.13){3 a=k.13.y.u;12=a;B=0;C(3 c=0;c<a;c++){3 b=k.13.y[c];3 h=b.R.$t;3 f=b.published.$t.1w(0,10);3 e;C(3 d=0;d<b.I.u;d++){4(b.I[d].1x==\'alternate\'){e=b.I[d].w;S}}3 i=\'\';C(3 d=0;d<b.I.u;d++){4(b.I[d].1x==\'enclosure\'){i=b.I[d].w;S}}3 j=\'\';4("14"in b){C(3 d=0;d<b.14.u;d++){j=b.14[d].term;3 g=j.1y(\';\');4(g!=-1){j=j.1w(0,g)}8[B]=j;5[B]=h;o[B]=f;r[B]=e;v[B]=i;4(c<10){x[B]=15}E{x[B]=1u};B=B+1}}}}}l();m="H";N(m);16();11=15;1z()}p filterPosts(a){1A(0,0);A=a;J(A)}p 1B(){16();A=\'\';J(A)}p N(h){p f(a,c){3 b=5[a];5[a]=5[c];5[c]=b;3 b=o[a];o[a]=o[c];o[c]=b;3 b=r[a];r[a]=r[c];r[c]=b;3 b=8[a];8[a]=8[c];8[c]=b;3 b=v[a];v[a]=v[c];v[c]=b;3 b=x[a];x[a]=x[c];x[c]=b}C(3 e=0;e<5.u-1;e++){C(3 d=e+1;d<5.u;d++){4(h=="H"){4(5[e]>5[d]){f(e,d)}}4(h=="17"){4(5[e]<5[d]){f(e,d)}}4(h=="18"){4(o[e]>o[d]){f(e,d)}}4(h=="T"){4(o[e]<o[d]){f(e,d)}}4(h=="1C"){4(8[e]>8[d]){f(e,d)}}}}}p 16(){m="1C";N(m);3 a=0;3 c=0;U(c<5.u){O=8[c];V=a;do{a=a+1}U(8[a]==O);c=a;19(V,a);4(c>5.u)S}}p 19(h,f){p e(a,c){3 b=5[a];5[a]=5[c];5[c]=b;3 b=o[a];o[a]=o[c];o[c]=b;3 b=r[a];r[a]=r[c];r[c]=b;3 b=8[a];8[a]=8[c];8[c]=b;3 b=v[a];v[a]=v[c];v[c]=b;3 b=x[a];x[a]=x[c];x[c]=b}C(3 d=h;d<f-1;d++){C(3 i=d+1;i<f;i++){4(5[d]>5[i]){e(d,i)}}}}p J(a){3 c=0;3 b=\'\';3 h=\'Judul 1a\';3 f=\'1b 1c sortir berdasarkan 1d\';3 e=\'Tanggal\';3 d=\'1b 1c Sortir bedasarkan tanggal\';3 i=\'Kategori\';3 j=\'\';4(m=="H"){f+=\' (descending)\';d+=\' (1e W)\'}4(m=="17"){f+=\' (1f)\';d+=\' (1e W)\'}4(m=="18"){f+=\' (1f)\';d+=\' (1e W)\'}4(m=="T"){f+=\' (1f)\';d+=\' (oldest W)\'}4(A!=\'\'){j=\'1b 1c menampilkan semua\'}b+=\'<1E>\';b+=\'<K>\';b+=\'<6 9="n-X-1g">\';b+=\'<a w="1h:1F();" R="\'+f+\'">\'+h+\'</a>\';b+=\'</6>\';b+=\'<6 9="n-X-1i">\';b+=\'<a w="1h:1G();" R="\'+d+\'">\'+e+\'</a>\';b+=\'</6>\';b+=\'<6 9="n-X-1j">\';b+=\'<a w="1h:1B();" R="\'+j+\'">\'+i+\'</a>\';b+=\'</6>\';b+=\'<6 9="n-X-1k">\';b+=\'Y MP3\';b+=\'</6>\';b+=\'</K>\';C(3 g=0;g<5.u;g++){4(a==\'\'){b+=\'<K><6 9="n-y-1g"><a w="\'+r[g]+\'">\'+5[g]+\'</a></6><6 9="n-y-1i">\'+o[g]+\'</6><6 9="n-y-1j">\'+8[g]+\'</6><6 9="n-y-1k"><a w="\'+v[g]+\'">Y</a></6></K>\';c++}E{z=8[g].1y(a);4(z!=-1){b+=\'<K><6 9="n-y-1g"><a w="\'+r[g]+\'">\'+5[g]+\'</a></6><6 9="n-y-1i">\'+o[g]+\'</6><6 9="n-y-1j">\'+8[g]+\'</6><6 9="n-y-1k"><a w="\'+v[g]+\'">Y</a></6></K>\';c++}}}b+=\'</1E>\';4(c==5.u){3 k=\'<L 9="n-1H">1l Semua \'+5.u+\' 1a<M/></L>\'}E{3 k=\'<L 9="n-1H">1l \'+c+\' artikel dengan kategori \\\'\';k+=A+\'\\\' dari \'+5.u+\' Total 1a<M/></L>\'}3 l=7.Z("n");l.1m=k+b}p 1z(){3 a=0;3 c=0;7.q(\'<D id="daftar-isi">\');U(c<5.u){O=8[c];7.q(\'<D 9="sublabel">\');7.q(\'<D 9="1d-label">\'+O+\'</D>\');7.q(\'<D 9="1d-P"><ol>\');V=a;3 b=\'1n\';do{4(b==\'1n\'){7.q(\'<li 9="1J-P P-ganjil">\');b=\'even\'}E{7.q(\'<li 9="1J-P P-genap">\');b=\'1n\'}7.q(\'<a w="\'+r[a]+\'">\'+5[a]+\'</a>\');4(x[a]==15){7.q(\' - <1K><em><L style="color: rgb(255, 0, 0);">New !!</L> </em></1K>\')};7.q(\'</li>\');a=a+1}U(8[a]==O);c=a;7.q(\'</ol></D></D>\');19(V,a);4(c>5.u)S}7.q(\'</D>\')}p 1F(){4(m=="H"){m="17"}E{m="H"}N(m);J(A)}p 1G(){4(m=="T"){m="18"}E{m="T"}N(m);J(A)}p 1M(){4(11){J(A);3 a=7.Z("1N")}E{alert("Just wait... TOC is loading")}}p hideToc(){3 a=7.Z("n");a.1m=\'\';3 c=7.Z("1N");c.1m=\'<a w="#" onclick="1A(0,0); 1M(); Effect.toggle(\'+"\'n-result\',\'blind\');"+\'">? 1l Daftar Isi</a> <img 1p="1q://radiorodja.googlepages.1s/new_1.gif"/>\'}p looptemp2(){C(3 a=0;a<12;a++){7.q(\'<M>\');7.q(\'Post Link    : <a w="\'+r[a]+\'">\'+5[a]+\'</a><M>\');7.q(\'Y mp3  : <a w="\'+v[a]+\'">\'+5[a]+\'</a><M>\');7.q(\'<M>\')}}',[],112,'|||var|if|postTitle|td|document|postLabels|class|||||||||||||sortBy|toc|postDate|function|write|postUrl|||length|postMp3|href|postBaru|entry||postFilter|ii|for|div|else|new|Array|titleasc|link|displayToc|tr|span|br|sortPosts|temp1|list|cekjq|title|break|datenewest|while|firsti|first|header|Download|getElementById||tocLoaded|numberfeed|feed|category|true|sortlabel|titledesc|dateoldest|sortPosts2|Artikel|Klik|untuk|judul|newest|ascending|col1|javascript|col2|col3|col4|Menampilkan|innerHTML|odd||src|http|ajax|com|jquery|false||substring|rel|lastIndexOf|displayToc2|scroll|allPosts|orderlabel||table|toggleTitleSort|toggleDateSort|note||data|strong||showToc|toclink'.split('|'),0,{}))
    //]]>
    </script>
    <script src="http://YOURDOMAINNAME.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
    <script type="text/javascript">
    var accToc=true;
    </script>
    <script language="Javascript" type="text/javascript">
    //<![CDATA[
    var $jxToc=jQuery.noConflict();function initAccToc(){$jxToc("#daftar-isi .judul-list").hide();$jxToc("#daftar-isi  .judul-label").css("cursor","pointer");$jxToc("#daftar-isi .judul-list:first").show();$jxToc("#daftar-isi .judul-label:first").addClass("headactive");$jxToc("#daftar-isi .judul-label").click(function(){if(accToc){var a=$jxToc(this).next();if((a.is(".judul-list"))&&(a.is(":visible"))){$jxToc(this).next().slideToggle("normal");$jxToc(this).toggleClass("headactive");return false}if((a.is(".judul-list"))&&(!a.is(":visible"))){$jxToc("#daftar-isi  .judul-list:visible").slideUp("normal");$jxToc("#daftar-isi  .judul-label").removeClass("headactive");a.slideDown("normal");$jxToc(this).addClass("headactive");return false}}else{$jxToc(this).next().slideToggle("normal");$jxToc(this).toggleClass("headactive")}})}$jxToc(document).ready(function(){initAccToc()})
    //]]>
    </script>

3. 목록 페이지 모양을 수정하기

기본적으로 선택된 라벨의 배경색은 파란색으로, 선택되지 않은 라벨의 색은 진회색으로 설정되어 있다. (아래 그림 참조)


만약 선택된 라벨의 색을 바꾸고 싶다면 앞에서 소개했던 CSS코드에서 간단히 #9dc2e7 와 #438cd2 를 수정하면 된다. 여기에서 #9dc2e7는 옅은 그림자를 가리키고 #438cd2는 어두운 그림자를 가리킨다. 취향에 맞게 어떤 색으로든 바꿀 수 있다. 색을 바꿀 때에는 HTML 색상표를 검색해서 참조하면 된다.

Print Friendly and PDF

댓글 32개 :

  1. 이런 스타일의 라벨 목록 페이지는 처음 보네요. 아주 독특합니다.
    그냥 Label Cloud 보다 훨씬 실용성이 있어 보이네요. 무엇보다 Kalkin님의 블로그 레이아웃과도 아주 잘 어울립니다.

    답글삭제
    답글
    1. 좋게 봐주셔서 감사합니다. ^^
      사실 티스토리에도 아이디가 있기는한데 이상하게 구글 블로거에 더 정이 갑니다. 그래서 블로거의 단점을 보완할 수 있는 팁들을 많이 찾아다니는 편입니다. 이 스크립트도 적용해보니 괜찮은 것 같아서 소개하는 글을 올렸습니다.
      그런데 외부 링크를 새창에서 여는 스크립트는 잘 적용되었나요? 형석님 말씀을 듣고 다시 글을 수정했는데 잘 적용이 되는 지 궁금합니다.

      삭제
    2. 그 스크립트가 잘 작동하지 않더라구요. 제 템플릿과 뭔가 충돌이 있는지도 모르겠습니다.

      삭제
    3. 두번째 스크립트를 다시 한 번 시도해 보세요. 제가 스크립트를 복사해서 붙여넣는 과정에서 줄바꾸기등이 문제가 되서 스크립트가 좀 이상했었나 봅니다.
      테스트 블로그에도 시험해보니 잘 작동하는 것 같습니다.
      혹시 어떻게 작동하는지 궁금하시면 아래 링크를 확인해보세요.
      기본적으로 스크립트의 작동방식은 현재 도메인과 다른 주소의 링크에 [target="_blank"]를 추가하는 방식입니다. 크롬의 개발자 도구등으로 링크를 확인하시면 스크립트가 제대로 작동하는지 확인하실 수 있을 겁니다.

      삭제
  2. 수정이 잘 되었네요. 잘 작동합니다. 감사합니다^^.

    답글삭제
    답글
    1. 다행이네요. 제가 글을 잘못 작성하는 바람에 고생시켜드려 죄송합니다.

      삭제
  3. 블로그를 제대로 운영하고자 수없이 검색을 하던중에 홍순철님의 블로그스팟을 보게되었는데 제가 블로그를 선택하는데 있어서 중요한 것들을 제시해 주는 유익한 블로그인거 같습니다. 소중한 포스팅 너무 잘 보고 갑니다. 앞으로 자주 들러 좋은 포스팅 봐야겠네요. 감사합니다^^

    답글삭제
    답글
    1. 부족한 것이 많은데 과분한 칭찬을 해주시는 것 같네요. 정말 감사합니다. ^^
      jackie님의 블로그도 깔끔하고 좋네요. 전 어쩌다보니 일상적인 글들은 잘 안쓰는 블로그가 되어가고 있어서 너무 딱딱한 블로그가 되는 것 같아서 좀 고민입니다.
      저도 jackie님처럼 일상적인 내용들도 함께 다뤄볼까 생각중입니다.
      저도 가끔 jackie님의 블로그에 들려볼게요.
      오늘 하루도 좋은 하루 되시길 빕니다.

      삭제
  4. 감사합니다^^ 소설 블로그의 소설을 다 삭제하고 새로운 마음으로 구글 블로그에 도전해보는데요 네이버 블로그보다 이게 더 재밌을 것 같아요^^ 감사합니다^^

    답글삭제
    답글
    1. 요즘 블로그에 신경을 못쓰느라 댓글을 이제야 봤습니다.
      저도 구글 블로거에서 네이버 블로그와는 다른 매력을 느끼시길 빌겠습니다. ^^

      삭제
  5. 잘 보았습니다. 혹시 출처를 알 수 있을까요?

    답글삭제
    답글
    1. 저도 검색해서 다시 찾았네요.
      아래 링크를 참조했습니다.

      http://mmktricks.blogspot.kr/2011/06/how-to-create-table-of-contents-page.html

      삭제
  6. 안녕하세요. 좋은 예제 감사드립니다. 보고 따라 해봤는데 잘 안되네요.. 맨 아래 댓글로 달아주신 주소로 들어가면 마지막 페이지 만들어서 붙여 넣는 코드 부분이 이곳과 다르게 작성되어 있는데 여기 예제대로 하면 작동이 안되고... 원문대로 하면 작동은 되지만 악성 코드 감지로 나오는데... 방법이 없을까요?

    답글삭제
    답글
    1. 소스에 문제가 있었나 보네요. 수정했으니, 다시 한 번 시도해 보세요.

      삭제
    2. 감사합니다. 새로 해보니까 잘 작동 됩니다. ^^ 어디가 문제가 있었는지 다시 봐도 모르겠네요.. 웹 코딩 이거 아무나 하는게 아닌가보네요 ^^;;

      삭제
    3. 블로거에 특수문자가 제대로 입력이 안 되서 변환하는 와중에 오류가 있었나 봅니다. 이제 잘 되신다니 다행이네요. ^^

      삭제
    4. 저는 아직 안되서 ㅠㅠ 저도 위에 질문하신분과 똑같은 내용인데
      저는 변경된 소스를 복사해도 변경이 되지않네요,,,,

      삭제
    5. 어떻게 안되는지 증상을 모르니, 원인을 파악 못하겠네요.
      혹시 모르니 다음 링크에 있는 스크립트를 처음 스크립트 부분을 지우고 대신 넣어보세요.
      daftarisiv2-pack.js

      삭제
  7. 좋은 글 잘보고 갑니다
    여기서는 모든 전체글을 보여주는걸로 나오는데,
    혹시 특정 Label을 선택해서 보여줄수 있을까요?

    답글삭제
    답글
    1. 특정 Label을 선택해서 보여주려면 스크립트를 수정해야 하는데, 제가 그럴 능력이 없네요. 아래 링크는 스크립트 원본입니다. 보시고 수정 가능하시면 수정해서 사용하세요. 도움이 못 되어서 죄송합니다.
      Blogger-TOC.js

      삭제
  8. 너무너무 좋습니다^^ 감사합니다ㅎㅎ!

    답글삭제
    답글
    1. 저도 블로그에 방문해주셔서 감사합니다. ^^

      삭제
  9. 답글
    1. 잘 적용되셨다니 저도 기분 좋네요. ^^

      삭제
  10. 좋은 자료이네요, 감사합니다.
    저도 적용을 해보았는데요, 제가 가진 라벨 을 모두 다 나타내어서 조금 많아 보입니다.
    선택한 라벨만 나타나게끔 할수는 없을까요?

    아니면 주요 타이틀 밑에 소 제목 들이 있게끔 할수 없을까요?

    답변 부탁드립니다.


    답글삭제
    답글
    1. 저도 그렇게 해보고 싶은데, 제가 자바스크립트를 짤 능력이 안되서 팁에서 소개해드린 스크립트를 수정할수가 없네요. 혹시 자바스크립트를 할 줄 아신다면 소스를 직접 수정하셔야 할 것 같습니다.
      도움이 못되서 유감입니다.

      삭제
  11. 좋은 정보 감사합니다. 제 블로그에도 적용했어요 ㅋㅋㅋ

    답글삭제
  12. 찾고있던건데
    정말 감사합니다!!
    제 블로긍도 적용했네요
    복받으실 거에요!!

    답글삭제
  13. 블로그스팟 목록기능을 찾다가 포럼에서 글을 보고 방문했습니다.
    꼭 필요한 기능이라 바로 적용했어요.
    그런데 new!! 라고 뜨는 부분을 삭제하고, 글순서를 최신 글이 위에 오도록 배치하려면 어떻게 해야할까요?

    답글삭제
  14. 좋은 정보 감사합니다. 많은 도움이 됐습니다.^^

    답글삭제
  15. 안녕하세요! 최근에 블로거를 사용하기 시작하면서 블로거 수정에 도움을 많이 받고 있습니다.
    근데 혹시 이 포스팅에서 처럼 하긴 했는데 특정 라벨을 선택할 순 없을까요? 2013년도 댓글에 같은 글이 있어서 봤는데 안된다고 하셔서...
    혹시 지금은 도와주실 수 있으신가 해서 글 남겨봅니다. 감사합니다.

    답글삭제
  16. 더해, 글을 찾다가 발견했는데
    혹시

    이 부분을 작성자님이 올리신 부분에 넣어서 라벨을 선택할 수 있을까요?

    답글삭제