티스토리에 간단한 파일 업로드로 파일서버로 이용 / 우분투 10.04 배너달기

우분투 10.04발표 countdown 배너의 스크립트를 수정했다.

우분투 10.04발표가 얼마 남지 않았다.
그래서 나도 ubuntu countdown 배너를 달아 보았다.
http://www.ubuntu.com/getubuntu/countdown에서 배너 스크립트를 얻을 수 있다.

스크립트를 사이드바에 넣었더니 조금 튀어나와 눈에 자꾸만 거슬렸다.

수정하기 위해 이곳저곳을 뜯어보기 시작했다.
스킨 코드를 분석해보기도하고... 크기를 지정해보기도 하고...
별다른 해결방법을 찾지 못해서 배너 스크립트자체에 주목했다.

<script type="text/javascript" src="http://www.ubuntu.com/files/countdown/display2.js"></script>

아무래도 저 자바스크립트 파일을 수정해야 할 것같은 생각이 들었다.
(난 자바스크립트는 개뿔도 몰라서 동작방식이나 구조등에 대해 아무런 개념도 없었다.)

주소창에 자바스크립트 주소를 직접 쳐넣고 파일을 내려받았다.
그 내용을 봤더니 아하!!

    var d = new Date();
    dom = d.getDate();
    month = d.getMonth();
    year = d.getYear();
    if (year < 2000) year = year - 100;
    else year = year - 2000;

    if (year == 10 && month == 3)
        days = 29 - dom;
    else
        days = 0;
    if (days < 0) days = 0;
    if (days < 10) days = '0' + days.toString();

document.write('<a href="http://www.ubuntu.com/"><img id="countdownimage" src="'+base+days+'.png" width="170" height="142" border="0" alt="Ubuntu 10.04 LTS - Coming soon" style="padding-top:2px;background-color:transparent"></a>');

// document.write('<a href="http://www.ubuntu.com/"><img id="ubuntucountdownimage" src="'+base+'here.png" width="180" height="150" border="0" alt="Ubuntu 10.04 LTS is here"></a>');
//

대충 뭘해야할지 감이 오기 시작했다.

자바스크립트 파일 전반부는 현재 날짜와 우분투 10.04 발표일과의 날짜차이를 구하는 부분이고
후반부는 계산한 날짜차이에 따라서 알맞은 이미지를 불러오는 부분이었다.
주석처리되지 않은 부분의 width를 사이드바에 맞게 170으로 height는 그에 맞춰 142로 수정했다.

수정한 자바스크립트 파일을 어디다 올려다 놓고
배너 스크립트 내부의 http://www.ubuntu.com/files/countdown/display2.js 대신
수정한 파일의 주소를 넣어 주기만 하면 되는 것였다.

이걸 티스토리에 올리면 좋은데...하는 생각에 궁리를 해보았다.

아무래도 티스토리는 설치형... 이라기보다 서비스형이었다.
네이버블로그보다는 블로거에게 많은 자유가 돌아오지만 근본적으로 같은 제한이 존재하는 터라
파일을 포스트에 첨부시키지 않고 홈 디렉토리에 올리는 방법은 없었다.

그래서 한가지 꾀를 낸 것이 스킨용 이미지를 업로드하는 곳에 올리는 거였다.
이미 많은 블로거들이 임기응변식으로 이 방법을 사용하는 듯했다.

이미지를 업로드하는 곳에 자바스크립트를 업로드는 했지만 주소를 알 수 없어서
브라우저상에서 코드를 살펴보았다.

티스토리 관리자메뉴에서 파일업로드의 목록을 보면
모두 images디렉토리안에 있다는 점을 착안해서 검색했다.
사진처럼 소스코드에서 images를 찾아보면 저렇게 주소가 나온다.

즉 업로드 제한 용량인 10MB이내라면...
이런 저런 파일들을 올려두고 파일서버처럼 이용할 수 있는 것이다.
음악을 올려두고 재생할 수도 있을 것이고
메신저를 쓸 수 없을 때 친구들에게 보내줘야하는 파일을 전달 수도 있을 것이고...
(사실 큰 활용도는 없어보인다....)

이 주소를 이용하여 알아내어 자바스크립트 파일의 주소로 우분투 배너를 잘 등록할 수 있었다.

 

PS :
사이드바의 가로폭은 180이다. ( 2010.04.30 )
스킨에 따라 사이드바의 가로폭은 다르다. 내 스킨의 가로폭은 180px이다.
단, 좌우로 패딩이 5픽셀씩 들어가기 때문에 170을 넘기면 이미지가 옆으로 삐져나온다.
앞의 사진에서 이미지와 옅은 회색선 사이의 하얀선이 패딩이다. 저 두께가 5픽셀.
다른 스킨에서는 선의 두께나 패딩의 두께를 고려해서 크기를 정하면 된다.

추가 - 2010.04.22
쿠분투 배너로 바꿨다. 쿠분투 유저이기 때문에.. ㅋ
쿠분투 배너는 스크립트 파일을 따로 두지 않고
스크립트 태그 안에 스크립트 코드를 다 집어 넣어놔서
별다르게 *.js파일을 업로드 할 필요가 없었다.