펌핏 신규글 위젯

태미님의 me2day 플러그인 관련 글을 참고하여 만들어보았습니다.

소스를 수정하여 다시 포스팅하였습니다.

<script type="text/javascript" src="http://www.prototypejs.org/assets/2007/5/1/prototype.js"></script>
<script type="text/javascript">

/**
 *
  - pr_target : 목록이 표시될 태그 아이디(?)
  - pr_size : 목록 출력 개수
  - pr_length : 한줄당 표현 길이 (0 : 모두 표시)
  - pr_category : 표시될 카테고리
 IT|생활/문화|정치/경제|미디어/연예|스포츠|피플
*/
var pr_target = 'pumfit_recent';
var pr_size = 10;
var pr_category = 'IT|신상품';
var pr_length = 0;

function initPumfitRecent() {

 var pipeURL = 'http://pipes.yahoo.com/pipes/pipe.run?_id=KnWwmxkE3BGDJU7SCB2yXQ&_render=json&_callback=hanPumfitRecent';
 var pars = '&category=' + pr_category + '&size=' + pr_size;
 var sc = document.createElement('script');
 sc.type = 'text/javascript';
 sc.src = pipeURL + pars;

 document.getElementsByTagName('head')[0].appendChild(sc);
}

function hanPumfitRecent(feed) {

 var html = '<ul>';
 var listTpl = new Template('<li><a href="#{link}">#{title}</a><span class="date">#{date}</span></li>');

 for (var i = 0; i < feed.value.items.length; i++) {

  var item = feed.value.items[i];
  var cal = new Date(item.pubDate);
  var data = {link: item.link, title: item.title.truncate(pr_length), date: cal.getHours().toPaddedString(2) + ':' + cal.getMinutes().toPaddedString(2)};

  html += listTpl.evaluate(data);
 }
 html += '</ul>';

 if ($(pr_target))
  $(pr_target).update(html);
}

initPumfitRecent();
</script>
<div id="pumfit_recent">펌핏 최근글 로딩</div>

카테고리를 지정하여 신규글에 대한 목록을 가져올 수 있으며 사용법은 카테고리 이름인 'IT', '생활/문화', 등을 '|'로 연결하여 pr_category에 설정하시면됩니다.

var pr_size = 10;
var pr_category = 'IT|신상품';
var pr_length = 0;

출력 형태는

<li><a href="#{link}">#{title}</a><span class="date">#{date}</span></li>

으로 블로그에 맞게 style.css를 지정해서 사용하시면 됩니다.
기본 style.css

#pumfit_recent ul,
#pumfit_recent li {
    margin:0;
    padding:0;
    list-style:none;
}
#pumfit_recent .date {
    margin-left:10px;
}

참고로 위 소스를

<s_sidebar_element>
.. 소스..
</s_sidebar_element>

형태로 사이드바 태그 위치에 추가하시면 손쉽게 위치를 변경할 수 있습니다.