정말 오랫만에 웹툴즈에 기능을 추가하네요. 이 번에도 역시나 허접하지만 필요하신 분들에게는 도움이 되리라 믿고 공개합니다. ^^;

제 블로그 좌측에 보면 스크롤되는 추천배너를 보실 수 있습니다.

자바스크립트를 이용해서 티스토리에서 가능하도록 만들어보고자 했지만, 다음 뷰 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+"/[##_article_rep_id_##]&rdate="+escape("[##_article_rep_date_##]")+"&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>

 

문제점 및 개선해야 할 점

- 스크롤 코드가 불여우에서는 제대로 동작하지 않는 것 같습니다.

- 올블, 블코 등 여러 서비스에 대한 링크를 선택해서 만들 수 있도록 해야 할 것 같네요.

- 궁극적으로 자바스크립트 만으로 동작하도록 하는 것이 좋을 것 같습니다. 이 방법은 너무 무식해서리~~

  1. Krang 2009.07.22 00:08 신고

    와 이것 좀 멋진데요.!
    스크랩해 두었다가 나중에 응용해봐야겠습니다.
    좋은 정보 감사합니다. ^^

    • k2man 2009.07.22 18:05 신고

      Krang님 감사합니다. ^^
      한 분이라도 쓸모가 있어서 다행입니다. ㅋㅋ

  2. sourcekiki 2009.07.26 16:55 신고

    와 신기하네요 ㅋ 시간나면 한번 적용 해봐야겠어요 한번 읽어서는 잘 모르겠어요 ㄷㄷ ㅋ
    좋은 기능 알려 주셔서 감사해용~~//

    • k2man 2009.07.27 15:01 신고

      부족한데 방문해 주시고 감사합니다. ^^

+ Recent posts