me2fade, 오늘의 한마디

블로그 상단에 어설픈 사진을 붙여 두었다가 흥미를 잡아끌 만한 요소가 뭐가 있을까 고민을 했었는데요. 마침 미투데이에 쓰는 짧은 글을 표시해 보면 어떨까 하는 생각이 들었습니다.

me2day API를 좀 가지고 Text Fade In/out 용 자바 스크립트를 합쳐서 간단한 미투데이 빌보드를 만들었습니다. 이름은 me2fade 입니다. 최근 7개만 가져오기 때문에 예전 글은 바람 처럼 사라지고 다시 나타난다는 의미 입니다.

구현 방법은 아주 간단합니다. 홈페이지에 아래와 같이 코드를 집어 넣고 channy 부분에 자신의 me2day 아이디로 교체 하면 됩니다. 그러면, 이 블로그 상단에 있는 것 같은 가로 500 사이즈 정도 되는 미투데이 전광판이 나타납니다.

head 태그 사이에 넣을 것

<link rel="stylesheet" href="http://cfs.tistory.com/custom/blog/0/297/skin/images/me2fade.css" type="text/css" />
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/0/297/skin/images/me2fade.js"></script>

실제 전광판이 나타나는 부분

<div id="me2fade"></div>

footer 부분 body 태그 닫히기 전에 기능 호출

<script type="text/javascript">
addLoadEvent(me2fade.init("channy"));
</script>

혹시 커스트마이징을 하실 분은 me2fade.css 파일 대신 아래의 CSS 코드를 바꾸 시면 됩니다. 특히 글자수에 따라 세 단계로 화면에 표시하니 참고하시면 되겠습니다.


// 빌보드 바탕 영역
#me2fade {
font-family: Malgun Gothic, Arial, UmDotum, Apple Gothic serif;
padding: 20px;
text-align:center;
vertical-align: middle;
width:500px;
height:110px;
background:transparent url(http://cfs.tistory.com/custom/blog/0/297/skin/images/me2_bg.gif) no-repeat scroll center center;
}
// 본문 링크
#me2fade a {
color: yellow;
font-weight: bold;
text-decoration: none;
}
// 태그 링크
#me2fade .me2tags, #me2fade .me2tags a {
font-weight: normal;
font-size: 0.8em;
color: #C0FFFF;
}
// 글자수가 80자 이상 일때
#me2fade .small {
font-size: 18px;
line-height: 95%;
}
// 글자수가 40자 이상 일때
#me2fade .medium {
font-size: 22px;
line-height: 100%;
}
// 글자수가 40자 미만 일때
#me2fade .large {
font-size: 28px;
line-height: 110%;
}

me2fade에 대한 업데이트 및 문의는 아래 링크로 해주세요.
http://channy.creation.net/blog/519

여러분의 생각

  1. 뜬금없는 질문이겠습니다만…블로그 스킨의 어디쯤에 넣어야 제대로 모양이 나는지는 대충 알려주실 수 없나요? 그쪽엔 영…ㅠㅠ;;

  2. 농우님 :: 그건 각자의 취향에 따라;;;

  3. 상단 <script> 태그들은 가급적 가 닫히기 전 footer 부분(스킨 하단)에 넣으시고 <div id=”me2fade”></div> 부분이 나타나는 실제 미투 메시지가 표시되는 부분이기 때문에 원하는 위치에 넣으시면 됩니다.

  4. HTML소스 하나 만들어서 테스트 해봤는데요. 글자는 뜨는데 백그라운드 이미지가 안뜨는 이유는 뭘까요? ㅠㅠ 걍 하얀 배경화면에 글자만 뜹니다.

  5. ㅋㅋ 해결했습니다. css링크를 media=”print” 에서 media=”screen”로 바꾸니 해결되네요.^^
    제 블로그에 달았습니다. 잘 사용하겠습니다.^^

  6. 엇 죄송 합니다. 그게 왜 들어가 있었지? 바로 삭제했습니다.

  7. 화면 전환이 너무 빨라요.
    전 metoday(맞나요? ;;)를 쓰지 않아 이걸 이용할 일은 없겠지만, 여튼 차니님 블로그에서 봤더니, 글 읽기도 전에 휙휙 ;;

  8. 저기근데 2008 7월 06 4:45

    사용하신 자바스크립트는 원래 Grey Wyvern이란 사람이 만든 프로그램인데 소스 안의 저자 관련 문구를 홀랑 다 삭제하고 마치 차니님이 만든 것처럼 배포하시는 특별한 이유가 있는 것인가요?

  9. 저기근데 / 네. 이 스크립트의 일부는 분명히 Buffered Text-fade Effect – v3.0이고 BSDL 라이센스 부분이 약식으로 명시되어 배포하고 있습니다. 그리고 제가 저자라고 표기하지도 않았구요. 위의 프로그램명으로 검색해보시면 바로 어디가 출처인지 바로 알 수 있습니다.

    참고로 BSDL은 제가 고쳐 다른 영역을 추가 배포해도 되는 가장 자유로운 오픈 소스 라이센스이고 법적으로도 문제가 없습니다. 라이센스 표기와 자신의 제품을 결합해서 사용 가능하고 필요하면 소스 코드를 공개할 필요도 없고 GNU의 그 흔한 copyleft 조항조차도 없지요. 하지만 제품명과 버전 라이센스 부분은 명기했구요. 아랫 부분 me2fade 함수 부분 부터는 제가 작성한 겁니다. 이렇게 쓰는 것이 일반적은 BSDL 소스를 사용하는 방법입니다. 그래도 오해의 소지가 있는 것 같아 각 코드의 라이센스 영역을 좀 더 명확히 했습니다.

  10. 만들어주신것 블로그에 달았습니다^^
    유용한 프로그램? 만들어 주셔서 감사합니다.

  11. 와~ 감사합니다! Me2도 초보고, 블로그도 초보인데요!
    어떻게 해야하나 하고 들여다 보다가… 태그 사이에 끼워두니 잘 되네요!

    아주아주 감사합니다!

의견 쓰기

이름* 이메일* 홈페이지(선택)