구글 블로그(Blogger) 상단에 글 목록(Post List) 만들기

  블로그를 보다보면 포스팅 목록들 위쪽에 글 목록이 페이징 처리되어 보여주는 기능이 있습니다.

구글 블로거에서도 라벨을 이용하여 글 목록을 만들 수 있습니다.


1. 가젯 추가하기
2. 가젯 배치하기
3. 저장하기




1. 가젯 추가하기

내 블로그 관리화면에서 [레이아웃] 을 클릭하면 레이아웃 관련화면이 나옵니다.

여기서 [가젯 추가]를 선택합니다.

가젯 추가 윈도우가 나타나면 여러가지 가젯 목록이 보이는데 아래쪽으로 내려가다보면 [HTML/JavaScript] 항목이 보입니다. 

버튼을 클릭합니다.

아래의 그림처럼 HTML/JavaScript 구성 윈도우가 나타나면 제목을 입력하고,

그림 아래에 [붙여넣을 소스코드]를 복사하여 내용 부분에 붙여넣습니다.

※ 붙여넣을 소스코드  (소스코드 바로보기)

1. <div>  
2. <div id="posts" style="padding: 10px;">  
3. </div>  
4. <div align="center" id="posts-pgno" style="cursor: pointer;">  
5. </div>  
6. </div>  
7. <script language="Javascript" type="text/javascript">  
8.  /** url의 Parameter를 얻는 Class. **/  
9.     var request = {   
10.   parameter: function(name) {  
11.    return this.parameters()[name];  
12.   },  
13.     
14.   parameters: function() {  
15.    var result = {};  
16.    var url = window.location.href;  
17.    var parameters = url.slice(url.indexOf('?') + 1).split('&');  
18.       
19.    for(var i = 0;  i < parameters.length; i++) {  
20.     var parameter = parameters[i].split('=');  
21.     result[parameter[0]] = parameter[1];  
22.    }  
23.    return result;  
24.   }  
25.  }  
26.    
27.  /** Page의 정보를 저장. **/  
28.  var page = {  
29.   //초기화.  
30.   init: function(home,max){  
31.    page.home = home;  
32.    page.max = max;  
33.    page.label = '';  
34.    page.no = 1;  
35.   },     
36.      
37.   //url의 parameter에서 pgno 값을 읽어 옮.  
38.   setPage: function(){  
39.    var url = window.location.href;  
40.    
41.    var pl = url.lastIndexOf("/label/");  
42.    var pq = url.lastIndexOf("?");  
43.      
44.    if(pl != -1)  
45.     page.label = url.substr(pl+7,((pq!=-1)?pq:url.length)-(pl+7));  
46.      
47.    if(url.indexOf("pgno") != -1)  
48.     page.no = request.parameter("pgno");  
49.       
50.   }  
51.     
52.  }  
53.  /** feed를 parsing 하여 결과 뿌려 줌. **/  
54.  var obj = {  
55.   init: function () {  
56.    obj.obj = document.getElementById('posts');  
57.    obj.pgno = document.getElementById('posts-pgno');  
58.   },  
59.     
60.   // 검색을 요청하는 함수   
61.   pingSearch: function () {  
62.    //변수 선언.  
63.    obj.s = document.createElement('script');  
64.    obj.s.type = 'text/javascript';  
65.    obj.s.charset = 'utf-8';  
66.      
67.    //feed callback 함수를 이용 json 객체 구한 후 pongSearch 함수호출.   
68.    if(page.label == '')  
69.     obj.s.src = '' + page.home +   
70.      '/feeds/posts/summary/?max-results='+(page.no*page.max)  
71.      +'&alt=json-in-script&callback=obj.pongSearch';  
72.    else  
73.     obj.s.src = '' + page.home + '/feeds/posts/summary/-/'  
74.      +page.label+'?max-results='+(page.no*page.max)  
75.      +'&alt=json-in-script&callback=obj.pongSearch';  
76.       
77.    //append.  
78.    document.getElementsByTagName('head')[0].appendChild(obj.s);  
79.   },  
80.      
81.   // 검색 결과를 뿌리는 함수   
82.   pongSearch: function (z) {  
83.    obj.obj.innerHTML = '';  
84.      
85.    /* 글 목록을 뿌려 줌. */  
86.    for (var i = (page.no-1)*page.max; i < page.no*page.max; i++) {  
87.     //예외처리.  
88.     if(i >= z.feed.openSearch$totalResults.$t)  
89.      break;  
90.       
91.     //변수선언.  
92.     var li = document.createElement("li");  
93.     var a = document.createElement('a');  
94.       
95.     //link로 사용할 base url.  
96.     var url = page.home + '/search';  
97.     if(page.label != '')  
98.      url += '/label/' + page.label;  
99.       
100.     //최종 link를 url 입력.  
101.     if (i == 0)   
102.      a.href = url + '?max-results=1';  
103.     else {  
104.      var pub=obj.changeTime(z.feed.entry[i-1].published.$t);  
105.      a.href = url + '?updated-max=' + pub   
106.      + '&max-results=1&pgno='+page.no;  
107.     }  
108.     a.innerHTML = obj.escapeHtml(z.feed.entry[i].title.$t);  
109.        
110.     //append  
111.     li.appendChild(a);  
112.     obj.obj.appendChild(li);  
113.    }  
114.       
115.    /* page 뿌려줌. */  
116.    obj.pongPgno(z);  
117.   },  
118.     
119.   // page를 뿌려주는 함수.  
120.   pongPgno: function(z){  
121.    obj.pgno.innerHTML = '';  
122.    var before = document.createElement('a');  
123.    var next = document.createElement('a');  
124.      
125.    var ten = parseInt((page.no-1)/10);  
126.    var total = z.feed.openSearch$totalResults.$t;  
127.   
128.    /* before page */  
129.    before.innerHTML = ' << ';     
130.    if(ten>0)  
131.     obj.onMouseDown(before, ten*10);  
132.    obj.pgno.appendChild(before);  
133.      
134.    /* page number */  
135.    for(var i=ten*10; i< (ten+1)*10; i++){  
136.     if(i >= total/page.max)  
137.      break;  
138.     var a = document.createElement('a');  
139.     obj.onMouseDown(a,i+1);  
140.       
141.     a.innerHTML = ' ' + (i+1) + ' ';  
142.       
143.     if(i+1 == page.no)  
144.      a.style.color = 'yellow';       
145.     obj.pgno.appendChild(a);  
146.    }  
147.       
148.    /* next page */  
149.    next.innerHTML = ' >> ';  
150.    if(ten< parseInt(total/page.max/10))  
151.     obj.onMouseDown(next, (ten+1)*10+1);  
152.    obj.pgno.appendChild(next);  
153.   },  
154.      
155.   //mouse click event.  
156.   onMouseDown: function(a, i){  
157.    a.onmousedown = function(){  
158.     page.no = i;  
159.     obj.pingSearch();  
160.    }  
161.   },  
162.   
163.   //Time 에러 수정.  
164.   changeTime: function(str){  
165.    var s = str.lastIndexOf('.')-1;  
166.    var e = str.lastIndexOf('+')+1;  
167.      
168.    var str2 = str.substr(0,s) + '%2B' + str.substr(e,100);  
169.      
170.    return str2;  
171.   },  
172.     
173.   // HTML태그 안 먹게 하는 함수  
174.   escapeHtml: function (str) {  
175.    str = str.replace(/&/g, "&");  
176.    str = str.replace(/</g, "<");  
177.    str = str.replace(/>/g, ">");  
178.    return str;  
179.   }  
180.  };  
181.   
182.  page.init('http://creatorhong.blogspot.com', 5);  
183.  page.setPage();  
184.  obj.init();   
185.  obj.pingSearch();  
186. </script>  

소스코드 바로보기 많이 길죠?

여기서 주의사항은 소스코드 아래쪽에 
page.init('http://creatorhong.blogspot.com', 5); 

각각 블로그의 url 주소와 한 list안에 보여지는 최대 post 수를 입력하면 됩니다. 이 때 url 주소 끝에 '/' 가 들어가면 안됩니다.

소스코드를 수정하고 [저장] 버튼을 누르면 가젯이 추가됩니다.



2. 가젯 배치하기

  레이아웃 화면에서 추가된 가젯을 블로그 게시물 위쪽으로 마우스로 끌어서 배치시킵니다.

가젯이 배치되면 오른쪽 상단의 [미리보기] 버튼을 클릭하여 어떻게 보여지는지 확인합니다.

미리보기 화면을 보니 잘 적용된것 같습니다.

3. 저장하기

  다시 레이아웃 화면으로 돌아와서 오른쪽 상단에 보이는 [배치 저장] 버튼을 클릭하여 블로그에 적용합니다.

블로그를 보시면 아래의 그림과 같이 Post List라는 글목록이 페이징 처리되어 나타나게 됩니다.

참고사이트 : [Blogger] Label을 이용한 글목록(Posts List) 구현.


------------------------------------------------------------------------------------
2020.06.06 수정내용

소스코드 다운로드 링크가 막혀서 바로 보는 코드 주소에서 볼 수 있도록 수정했습니다.