정말 오랫만에 웹툴즈에 기능을 추가하네요. 이 번에도 역시나 허접하지만 필요하신 분들에게는 도움이 되리라 믿고 공개합니다. ^^;
제 블로그 좌측에 보면 스크롤되는 추천배너를 보실 수 있습니다.
자바스크립트를 이용해서 티스토리에서 가능하도록 만들어보고자 했지만, 다음 뷰 ID값을 가져오기가 어렵더군요. (보안상 이유로 자바스크립트로 다른 도메인의 파일을 읽어 올 수가 없더군요. 해결방법은 있겠지만, 일단 패스했습니다.)
제 서버에서 PHP로 추천배너를 출력해주고, IFRAME을 이용해서 가져올 수 있도록 만들었습니다.
IFRAME코드 생성
우선 웹툴즈의 '내 링크정보' => '블로그 추천배너'(http://webtools.kr/mylink7)로 이동 합니다.
'믹시 MUID'값을 넣어 줘야 합니다.
http://mixsh.com/widget/mixup/index.html 에서 설치코드를 뽑아 냅니다.
만들어진 코드에서 아래 보이는 빨간색 숫자가 MUID입니다.
<script type='text/javascript'>document.write("<scr"+"ipt type='text/javascript' src='http://www.mixsh.com/widget/mixup/loader.js?muid=65679&guid=http://"+document.domain+"/957&rdate="+escape("2009. 7. 21. 16:32")+"&rawhtml=&skin=1&showhitcnt=1&platform=1'></scr"+"ipt>");</script>
RSS피드주소를 넣습니다.
한RSS와 연결시키기 위해서 RSS주소를 넣어주세요. 단 http:// 는 제외하고 넣어 주세요.
마지막으로 'HTML코드 생성'버튼을 누르면 IFRAME코드가 생성됩니다. 이 코드를 자신의 블로그 스킨에 추가하면 됩니다.
스크롤 적용하기
스크롤로 하시던 다른 방법을 사용하시던 무관합니다. 그리고 스크롤 소스는 인터넷에서 검색하시면 무지 많으니, 자신이 원하는 것으로 사용하시면 됩니다.
티스토리의 스킨을 편집합니다.
아래코드를 </head>태그 바로 앞에다가 집어 넣습니다.
※ 아래 스크롤 소스는 티스토리 스킨 중 '설레는 마음 -초록빛'의 코드를 사용했습니다.
아래코드 중 document.body.clientWidth/2 - 990/2; 부분은 (제 블로그의 경우) 가운데 정렬이기 때문에 브라우저 창 크기에 따라 좌측 여백을 변화시키기 위한 부분입니다. 자신의 스킨크기나 정렬방식에 따라 바꿔주세요.
<script type="text/javascript">
<!--
var stmnLEFT = 0; // 사용 안함
var stmnGAP1 = 330; // 위쪽 여백
var stmnGAP2 = 330; // 스크롤시 브라우저 위쪽과 떨어지는 거리
var stmnBASE = 300; // 스크롤 시작위치
var stmnActivateSpeed = 35;
var stmnScrollSpeed = 20;
var stmnTimer;
function RefreshStaticMenu() {
var stmnStartPoint, stmnEndPoint;
stmnStartPoint = parseInt(document.getElementById('STATICMENU').style.top, 10);
stmnEndPoint = Math.max(document.documentElement.scrollTop, document.body.scrollTop) + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;
if (stmnStartPoint != stmnEndPoint) {
stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
document.getElementById('STATICMENU').style.top = parseInt(document.getElementById('STATICMENU').style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount ) + 'px';
stmnRefreshTimer = stmnScrollSpeed;
}
stmnTimer = setTimeout("RefreshStaticMenu();", stmnActivateSpeed);
}
function InitializeStaticMenu() {
document.getElementById('STATICMENU').style.left = document.body.clientWidth/2 - 990/2; // 왼쪽 여백입니다. 필요한 방법으로 하세요.
document.getElementById('STATICMENU').style.top = document.body.scrollTop + stmnBASE + 'px';
RefreshStaticMenu();
}
//-->
</script>
<body>태그 수정
<body>태그는 아래와 같이 onload="InitializeStaticMenu();" 를 추가합니다.
<body onload="InitializeStaticMenu();">
</body>태그 앞에 추가
아래 코드를 가장 마지막 근처에 있는 </body>태그 바로 앞에다가 집어 넣어 주세요.
단, 빨간색 부분은 웹툴즈에서 생성한 코드를 넣어야 합니다.
<div name="STATICMENU" id="STATICMENU" style="padding:0; margin:0; position:absolute; z-index:1; left:10px; top:300px;">
<iframe name='votefame' id='voteframe' src='http://widget.webtools.kr/vote.php?muid=65679&feed=http://feeds2.feedburner.com/k2mancom' width='67' height='280' border='0' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' allowtransparency='true'></iframe>
</div>
문제점 및 개선해야 할 점
- 스크롤 코드가 불여우에서는 제대로 동작하지 않는 것 같습니다.
- 올블, 블코 등 여러 서비스에 대한 링크를 선택해서 만들 수 있도록 해야 할 것 같네요.
- 궁극적으로 자바스크립트 만으로 동작하도록 하는 것이 좋을 것 같습니다. 이 방법은 너무 무식해서리~~
'IT > 웹툴즈' 카테고리의 다른 글
| 블로그를 52개 언어로 자동 번역하는 방법 (14) | 2009.09.18 |
|---|---|
| 웹툴즈 등 서버 오류로 잠시 중단 (0) | 2009.08.28 |
| 블로그를 번역해서 노출시켜 주는 메타사이트 (0) | 2009.05.01 |
| XE용 XML-Sitemap v0.2 - Sitemap XML문서 생성 모듈 (0) | 2009.04.30 |
| XE용 구글 번역 에디터 컴포넌트 v0.2 (0) | 2009.04.28 |