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

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