구글 블로거에 라벨별 목록 페이지 만드는 방법

구글 블로거의 라벨별 목록 페이지 만드는 방법 입니다. (전체 둘러보기)

소스코드를 건드려야 하므로 작업전 백업을 꼭 해주세요.
(대시보드 -> 템플릿 -> 백업/복원)

HTML편집에 들어가 "]]></b:skin>"를 검색 합니다.

아래의 코드를 "]]></b:skin>" 위에 붙여넣기 합니다.

------------------------------------------------------------------

/*--------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');
}

------------------------------------------------------------------


HTML편집에 들어가 "</head>"를 검색 합니다.

아래의 코드를 "</head>" 위에 붙여넣기 합니다.

------------------------------------------------------------------

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

------------------------------------------------------------------

페이지를 생성 합니다. (글이 아닌 페이지 생성 입니다.)

페이지 작성시 HTML모드로 전환 후 아래의 코드를 입력 합니다.
코드중  "http://YOURDOMAINNAME.com"는 자신의 URL로 바꾸셔야 합니다.

------------------------------------------------------------------

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

------------------------------------------------------------------ 

여기까지 끝났으면 레이아웃 모드에서 페이지를 추가 합니다.
페이지 추가후 관리 메뉴에서 설정만 해주면 모든 작업이 끝나게 됩니다.

예) http://snow0755.blogspot.kr/p/lynnboo.html