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에 대한 업데이트 및 문의는 아래 링크로 해주세요.
https://channy.creation.net/blog/519

- Channy Yun (윤석찬);

※ Disclaimer- 본 글은 개인적인 의견일 뿐 제가 재직했거나 하고 있는 기업의 공식 입장을 대변하거나 그 의견을 반영하는 것이 아닙니다. 사실 확인 및 개인 투자의 판단에 대해서는 독자 개인의 책임에 있으며, 상업적 활용 및 뉴스 매체의 인용 역시 금지함을 양해해 주시기 바랍니다. 본 채널은 광고를 비롯 어떠한 수익도 창출하지 않습니다. (The opinions expressed here are my own and do not necessarily represent those of current or past employers. Please note that you are solely responsible for your judgment on checking facts for your investments and prohibit your citations as commercial content or news sources. This channel does not monetize via any advertising.)