어찌어찌하다보니 제 블로그에도 물결플래쉬를 적용하게 되었습니다. 텍스트큐브닷컴이 여러가지 제약사항이 많다보니 적용이 좀 까다롭네요. 최대한 초심자에 맞춰 작성하였으니 관심있으신 분들은 차근차근 따라해 보시기 바랍니다.

 

[※ 이미지를 클릭하면 원본 사이즈로 보실 수 있습니다.]

 

1. 준비물.

 

  1) swf 파일을 올려둘 외부 계정

 

  2) js_prototype.jpeg : 마우스 오른쪽 클릭 후 다운로드 하시기 바랍니다.

                         다운받으실 때 확장자명을 확인하세요.

                         아래 내용은 *.jpeg 기준으로 작성되었습니다.

 

  3) 물결 플래쉬 소스 ( 출처 : http://jiny.textcube.com/301 )

 

 

2. 적용

 

  1) 먼저 1-3)의 플래쉬소스를 다운받으셔서 적당한 디렉토리에 압축을 풀어둡시다.

 

  2) 'viewTitle.swf'파일을 인터넷 접속 가능한 계정에 업로드합니다.

     왜냐하면 텍스트큐브닷컴은 swf 파일 업로드를 지원하지 않기때문입니다.

     뭐, 보안상 충분히 이해는 갑니다.

     당장 계정이 없으시다면 제 계정에 올려둔 파일을 쓰시기 바랍니다.

     제 파일 주소 : http://weberholic.byus.net/viewTitle.swf

     단, 제가 어느날 물결이 싫어져 파일을 삭제할 경우,

     그와 동시에 님의 블로그에도 제목이 사라지게된다는거 유념하시기 바랍니다.

 

  3) 텍스트큐브닷컴에 로그인하셔서 꾸미기>스킨편집 화면으로 갑시다.

 

  4) 하단의 파일업로드에서 1-2) 에서 다운받으신 jpeg파일을 업로드합니다.

 

  5) 이부분이 좀 어려운데요, skin.html 파일의 body 밑 적당한 부분에

     다음의 코드를 넣어봅시다.

     <img src="./images/js_prototype.jpeg" />

     적용하기버튼을 누르고 블로그를 보면 다음과같이 엑박이 나타날것입니다.

     이미지애 마우스 오른쪽 클릭후 '속성'을 클릭하시면 창이 뜹니다.

     지금까지 알아내고자 한 건, 위의 파란색으로 드래그된 주소값입니다.

     아마도 개인별로 이 주소가 조금씩 다를것입니다.

     위처럼 드래그하셔서 주소를 복사해 둡시다.

 

     이렇게 하는 이유는 상대주소값이 인식이 안되어서 입니다.

     이렇게 절대주소를 넣어야 제대로 동작하네요. ^^

 

     참고로 js_prototype.jpeg 는 이미지 파일이 아닙니다.

     파일을 에디터로 열어보시면 아시겠지만 Prototype 이라는

     자바스크립트 프레임웍입니다.(깊게들 어가면 어려울것같으니 여기까지만)

     이런 식으로 자바스크립트를 사용 할 수 있다는 건,

     진모씨의 IT블로그!를 보고 알았네요.(감사! ^^)

        보통 웹페이지의 악성코드들이 음.. 뭐 다 똑같지는 않지만

        이와 유사한 방식으로 이미지파일을 가장해 들어가는 경우가 많죠.

        나쁘게 쓰이면 악성코드, 좋게 쓰이면 우회로? ^^;

 

  6) 다시 꾸미기>스킨편집 화면으로 돌아옵시다.

     <img src="./images/js_prototype.jpeg" />

     이부분은 목적을 달성하였으니 삭제해 줍시다.

 

  7) body 밑의 적당한 부분에 다음의 코드를 삽입합시다.

<script src="2-5)에서 복사한 js_prototype.jpeg파일의 주소" type="text/javascript"></script>
<script language="javascript">
function showTitle(srcUrl, width, height, titleStr, linkStr, hAlign, tColor){
  var str = "<embed id=\"viewTitle\" name=\"viewTitle\" type=\"application/x-shockwave-flash\" src=\"" + srcUrl + "\" width=\"" + width + "\" height=\"" + height + "\" wmode=\"transparent\"" + " allowScriptAccess=\"always\"" + "FlashVars=\"" + "articleTitle="+ pEncode(titleStr) +"&linkTo=" + linkStr + "&hAlign=" + hAlign + "&tColor="+ tColor + "\"/>";
  document.write(str);
}

// percent-encoding
function pEncode(str){
  str = str.replace(/&amp;/g, "%26");
  str = str.replace(/[+]/g, "%2b");
  return str;
}
</script>

     제가 적용한 화면을 참조하시기 바랍니다.

[※ 이미지를 클릭하면 원본 사이즈로 보실 수 있습니다.]

  8) 거의다 왔습니다.

     skin.html에서 '' 이부분을 찾아보시기 바랍니다.

     잘 안뵈는 분들은 Ctrl + F를 누르셔서 검색해보시면 바로 나올 것입니다.

 

  9) 찾으셨나요? 각자의 스킨에 따라 다르겠지만 보통 다음과 같이 나올것입니다.

     <h2><a href=""></a></h2>

     주석처리하시거나 삭제하시고 바로 다음에 다음의 코드를 삽입합시다.

     -> 의미검색을 위해 남겨두는게 나을 것 같습니다.

        단지 스타일시트로 보이지 않게만 설정 할 것이므로,

        위 코드는 그대로 두시고 바로 다음에 다음 코드를 추가합시다.

<SCRIPT language=javascript>
showTitle("http://weberholic.byus.net/viewTitle.swf", 640, 50, ('').stripTags(), ('').substring(0,('').indexOf('" rel="bookmark')), "center", "0x000000");
</SCRIPT>

     위에서도 말씀드렸다 시피 위 내용 그대로 쓰시면 제가 올려둔 viewTitle.swf를

     쓰시는것으로 나중에 제목이 안나오는 사태가 발생할 수 있다는 점 알아두세요.

     가지고있는 계정이 있으시다면 위 링크를 본인 것으로 교체하시기 바랍니다.

 

     또한 위의 코드에 보이는 640은 플래쉬의 가로사이즈이며,

     50은 세로사이즈,

     center는 가운데정렬(왼쪽정렬 : left, 오른쪽정렬 : right),

     마지막의 0x000000(검정색) 는 제목의 색상입니다.

     컬러값을 모르시면 http://html-color-codes.info 여기를 참조하세요.

 

     제가 적용한 화면을 참조하시기 바랍니다.

[※ 이미지를 클릭하면 원본 사이즈로 보실 수 있습니다.]

 

 10) 원래 텍스트로 출력되었던 제목을 스타일 시트를 통해 숨겨줍시다.

     이렇게 하는 이유는 플래쉬로 변환된 제목은 사람의 눈에는 제목으로 보이지만,

     검색로봇이라던가 컴퓨터들 눈으로는 제목을 알 수 없기 때문입니다.

     스타일 시트에서 '.content .titleWrap h2 a'로 검색을 하여 끝부분에

     'display:none;'을 추가해 줍시다.

     그럼 결과는 다음과 같겠죠?

.content .titleWrap h2 a { font-size:14pt; color:#fff; font-family:GulimChe,Sans-serif; display:none;}

     위 부분을 못찾으셨다면 skin.css파일 제일 하단에 다음과같이 추가해 줍시다.

.content .titleWrap h2 a { display:none;}

     본인의 스킨에 따라 제목 형식이 위와 같지 않을 수도 있습니다.

     자신의 제목 양식에 맞춰 수정하시기 바랍니다.

 

 11) 완료되었습니다. 적용하시고 확인해 보시기바랍니다.

 

 

3. 마무리

  

  1) 중요한 내용인데요, 제목에는 ' <- 이 작은 따옴표를 사용하지 마시기 바랍니다.

     자바스크립트가 피를 토합니다.

 

  2) 보시다시피 플래쉬 소스의 배경색이 완전히 투명하지가 않습니다.

     블로그가 흰색 배경이라면 별 문제 안되겠지만,

     저처럼 어두운 블로거에게는 아쉬운 점이네요... T.T

     (첨엔 아쉬웠는데 이제보니 은근히 어울리는것도 같네요~ ^^)

     혹시나해서 윈도 컬러셑을 32비트로 바꾸어 보았습니다.

     헉~ 아주 깔끔하게 잘 나오는군요.

     여기저기 다른 사이트를 훑어보니 16비트보다 확실히 느낌이 더 좋네요.

     정신건강을 위해 32비트로 갈아타야겠네요.

     참고로 16비트에서 보이는 화면은 아래와 같습니다.     

[※ 이미지를 클릭하면 원본 사이즈로 보실 수 있습니다.]

 

  3) 그런데 적용하고도 궁금한점이 있습니다.

     왜, Prototype 이 있어야 하는걸까요? 이게 없으면 에러가 나는군요.

     텍스트큐브닷컴이 아닌 텍스트큐브와 티스토리는 Prototype이 기본으로

     달려있어서 에러가 나지 않는 걸까요? @_@

 

  4) 이렇게 우회적으로 자바스크립트 파일을 사용하는것이 좀 더 알려지다 보면

     텍스트큐브닷컴에서 이를 막아버리는 상황이 발생할 수도 있을 것 같습니다.

     혹시라도 이런 상황을 텍스트큐브닷컴쪽에서도 주지하고 있다면,

     근본적으로 왜 이런 일들이 일어났는지에대해

     좀 더 생각해 주셨으면 하는 바램이 있네요.

 

  5) 이상의 텍스트큐브닷컴의 물결플래쉬 제목 적용 팁을 지니님께 바칩니다.

     그러니 오후에 못한 업무 대신 처리해 주십시요~ ^^;