구글 blogger 최근글 리스트 만들기

http://creatorhong.blogspot.kr/2012/02/blogger-label-posts-list.html

2012년 3월 1일 목요일

[Blogspot] 카테고리 만들기

이전 에는 간단하게 Blogspot에서 제공하는 Label 위젯을 이용해 카테고리를 대체했었는데요.
디자인이 마음에 들지 않아서 사용하지 않고 직접 카테고리를 만들었습니다.

글목록을 만든 것과 마찬가지로 Label을 이용했는데요.
블로그에서 Label의 고유주소가 블로그 주소 뒤에 '/search/label/{라벨이름}' 형태로 붙는 것을 이용해 a 태그에 해당 주소를 넣고 ul,li 태그를 이용해 리스트 형태로 정렬 하였습니다.
라템의 세계 블로그를 보니 먼저 똑같은 방법으로 구현을 하셨네요.

코드를 보시면...

view plainprint?

1. <div id='category' class='G1s'>  
2.  <ul>  
3.   <li class='categoryl1'>  
4.     <a id='category-tip' href='/search/label/tip?max-results=1'>Tip</a><ul>  
5.    <li class='categoryl2'>  
6.     <a id='category-blog' href='/search/label/blog?max-results=1'>Blog</a></li>  
7.    <li class='categoryl2'>  
8.     <a id='category-gp' href='/search/label/google%20%2B?max-results=1'>Google +</a></li>  
9.    <li class='categoryl2'>  
10.     <a id='category-plan' href='/search/label/plan?max-results=1'>Plan</a></li>  
11.   </ul></li>  
12.   <li class='categoryl1'>Study<ul>  
13.    <li class='categoryl2'>  
14.     <a id='category-euler' href='/search/label/euler?max-results=1'>Project Euler</a></li>  
15.   </ul></li>  
16.   <li class='categoryl1'>일상 이야기<ul>  
17.    <li class='categoryl2'>  
18.     <a id='category-trip' href='/search/label/여행?max-results=1'>여행</a></li>  
19.    <li class='categoryl2'>  
20.     <a id='category-chat' href='/search/label/잡담?max-results=1'>잡담</a></li>  
21.   </ul></li>  
22.  </ul>  
23. </div>  

<ul> 태그 안에 <li> 태그를 넣고 <li>태그안에 있는 <a>태그에 링크와 이름을 넣는 방식으로 만들면 됩니다.

하지만 여기에 추가로 해당 Label에 Post가 몇개있는지를 표시해 주고 싶어서 javascript를 첨부하였습니다.

view plainprint?

1. <script>  
2.  function Category(id, label, name){  
3.   this.a = document.getElementById(id);  
4.   this.label = label;  
5.   
6.   var script = document.createElement('script');  
7.   script.type = 'text/javascript';  
8.   script.charset = 'utf-8';  
9.   script.src = home + '/feeds/posts/summary/-/' + label + '?max-results=1&alt=json-in-script&callback=' + name +'.pong';  
10.   document.getElementsByTagName('head')[0].appendChild(script);  
11.     
12.   this.pong = function(cfeed){  
13.    var cnt = cfeed.feed.openSearch$totalResults.$t;  
14.    this.a.innerHTML = this.a.innerHTML + '(' + cnt + ')';  
15.   };  
16.  }  
17.    
18.  var home = 'http://creatorhong.blogspot.com';  
19.  var tip = new Category('category-tip','tip','tip');  
20.  var blog = new Category('category-blog','blog', 'blog');  
21.  var gp = new Category('category-gp', 'google%20%2B', 'gp');  
22.  var plan = new Category('category-plan','plan','plan');  
23.  var euler = new Category('category-euler', 'uler', 'euler');  
24.  var chat = new Category('category-chat','잡담','chat');   
25.  var trip = new Category('category-trip','여행','trip');  
26. </script>  

여기서 수정 해야할 것은 앞에 function Category 부분은 나두시고....
뒤에 var home 부터 뒤에 부분입니다.
var home = '' 에는 자신의 블로거 주소를 넣어주시면 되겠구요....

그 뒤에 나오는 것들이 카테고리에 Label 들입니다.
변수를 지정해 주시고... new Category() 안에 3개의 값이 각각 들어가야하는데요. 위에 html 태그와 변수하나를 보면서 설명 드리겠습니다.

<li class='categoryl1'><a id='category-tip' href='/search/label/tip'>Tip</a><ul>

위쪽에 html 태그들 중 tip태그로 보내는 코드입니다. 그리고 이에 상응하는 javascript 코드는

var tip = new Category('category-tip','tip','tip');

이것이구요.
색으로 짐작을 하셨겠지만..... Category 인자들을 하나씩 살펴보면....

첫번째 값은 Posts수를 넣길 원하는 <a> 태그의 id입니다.
a id='category-tip' 부분에 노란색 부분을 첫번째 인자로 넣어주시면 됩니다. 물론 이 id는 블로그 전체에 대해서 고유한 값이어야 하겠죠?

다음 두번째에는 Label 이름입니다.
href='/search/label/tip' 에 보시면 가장 마지막에 넣어주는 Label값이죠.

그리고 마지막으로 해당 변수의 이름을 넣어주셔야 합니다.
var tip = new Category() 처럼 Category라는 클레스를 변수에 할당해 주는데... feed 파싱을 위한 callback 함수에서 이 할당된 변수 이름을 알아야 원하는 변수 내의 함수를 호출하게 되어있습니다.

간단하게 예제의 색별로 넣어주시면 되구요....

한가지 단점? 이랄까... 제 블로그를 새로고침하거나 블로그내의 다른 곳으로 이동을 해 보시면 아시겠지만 원하는 Label마다 callback함수를 불러주게 되므로 기본 html 태그가 먼저 그려지고 나중에 뒤쪽에 숫자들이 생겨나는 것을 보시게 될 겁니다.

뭐.... 오히려 숫자가 차례대로 생겨나는 모습이 애니메이션느낌이 나서 더 좋을 수도 있을 것 같구요... ㅎ

---

나중에 보니 이상하게 script에서 라벨이름을 할때 대문자로 하면 문제가 발생하더군요.
라벨이름을 소문자나 오히려 한글로 하셔야 작동을 하네요.