LEEGH.COM

위 그림처럼 사이드바에 미투데이 최신 글 하나를 넣는 방법입니다. 자바 소스 코드는 테미님의 글에서 가져왔습니다. channy 님의 글을 보고 영감을 받아 이렇게 만들어 보았습니다.

1. 먼저 아래 코드를 skin.html 파일에서 </head> 위에 넣습니다. (아래 코드 왼쪽 위 view code를 누르세요.)

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



2. 다음 코드를 skin.html 안의 sidebar_element 태그로 둘러싸서 다음과 같이 하나 만들어 넣어줍니다.

[code]<s_sidebar_element><div id="me2day">미투데이 불러오는 중...</div></s_sidebar_element>[/code]



3. 아래 코드를 skin.html 안의 </body> 위에 넣어 줍니다. 아래 코드 중 아이디만 자신의 것으로 바꾸어 주시면 됩니다.

[code]<script type="text/javascript">
<!--
/*
 * 사용법
 *  - 아래 변수를 수정하고 페이지 내용 중 원하는 부분에 붙여 넣으시면 됩니다.
 *  - size  : 리스트의 출력 개수입니다.
 *  - length: 리스트의 한줄당 표현 길이입니다. 0을 주시면 모두 표현됩니다.
 *  - id    : Me2day 의 사용자 ID입니다.
 *
 * 기타
 *  - UTF-8이 아닐 경우 한글이 깨질 수 있습니다.
 *  - 스타일을 변경하시려면 소스 내용을 수정하세요.
 *  - 라이센스는 동일하게 CCL (By) 2.5 입니다.
 *
 *
 * 참조 - http://emotion.tistory.com/60
 * 내부적으로 John Resig의 RSS to JSON Convertor(http://ejohn.org/projects/rss2json/)
 * 를 사용하지 않고, yahoo pipe 를 사용하였음.
 *
 *
 */

var size = 1;  // 출력 개수
var length = 90; // 항목당 표현 길이
var id="leegh" // Me2day 아이디

var head_yn = 0 ; // 제목 표시 있음(1) , 없음(0)

var nickname = '지인우인' ;
var main_title = nickname + '의 미투데이' ;
var main_url = 'http://me2day.net/' + id ;


var json_url = 'http://pipes.yahoo.com/pipes/pipe.run' ;
var pars = '_id=HkCxjqLS2xGADUgG6kjTQA&textinput1=' + id + '&_render=json&_callback=putMe2day' ;


function getMe2day() {
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = json_url + '?' + pars ;

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

}

function putMe2day(rss) {
 var html = '';

 
if( head_yn == 1 ) {
    html = '<h3><a href="' + main_url + '" title="' + main_title + '" target="_blank">' + main_title + '</a></h3>';
  }
 

  for (var i = 0; i < size && i < rss.value.items.length; i++) {

    var item = rss.value.items[i];
    html += '<a href="' + item.link + '" title="' + item.title.stripTags() + '" target="_blank">'
      + ellipsis(item.description.stripTags() , length) + '</a>';
  }

  $('me2day').innerHTML = html;
}

function ellipsis(text, size) {
  if (size == 0) return text;
  var index = 0;
  var count = 0;
  for (index = 0; index < text.length; index++) {
    if (count >= size) {
      return text.substring(0, index).replace(/\s+$/, '') + '...';
    }
    count += escape(text.charAt(index)).indexOf('%u') > -1 ? 2 : 1;
  }
  return text;
}

getMe2day();
//-->
</script>[/code]



4. style.css 파일 안의 맨 밑에다 아래 코드를 넣어주시면 됩니다.

[code]#me2day { padding: 5px;
text-align:left;
vertical-align:middle;
width:180px;
height:65px;
background:transparent url(http://whoamiok.googlepages.com/img_me2day.gif) no-repeat;
}

#me2day ul li a {
font-family: Malgun Gothic, Arial, UmDotum, Apple Gothic serif;
color:#000000;
}[/code]



5. 다 끝났습니다. 사이드바 설정에 들어가셔서 생성된 미투데이 모듈을 끌어다가 원하는 위치의 사이드바에 던지시면 됩니다.

지인우인 유용한 정보 미투데이, 위젯