Posts List

2014년 8월 7일 목요일

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

http://www.kalkin.tk/2012/11/blogger-toc-page-maker.html

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

차례

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');
}
  5. 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
    
작성자: 시간:
라벨:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)