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

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

1. 가젯 추가하기

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

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

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

버튼을 클릭합니다.

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

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

※ 붙여넣을 소스코드 (소스코드 다운로드) 소스코드 다운로드.txt

<div>
<div id="posts" style="padding: 10px;">
</div>
<div align="center" id="posts-pgno" style="cursor: pointer;">
</div>
</div>
<script language="Javascript" type="text/javascript">
/** url의 Parameter를 얻는 Class. **/
var request = {
parameter: function(name) {
return this.parameters()[name];
},
parameters: function() {
var result = {};
var url = window.location.href;
var parameters = url.slice(url.indexOf('?') + 1).split('&');
for(var i = 0; i < parameters.length; i++) {
var parameter = parameters[i].split('=');
result[parameter[0]] = parameter[1];
}
return result;
}
}
/** Page의 정보를 저장. **/
var page = {
//초기화.
init: function(home,max){
page.home = home;
page.max = max;
page.label = '';
page.no = 1;
},
//url의 parameter에서 pgno 값을 읽어 옮.
setPage: function(){
var url = window.location.href;
var pl = url.lastIndexOf("/label/");
var pq = url.lastIndexOf("?");
if(pl != -1)
page.label = url.substr(pl+7,((pq!=-1)?pq:url.length)-(pl+7));
if(url.indexOf("pgno") != -1)
page.no = request.parameter("pgno");
}
}
/** feed를 parsing 하여 결과 뿌려 줌. **/
var obj = {
init: function () {
obj.obj = document.getElementById('posts');
obj.pgno = document.getElementById('posts-pgno');
},
// 검색을 요청하는 함수
pingSearch: function () {
//변수 선언.
obj.s = document.createElement('script');
obj.s.type = 'text/javascript';
obj.s.charset = 'utf-8';
//feed callback 함수를 이용 json 객체 구한 후 pongSearch 함수호출.
if(page.label == '')
obj.s.src = '' + page.home +
'/feeds/posts/summary/?max-results='+(page.no*page.max)
+'&alt=json-in-script&callback=obj.pongSearch';
else
obj.s.src = '' + page.home + '/feeds/posts/summary/-/'
+page.label+'?max-results='+(page.no*page.max)
+'&alt=json-in-script&callback=obj.pongSearch';
//append.
document.getElementsByTagName('head')[0].appendChild(obj.s);
},
// 검색 결과를 뿌리는 함수
pongSearch: function (z) {
obj.obj.innerHTML = '';
/* 글 목록을 뿌려 줌. */
for (var i = (page.no-1)*page.max; i < page.no*page.max; i++) {
//예외처리.
if(i >= z.feed.openSearch$totalResults.$t)
break;
//변수선언.
var li = document.createElement("li");
var a = document.createElement('a');
//link로 사용할 base url.
var url = page.home + '/search';
if(page.label != '')
url += '/label/' + page.label;
//최종 link를 url 입력.
if (i == 0)
a.href = url + '?max-results=1';
else {
var pub=obj.changeTime(z.feed.entry[i-1].published.$t);
a.href = url + '?updated-max=' + pub
+ '&max-results=1&pgno='+page.no;
}
a.innerHTML = obj.escapeHtml(z.feed.entry[i].title.$t);
//append
li.appendChild(a);
obj.obj.appendChild(li);
}
/* page 뿌려줌. */
obj.pongPgno(z);
},
// page를 뿌려주는 함수.
pongPgno: function(z){
obj.pgno.innerHTML = '';
var before = document.createElement('a');
var next = document.createElement('a');
var ten = parseInt((page.no-1)/10);
var total = z.feed.openSearch$totalResults.$t;
/* before page */
before.innerHTML = ' << ';
if(ten>0)
obj.onMouseDown(before, ten*10);
obj.pgno.appendChild(before);
/* page number */
for(var i=ten*10; i< (ten+1)*10; i++){
if(i >= total/page.max)
break;
var a = document.createElement('a');
obj.onMouseDown(a,i+1);
a.innerHTML = ' ' + (i+1) + ' ';
if(i+1 == page.no)
a.style.color = 'yellow';
obj.pgno.appendChild(a);
}
/* next page */
next.innerHTML = ' >> ';
if(ten< parseInt(total/page.max/10))
obj.onMouseDown(next, (ten+1)*10+1);
obj.pgno.appendChild(next);
},
//mouse click event.
onMouseDown: function(a, i){
a.onmousedown = function(){
page.no = i;
obj.pingSearch();
}
},
//Time 에러 수정.
changeTime: function(str){
var s = str.lastIndexOf('.')-1;
var e = str.lastIndexOf('+')+1;
var str2 = str.substr(0,s) + '%2B' + str.substr(e,100);
return str2;
},
// HTML태그 안 먹게 하는 함수
escapeHtml: function (str) {
str = str.replace(/&/g, "&");
str = str.replace(/</g, "<");
str = str.replace(/>/g, ">");
return str;
}
};
page.init('http://creatorhong.blogspot.com', 5);
page.setPage();
obj.init();
obj.pingSearch();
</script>

많이 길죠?

소스코드 다운을 하시기 바랍니다.

소스코드 다운로드

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

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

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

2. 가젯 배치하기

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

3. 저장하기

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

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

위와 같이 하시면 됩니다.

엄청 어렵네요..

우리나라랑은 조금 틀린듯..

즐프하세요~

티스토리툴바