Rooroorooroo [Issues & Opinions]: 블로거 페이징 시스템(HTML, jQuery 필요)140607

주의사항:JS에 대한 기초적인 지식을 필요로 합니다.

#####140607 버전#####

즉석으로 만든 블로그에 적용해 보았다. 괄호 안의 숫자는 댓글 수이다.

필요사항:
-블로거가 공개(Public) 상태일 것.(피드 접속시 필요)
-아이템 페이지(item type; 글 하나만 보는 페이지)에서 글의 시간을 읽을 수 있을 것.(abbr 태그 등)
※예를 들면 2013-01-21T15:49:00+09:00 과 같은 형식으로 제공돼야 한다.
-레이블 이름들이 제공될 것.(코드에서 'lj' 변수 편집)
-아이템 페이지에서 해당 포스트에 적용된 레이블들이 'label_tags' 클래스로 제공될 것.
※일반적인 블로거 템플릿의 경우 템플릿에서 <b:includable id='post' var='post'> 태그 안의 아무 데에나
<b:if cond='data:post.labels'>
<style>
.label_tags{
display:none;
} </style>
<b:loop values='data:post.labels' var='label'><a class='label_tags' rel='tag'><data:label.name/></a></b:loop>
</b:if>
를 붙여넣으면 된다.
-페이지의 타이틀과 시간을 제공하는 개체가 앞서 나온 뒤에 다음 코드를 삽입할 것. 일반적으로 레이아웃에서 본문 아래에 삽입하면 된다.
-디자인 한계로 버튼들의 크기가 바뀌면 안된다. 만약 레이블 이름이 매우 길어서 창의 크기를 바꾸면서 버튼이 한 줄에서 두 줄이 되는 등 크기가 바뀌면 노란색 오버레이 객체(버튼 클릭했을 때 불빛 들어오는 효과)의 크기와 달라지게 된다.

※cache_2, ntoi, ntoi2, ljl, lj라는 이름의 변수를 사용하므로 다른 스크립트와 중복되지 않도록 주의한다.
※페이징은 글 10개씩 한다.

아래 코드를 상황에 맞게 편집해서 붙여넣는다.

<style>
.kotica_l_bt{
position:relative;
}
.kotica_l_bg{
position:absolute;
top:0;
left:0;
opacity:0;
background-color:#ffc;
}
#kotica_w{
position:relative;
display:none;
background-color:#fff;
}
#kotica_c{
cursor:pointer;
position:absolute;
right:0;
}
#kotica_p_n{
display:inline-block;
border:0;
background-color:#e9e9e9;
padding:3px;
}
#kotica_p_o{
display:inline-block;
border:0;
background-color:#e9e9e9;
padding:3px;
}
#kotica_p_i{
font-family:monospace;
border-bottom:1px solid #666;
padding:3px;
text-align:center;
}
#kotica_p_b{
padding:3px;
background-color:#e9e9e9;
}
.kotica_l_bt{
cursor:pointer;
display:inline-block;
padding:3px;
border:1px solid #666;
background-color:#e9e9e9;
margin:0 -1px -1px 0;
}
#kotica_li{
border-top:1px solid #666;
min-height:10px;
}
.kotica_li_p{
padding: 1px 0;
border-bottom: 1px solid #ccc;
}
.kotica_li_p:last-child{
border-bottom:0;
}
.kotica_dates{
float:right;
padding: 0 2px;
}
</style>
<div id='kotica_w'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS1USikHipOMFoRapAgn4n8TNlNtXm_Bx8RroCGe1nD0hHd7nYRFff1X0CphsBwty9d3NIaZ33UC8j-bnOtoS5BKkZFXEPXYRM159GwrHt3gadPe6WDtl-7TkHr_TXMbDZV9MUp-l2OTI/s1600/magnifier.png" /><span id='kotica_c'>×</span><br/>
<div id='kotica_l'><div class='kotica_l_bt'>전체</div></div>
<div id='kotica_li'>
<div style='text-align=center;'>글목록</div>
</div>
<div id='kotica_p_w' style='text-align:center;'>
<img id="kotica_i_l" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8tjtj_dFWVJIMlDralMr6X2Z2BavjAci55-V-1S3cEnxmry6wK-rJahVpjs6a0s_TkMvtzuj7i6Wi7vMMB5fwv_hmH0eWhGph9OLvmrPWuTrcYO5YLrHouOslWO_Zsf6znEMi7sLS0vA/s1600/ajax-loader.gif" style="display: none;" />
<span id='kotica_i'></span><br/>
<button id='kotica_p_n'>이전 페이지</button>
GOTO<input id='kotica_p_i' type='text' size='3' value='1'/><button id='kotica_p_b'>GO</button>  
<button id='kotica_p_o'>다음 페이지</button><br/><br/>
</div>
</div>
<script>
/* created by http://secondforsss.blogspot.com */
var cache_2;
var ntoi;
var ntoi2;
var kotica_cb_a;
var kotica_token;
var kotica_a;
var kotica_save_total;
var kotica_save_ix_n;
var kotica_save_p;
var kotica_save_s;
var kotica_total;
var kotica_ix_n;
var kotica_p;
var kotica_s;
var kotica_cc;
var kotica_ce;
var kotica_sh;
var kotica_ix;
var kotica_tot;
var kotica_sl;
var kotica_sl_p;
var kotica_cct;
var ljl=[];
var lj=[
{"n":"레이블1"},
{"n":"레이블2"},
...
{"n":"마지막 레이블(줄 끝에 쉼표 없음)"}
];

ntoi=function(n){
var c=-1;
for(var i=0;i!=lj.length;i++){
if(n==lj[i].n){c=i;}
}
return c;
};

cache_2=$('#kotica_w');
kotica_cb_a={};
kotica_token=0;
kotica_a=-1;
kotica_s=-1;
kotica_cc=function(){
if(kotica_a!=-1){
kotica_cb_a['p'+kotica_token]=function(s){console.log("Call has been initiated");};
kotica_token++;
kotica_a=-1;
kotica_p=false;
cache_2.find('#kotica_i').text('재시도해주세요.');
cache_2.find('#kotica_i_l').css('display', 'none');
}
};
kotica_ce=function(s){
return document.createElement(s);
};
kotica_sh=function(kotica_json3){
if(typeof kotica_json3.feed.entry=="undefined"){
var temp_kotica_p=kotica_p;
clearTimeout(kotica_cct);
kotica_cc();
var temp_label="전체";
if(kotica_s!=0) temp_label=kotica_s;
cache_2.find('#kotica_i').html("결과가 없습니다.<br/>라벨:"+temp_label+"<br/>호출 페이지:"+temp_kotica_p);
return;
}
var temp_bt=cache_2.find('.kotica_l_bt');
for(var i=0; i<temp_bt.length; i++){
if(kotica_s==temp_bt.eq(i).text()) temp_bt.eq(i).css('background-color', '#fff');
else temp_bt.eq(i).css('background-color', '#e9e9e9');
}
if(kotica_s==0) temp_bt.eq(0).css('background-color', '#fff');
var entries=kotica_json3.feed.entry;
var ctnr=cache_2.find('#kotica_li');
ctnr.children().remove();
for(var i=0; i<entries.length; i++){
var e2=$(kotica_ce('div')).attr('class', 'kotica_li_p');
var e=kotica_ce('div');
$(e).css('clear', 'both');
e2[0].appendChild(e);
var e=kotica_ce('span');
$(e).text(entries[i].published.$t.split("T")[0]).attr('class', 'kotica_dates');
e2[0].appendChild(e);
if(typeof entries[i].media$thumbnail!="undefined"){
var e=kotica_ce('img');
$(e).css({
'width':'16px',
'height':'16px'
});
e.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirV8UJmi3OhsoREBRH-c-bHjsxRiLYqdMtUafxjkcX3ONJD8S5lcoKCfbvkVI6o-7Wtih6p7tmPX6EUvtXe3YdaZhBR_sqD6kwH90g7L9pygjd4uxDSLIxOnzQMrzurKhYgJPZaBSZLTo/s1600/image.png";
e2[0].appendChild(e);
}
var e=kotica_ce('a');
e.href=entries[i].link[4].href.replace(/\\\//g,"/")+"?p-label="+kotica_s+"&p-page="+kotica_p+"&p-total="+kotica_total;
$(e).text(entries[i].title.$t+"("+entries[i].thr$total.$t+")");
if(entries[i].title.$t==글 제목) $(e).css('font-weight','bold');
/* 일반적으로 document.title 을 사용하면 [블로그 이름 + 공백 + 글 제목] 이 반환된다. 따라서 이 텍스트를 글 제목으로 바꿔야 하는데, 필자의 경우 split 메소드를 사용했다.
document.title -> "Roor...Opinions]: 글 제목..."
document.title.split("Opinions]: ")[1] -> "글 제목..."
*/
e2[0].appendChild(e);
ctnr[0].appendChild(e2[0]);
}
var temp_label="";
if(kotica_a!=0) temp_label=kotica_s+" ";
cache_2.find('#kotica_i').text(temp_label+"페이지 "+kotica_p+"/"+(parseInt((kotica_total-1)/10)+1));
cache_2.find('#kotica_i_l').css('display', 'none');
clearTimeout(kotica_cct);
var e=cache_2.find('.kotica_l_bt');
if(kotica_s==0){
$(e[0].children).css('opacity','0.7').stop(true, true).animate({opacity:0},1000);
}else{
for(var ii=0; ii<e.length; ii++){
if(e.eq(ii).text()==kotica_s){
$(e[ii].children).eq(0).css('opacity','0.7').stop(true, true).animate({opacity:0},1000);
}
}
}
kotica_save_total=kotica_total;
kotica_save_ix_n=kotica_ix_n;
kotica_save_p=kotica_p;
kotica_save_s=kotica_s;
kotica_a=-1;
};

kotica_ix=function(kotica_json2){
if(kotica_json2.feed.openSearch$totalResults.$t==0) kotica_ix_n=kotica_total;
else kotica_ix_n=kotica_total-parseInt(kotica_json2.feed.openSearch$totalResults.$t)+1;
kotica_p=parseInt((kotica_ix_n-1)/10)+1;
var e=kotica_ce('script');
e.async=true;
var path="";
if(kotica_a!=0) path="/-/"+encodeURIComponent(kotica_s);
kotica_cb_a['p'+kotica_token]=function(s){kotica_sh(s);};
e.src="/feeds/posts/summary"+path+"?alt=json-in-script&start-index="+(kotica_p*10-9)+"&max-results=10&callback=kotica_cb_a.p"+kotica_token;
cache_2[0].appendChild(e);
};

kotica_tot=function(kotica_json){
kotica_total=parseInt(kotica_json.feed.openSearch$totalResults.$t);
if(kotica_total==0){
cache_2.find('#kotica_i').text("잘못된 레이블입니다.");
clearTimeout(kotica_cct);
kotica_cc();
return;
}
var e=kotica_ce('script');
e.async=true;
var path="";
if(kotica_a!=0) path="/-/"+encodeURIComponent(kotica_s);
/*************************/

var ts=$(abbr태그);
/*1. 일반적으로 'abbr.published'로 설정해주면 된다.
*/

if(ts.length!=0) ts=ts.attr('title');
/*2. abbr 태그에서 title 속성을 이용해 시간을 나타내는 문자열을 얻는다. 이 부분은 개인적으로 편집할 수 있다.
*/

else ts="2050-05-05T21:10:00+09:00";
/*3. abbr 태그를 찾지 못했을 땐 2050년을 사용한다.
*/

/*위의 세 과정은 현재 페이지 글을 포함하는 페이징 구간을 찾는 과정인데, 이것이 복잡하다면 위의 코드 세 줄을 지우고 단순히
var ts="2050-05-05T21:10:00+09:00";
라고 써도 작동한다. 대신 무조건 최신글 10개가 출력된다.
*/

/*************************/
var kotica_d=new Date();
kotica_d.setFullYear(parseInt(ts.substr(0,4)),parseInt(ts.substr(5,2))-1,parseInt(ts.substr(8,2)));
kotica_d.setHours(parseInt(ts.substr(11,2)),parseInt(ts.substr(14,2)),parseInt(ts.substr(17,2)));
var kotica_do;
kotica_do=parseInt(ts.substr(20,2))*60+parseInt(ts.substr(23,2));
if(ts.substr(19,1)=="+") kotica_do=-kotica_do;
kotica_d.setTime(kotica_d.getTime()+kotica_do*60*1000);
var temp=[kotica_d.getMonth()+1,kotica_d.getDate(),kotica_d.getHours(),kotica_d.getMinutes(),kotica_d.getSeconds()];
if(temp[0]<10) temp[0]="0"+temp[0];
if(temp[1]<10) temp[1]="0"+temp[1];
if(temp[2]<10) temp[2]="0"+temp[2];
if(temp[3]<10) temp[3]="0"+temp[3];
if(temp[4]<10) temp[4]="0"+temp[4];
kotica_d=kotica_d.getFullYear()+"-"+temp[0]+"-"+temp[1]+"T"+temp[2]+":"+temp[3]+":"+temp[4]+".5";
kotica_cb_a['p'+kotica_token]=function(s){kotica_ix(s);};
e.src="/feeds/posts/summary"+path+"?alt=json-in-script&published-max="+kotica_d+"&max-results=0&callback=kotica_cb_a.p"+kotica_token;
cache_2[0].appendChild(e);
};
kotica_sl=function(a){
if(kotica_a!=-1) return;
cache_2.find('#kotica_i').text("");
cache_2.find('#kotica_i_l').css('display', 'inline');
kotica_cct=setTimeout(function(){kotica_cc();}, 3000);
kotica_a=a;
kotica_cb_a["p"+kotica_token]=function(s){kotica_tot(s);};
kotica_s=a;
var e=kotica_ce('script');
e.async=true;
var path="";
if(kotica_a!=0) path="/-/"+encodeURIComponent(kotica_s);
e.src="/feeds/posts/summary"+path+"?alt=json-in-script&max-results=0&callback=kotica_cb_a.p"+kotica_token;
cache_2[0].appendChild(e);
};
kotica_sl_p=function(a){
if(kotica_a!=-1) return;
cache_2.find('#kotica_i').text("");
cache_2.find('#kotica_i_l').css('display', 'inline');
kotica_cct=setTimeout(function(){kotica_cc();}, 3000);
kotica_a=a;
kotica_cb_a["p"+kotica_token]=function(s){kotica_sh(s);};
kotica_s=a;
var e=kotica_ce('script');
e.async=true;
var path="";
if(kotica_a!=0) path="/-/"+encodeURIComponent(kotica_s);
e.src="/feeds/posts/summary"+path+"?alt=json-in-script&start-index="+(kotica_p*10-9)+"&max-results=10&callback=kotica_cb_a.p"+kotica_token;
cache_2[0].appendChild(e);
};
cache_2.find('#kotica_p_n')[0].onclick=function(){
if(kotica_save_s==-1){
cache_2.find('#kotica_i').text("레이블을 선택해주세요.");
return;
}
if(kotica_save_p==1){
cache_2.find('#kotica_i').text("첫 페이지입니다.");
return;
}
kotica_p=kotica_save_p-1;
kotica_sl_p(kotica_save_s);
};
cache_2.find('#kotica_p_o')[0].onclick=function(){
if(kotica_save_s==-1){
cache_2.find('#kotica_i').text("레이블을 선택해주세요.");
return;
}
kotica_p=kotica_save_p+1;
kotica_sl_p(kotica_save_s);
};
cache_2.find('#kotica_p_b')[0].onclick=function(){
if(kotica_save_s==-1){
cache_2.find('#kotica_i').text("레이블을 선택해주세요.");
return;
}
var sel_p=parseInt(cache_2.find('#kotica_p_i').val());
if(sel_p<1){
cache_2.find('#kotica_i').text("1 이상을 입력해주세요.");
return;
}
kotica_p=sel_p;
kotica_sl_p(kotica_save_s);
};
cache_2.find('#kotica_c')[0].onclick=function(){
cache_2.find('.kotica_li_p').remove();
};
cache_2.css('display', 'block');
(function(){
if(Is this item page){
/*일반적으로 블로거 템플릿에서 <head> 태그 또는 <body> 태그 첫부분 쯤에
<script>var item_type=false;
<b:if cond='data:blog.pageType == "item"'>
item_type=true;
</b:if>
</script>
를 쓰고 위의 조건문에는

item_type==true

라고 쓰면 된다.
*/
if(window.location.search.indexOf("p-label=")!=-1){
kotica_save_s=decodeURIComponent(window.location.search.split("p-label=")[1]).replace(/\+/g," ");
kotica_save_s=kotica_save_s.split("&")[0].split("#")[0];
if(kotica_save_s=="0") kotica_save_s=0;
kotica_save_p=parseInt(window.location.search.split("p-page=")[1].split("&")[0].split("#")[0]);
kotica_save_total=parseInt(window.location.search.split("p-total=")[1].split("&")[0].split("#")[0]);
kotica_total=kotica_save_total;
kotica_s=kotica_save_s;
kotica_p=kotica_save_p;
kotica_sl_p(kotica_save_s);
}else{
if(window.addEventListener){
window.addEventListener("load",function(){kotica_sl(0);},false);
}else if (window.attachEvent) {
window.attachEvent("onload", function(){kotica_sl(0);});
}
}
return;
}
})();

(function(){
var j=$('.label_tags');
for(var i=0;i!=j.length;i++){
ljl.push(j.eq(i).text());
var temp_tag=kotica_ce('span');
$(temp_tag).text(j.eq(i).text()).attr('class', 'kotica_ids').css('display', 'none');
j[i].appendChild(temp_tag);
j[i].onclick=function(){
$(window).scrollTop(cache_2.offset().top);
kotica_sl($(this.children).filter('.kotica_ids').text());
};
}
})();

ntoi2=function(n){
var c=-1;
for(var i=0;i!=ljl.length;i++){
if(n==ljl[i]){c=i;}
}
return c;
};

(function(){ /* LAUNCHER */
var e=cache_2.find('#kotica_l');
var e2=e.children()[0];
var e3=kotica_ce('div');
e2.onclick=function(){kotica_sl($(this).text());};
$(e3).attr('class', 'kotica_l_bg').css({
'width' : ($(e2).width()+7)+'px',
'height' : ($(e2).height()+7)+'px'
});
e2.appendChild(e3);
e.children()[0].onclick=function(){kotica_sl(0);};
if(Is this item page){
for(var i=0; i<ljl.length; i++){
var e2=kotica_ce('div');
var e3=kotica_ce('div');
$(e2).text(ljl[i]).attr('class', 'kotica_l_bt kotica_b_ol');
e2.onclick=function(){kotica_sl($(this).text());};
e[0].appendChild(e2);
$(e3).attr('class', 'kotica_l_bg').css({
'width' : ($(e2).width()+7)+'px',
'height' : ($(e2).height()+7)+'px'
});
e2.appendChild(e3);
}
}
var e2=kotica_ce('div');
$(e2).text("모든 레이블 보기").attr('class', 'kotica_l_bt');
e2.onclick=function(){
var e=cache_2.find('#kotica_l');
var temp_i_h=e.height();
cache_2.find('.kotica_b_ol').remove();
for(var i=0; i<lj.length; i++){
var e2=kotica_ce('div');
var e3=kotica_ce('div');
$(e2).text(lj[i].n).attr('class', 'kotica_l_bt kotica_b_al');
if(Is this item page){
if(ntoi2(lj[i].n)!=-1){
$(e2).css('font-weight', 'bold');
}
}
e2.onclick=function(){kotica_sl($(this).text());};
e[0].appendChild(e2);
$(e3).attr('class', 'kotica_l_bg').css({
'width' : ($(e2).width()+7)+'px',
'height' : ($(e2).height()+7)+'px'
});
e2.appendChild(e3);
}
$(this).remove();
var temp_f_h=e.height();
e.css('height', temp_i_h+'px').animate({
height : temp_f_h+'px'
}, 300, function(){e.css('height', 'auto');});
};
e[0].appendChild(e2);
})();
</script>

코드 끝

#####140501 버전#####

국내 포털 블로그에서 제공하는 보편적인 페이징 시스템과 유사한 서비스의 제공을 목표로 한다.

위와 같이 레이블 탭을 추가한 뒤 각 탭을 누르면 현재 글의 페이지(기본값 글 10개)로 이동하며, 이전, 다음 페이지도 볼 수 있다.

필요사항:
-블로거가 공개 상태일 것.(피드 접속시 필요)
-글의 시간을 읽을 수 있을 것.(abbr 태그 등)
-글에 적용된 레이블 이름들이 제공될 것.(배열array 사용)

아래 코드를 각자의 상황에 맞게 편집하여 그대로 붙여넣으면 된다.

<style>
#kotica_w{
position:relative;
display:none;
}
#kotica_p_n{
cursor:pointer;display:inline-block;
position:absolute;
left:0;
}
#kotica_p_o{
cursor:pointer;display:inline-block;
position:absolute;
right:0;
}
#kotica_l>span{
cursor:pointer;
display:inline-block;
padding:3px;
border:1px solid #666;
margin:0 -1px -1px 0;
}
#kotica_li{
border:1px solid #666;
min-height:10px;
}
</style>
<div id='kotica_w'>
<div id='kotica_i'></div>
<div id='kotica_l'><span>전체</span></div>
<div id='kotica_li'>
</div>
<span id='kotica_p_n'>이전 페이지</span>
<span id='kotica_p_o'>다음 페이지</span>
</div>
<script>
/* Made by secondforsss.blogspot.com */
var kotica_a=-1;
var kotica_total;
var kotica_ix_n;
var kotica_p;
var kotica_s;
function ce(s){
return document.body.createElement(s);
}
function kotica_sh(kotica_json3){
var entries=kotica_json3.feed.entry;
var ctnr=$('#kotica_li');
for(var i=0; i<entries.length; i++){
var e=ce('a');
e.href=entries[i].link[4].href.replace(/\\\//g,"/");
$(e).text(entries[i].title.$t);
ctnr[0].appendChild(e);
if(i!=entries.length) ctnr[0].appendChild(ce('br'));
}
$('#kotica_i').text("페이지 "+kotica_p);
kotica_a=-1;
}
function kotica_ix(kotica_json2){
kotica_ix_n=kotica_total-parseInt(kotica_json2.feed.openSearch$totalResults.$t)+1;
kotica_p=parseInt((kotica_ix_n-1)/10)+1;
var e=ce('script');
e.async=true;
var path="";
if(kotica_a!=0) path="/-/"+encodeURIComponent(kotica_a);
e.src="/feeds/posts/summary"+path+"?alt=json-in-script&start-index="+(kotica_p*10-9)+"&max-results=10&callback=kotica_sh";
document.body.appendChild(e);
}
function kotica_tot(kotica_json){
kotica_total=parseInt(kotica_json.feed.openSearch$totalResults.$t);
var e=ce('script');
e.async=true;
var path="";
if(kotica_a!=0) path="/-/"+encodeURIComponent(kotica_a);
var ts=$('abbr.published').attr('title');
/* 1.
** 형식 : 2013-01-21T15:49:00+09:00
** 위와 같은 문자열을 'ts' 변수에 할당한다.
*/
var kotica_d=new Date();
kotica_d.setFullYear(parseInt(ts.substr(0,4)),parseInt(ts.substr(5,2))-1,parseInt(ts.substr(8,2)));
kotica_d.setHours(parseInt(ts.substr(11,2)),parseInt(ts.substr(14,2)),parseInt(ts.substr(17,2)));
var kotica_do;
kotica_do=parseInt(ts.substr(20,2))*60+parseInt(ts.substr(23,2));
if(ts.substr(19,1)=="+") kotica_do=-kotica_do;
kotica_d.setTime(kotica_d.getTime()+kotica_do*60*1000);
var temp=[kotica_d.getMonth()+1,kotica_d.getDate(),kotica_d.getHours(),kotica_d.getMinutes(),kotica_d.getSeconds()];
if(temp[0]<10) temp[0]="0"+temp[0];
if(temp[1]<10) temp[1]="0"+temp[1];
if(temp[2]<10) temp[2]="0"+temp[2];
if(temp[3]<10) temp[3]="0"+temp[3];
if(temp[4]<10) temp[4]="0"+temp[4];
kotica_d=kotica_d.getFullYear()+"-"+temp[0]+"-"+temp[1]+"T"+temp[2]+":"+temp[3]+":"+temp[4]+".5";
e.src="/feeds/posts/summary"+path+"?alt=json-in-script&published-max="+kotica_d+"&max-results=0&callback=kotica_ix";
document.body.appendChild(e);
}
function kotica_sl(a){
if(kotica_a!=-1) return;
$('#kotica_i').text("로딩중...");
kotica_a=a;
kotica_s=a;
$('#kotica_li').children().remove();
var e=ce('script');
e.async=true;
var path="";
if(kotica_a!=0) path="/-/"+encodeURIComponent(kotica_a);
e.src="/feeds/posts/summary"+path+"?alt=json-in-script&max-results=0&callback=kotica_tot";
document.body.appendChild(e);
}
(function(){
if(페이징 시스템을 실행하지 않을 조건) return;
/* 2.
** 이 부분이 시스템의 부팅 부분이다.
*/
$('#kotica_w').css('display','block');
var e=$('#kotica_l');
e.children()[0].onclick=function(){kotica_sl(0);};
for(var i=0; i<labelArray.length; i++){
/* 3.
** labelArray 자리에 해당 글의 레이블들을
** 모은 배열 변수를 할당한다.
*/
var e2=ce('span');
$(e2).text(labelArray[i]);
e2.onclick=function(){kotica_sl($(this).text());};
e[0].appendChild(e2);
}
})();
function kotica_sl_p(a){
if(kotica_a!=-1) return;
$('#kotica_i').text("로딩중...");
kotica_a=a;
$('#kotica_li').children().remove();
var e=ce('script');
e.async=true;
var path="";
if(kotica_a!=0) path="/-/"+encodeURIComponent(kotica_a);
e.src="/feeds/posts/summary"+path+"?alt=json-in-script&start-index="+(kotica_p*10-9)+"&max-results=10&callback=kotica_sh";
document.body.appendChild(e);
}
$('#kotica_p_n')[0].onclick=function(){
if(typeof kotica_p=="number"&&kotica_p>1){kotica_p--;
kotica_sl_p(kotica_s);}
else $('#kotica_i').text("첫 페이지입니다.");
};
$('#kotica_p_o')[0].onclick=function(){
if(typeof kotica_p=="number"&&(kotica_p*10<kotica_total)){kotica_p++;
kotica_sl_p(kotica_s);}
else $('#kotica_i').text("마지막("+kotica_p+") 페이지입니다.");
};
</script>

1. 'ts' 변수에 날짜 문자열 할당하기
블로거는 기본적으로 시간 속성을 가진 abbr 태그를 가지고 있다. 만약 기본 블로거 스킨을 이용 중이라면 소스 코드를 열어 'published'로 검색을 해보면
<abbr class='published' itemprop='datePublished' title='2013-01-21T15:49:00+09:00'>월요일, 1월 21, 2013</abbr> 이런 형식의 태그를 볼 수 있을 것이다.

2. 실행하지 않을 조건
이 부분은 블로거 템플릿에서 제공되는 기능을 이용해 페이지가 글에 대한 것인지 아카이브인지 등등을 판단하여 JS 변수로 저장해서 실행을 결정하는 등 자신에게 맞게 변형하면 된다.
예시:
블로거 템플릿에서
<script>var item_type=false;
<b:if cond='data:blog.pageType == "item"'> /* 글 하나만 보는 페이지 */
item_type=true;
</b:if>
</script>

코드에서

if(item_type==false) return;

3. 'labelArray'(임의로 붙인 이름)에 레이블 이름들 할당하기

이 경우는 글의 하단에 붙는 레이블 링크들을 JS를 이용해 수집하거나 하는 방법을 써야 하는데, 아마 JS에 문외한이라면 가장 어려운 부분이 될 것 같다.

참고로 JS언어에서 배열의 형식은 []로 나타내며,

var labelArray=["레이블1", "레이블2"];

와 같이 쓰면 된다.

간단히 배우려면 http://www.w3schools.com 등의 사이트 참고. CSS나 JS에 관심이 있다면 살짝 응용할 수 있다.