양파군 이모티콘 메뉴 추가하기!

Enjoying 2009/05/14 23:38
Bold나 색을 이용한 강조에 치우치지 마시고 처음부터 끝까지 천천히~ 읽어주세요~^▽^

안녕하세요 ^-^;; 영원을 즐기는 여행자 Forevler입니다. (포레블러라고 읽으시면 되요~ ;)

안면도 다녀온 사진들은 어찌 못할 사정으로 인하여 계속 정리만 하고 있구요 ^^;;
원래의 목적을 벗어나서 강좌를 쓰려고 또 시작하는 1人입니다.
찾아오시는 분들께 계속 죄송한 글만 올리네요.

게다가 이 강좌의 대부분의 내용은 프로그램화되어 10분 걸릴 일 2분으로 줄일 수는 있지만,, 귀차니즘+스스로 하는 기쁨을 여러분께 드리기 위해(?)서 강좌를 씁니다.
하지만 이 강좌가 도움을 드릴 수 있기를 빌면서 시작해 보겠습니다!


이 강좌를 읽고 실천하시기 전에 아래와 같은 내용이 이미 블로그에 적용되어 있으셔야 합니다
  • BBcode for Tistory 2.5 재업 에서 제공되는 js가 블로그에 적용되어 있어야 합니다
  • 위 js 의 설치방법은 BBcode for Tistory 2.1 수정 공개 를 참고하시면 됩니다.
  • BBcode 삽입 도우미 만들기 에서 강좌가 제공되는 도우미가 블로그에 적용되어 있어야 합니다.
  • 위의 삽입 도우미를 사용하시려면 티스토리 플러그인에서 제공되는 이모티콘 플러그인이 적용되어 있어야 합니다.
  • 또한 블로그 스킨에 Show/Hide 자바스크립트가 추가되어 있으셔야 합니다.

    • Show/Hide가 적용되어 있지 않으신 분들은.. (클릭하세요!)

이정도면 될 듯 싶네요^^ (사실 여기까지만 해도 굉장히 긴 시간이 걸립니다.)

※작업을 시작하기 전에 스킨의 백업은 필수입니다~!!


1. 재료 다운로드

이모티콘 109개 가량을 압축해 놓은 파일입니다.
다운로드
양파군의 모든 이미지들은 Creative Commons의 BY-NC-ND저작권을 따릅니다. 더 많은 정보는 Creative Commons By-Nc-Nd 페이지를 확인하세요~ ^^
외국어로 되있다 보니.. 제작자의 이름은 잘 모르겠고, EmStudio가 글 올린 사람의 닉네임인듯 싶습니다. 일단 EmStudio에 저작권이 있다고 밝혀 놓도록 하지요.

위의 파일을 압축을 푸신후 어드민 - 스킨 - 스킨 선택 - 파일 업로드에 들어가셔서 파일 업로드를 누르신 후 109개의 이미지를 모두 업로드 합니다.

사실상 더 이상의 재료는 필요가 없습니다.


2. JavaScript 파일 수정

본격적으로 스킨 뜯어고치기에 들어가겠습니다. 먼저 JavaScript 파일을 수정해서 [emo=숫자]와 [emoticon=숫자]를 지원하도록 만들어 보겠습니다.
먼저 블로그의 스킨 주소를 알아내야 하는데요, 간단하게 이미지 없이 설명하도록 하겠습니다.
이미 BBcode를 적용하신 분들은
<script type="text/javascript" src="./images/bbcode25.js"></script>
이 줄을 추가하셨을 텐데요, "./images" 는 블로그에 실질적으로 들어갈 때는 실제 주소로 값이 변환됩니다.
그러므로 자신의 블로그에서 소스 보기를 한후 위와 같은 부분은 꼭 bbcode 가 아니더라도 블로그 스킨 주소만 알아내시면 됩니다.
저 같은 경우는
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/30/305123/skin/images/bbcode25cs.js"></script>

이런식으로 변환된 값이 나오는군요 ^^ (저는 제가 수정한 js 파일이라서 이름에 cs 를 붙여서 사용하고 있습니다)
그러면 저의 블로그 스킨 경로는
http://cfs.tistory.com/custom/blog/30/305123/skin/images
가 됩니다. 여러분의 스킨 경로를 일단 상콤하게 복사해 두세요. 곧 쓸 시간이 옵니다.

이제는 여러분의 bbcode25.js 파일을 메모장으로 상콤하게 열어주세요.
(Microsoft에서 제공하는 메모장은 매우 알흠다우므로 메모장2를 사용하시기를 강력히, 아주 강력히 추천드립니다.)

대충 아무데나 정확히 넣으면 상관이 없긴 합니다만, 강좌도 강좌니 한 곳을 지정해서 쑤셔 넣도록 하겠습니다.
아래 내용을 메모장에서는 찾으시고, 메모장2에서는 상콤하게 검색해 주세요.
.replace(/\[img=([\w]+?:\/\/[^ \"\n\r\t<]*?)\]/gi,'<img src="$1" hspace="2" alt=""/>')
위 스크립트 뒤에 아래의 내용을 추가합니다. (※ ';'앞에 추가하셔야 됩니다!!)
전 Java를 배워본적이 없어서 대충 만들어서 작동되는것만 확인하고 만족했습니다 ^^:;

.replace(/\[emoticon=([\d]+?)]/gi, '<img src="블로그 스킨 경로/forevler_$1.gif">').replace(/\[emo=([\d]+?)]/gi, '<img src="블로그 스킨 경로/forevler_$1.gif">')
블로그 스킨 경로를 여러분의 스킨 경로로 수정하시고, 저장후 블로그 스킨 업로드에서 예전 것을 지워버리고 새 것을 상콤하게 업로드 해 줍니다~

3. skin.html에 Guestbook 스크립트 추가하기

이번에는 skin.html에 방대한 양의 스크립트를 추가하도록 하겠습니다.
작업하기 쉽도록 여러분의 skin.html 를 모두 복사해서 메모장 또는 메모장2에 붙여넣어 주세요.

아래 내용을 찾아주세요^^
name="[#/#_guest_textarea_body_#/#]
만약 여러분께서 BBcode 도우미를 적용하셨다면 위 내용의 앞 또는 뒤에

id="내용"
을 추가하셨을 겁니다. 내용을 복사해 주세요 (여러분의 '내용'입니다 허허;;; 정말로 '내용'을 복사하시면 안되요~)

그 후에, 아래의 '추가할 스크립트 보기'를 누르신 후 모두 복사하여 메모장 또는 메모장2를 한번 더 실행하셔서 새 창에 붙여 넣습니다.

추가할 스크립트 보기

첫줄에 [#/#_guest_input_comment_#/#] 에 양쪽에 #/#를 모두 ##로 고쳐주셔야 합니다!!
이 내용은 지금부터 강좌 끝까지 사용되는 모든 치환자들을 포함합니다!

그 후, 편집 - 바꾸기 (단축키 Ctrl+H)를 이용하여, 찾을 문자열에는 내용을 넣으시고, 바꿀 문자열에는 여러분의 id값을 넣어주시면 됩니다. (id="내용" 중에 내용만 넣으시면 됩니다.)

한줄만 예를 들어 저의 경우에는
<a style=cursor:pointer; onclick="insertAtCursor('[#/#_guest_input_comment_#/#]','[emoticon=109]','')"><img src="./images/forevler_109.gif" align="texttop" class="rollover">&nbsp;</a>

로 바뀌네요~ ^^

이제 skin.html 에 위의 내용을 붙여넣기 전에, Show/Hide 효과로 '이모티콘 고르기' 버튼을 추가하도록 하겠습니다.
BBcode 삽입 도우미 만들기 기준으로 설명드리도록 하겠습니다.

<a onclick="javascript:bbcodeintro();" title="BBCode 사용법" class="rollover">
<strong>BBCode 사용법</strong></a>

이러한 스크립트 앞이나 뒤에 여러분이
<a style="cursor:pointer;" onclick="showHide('emoselect[#/#_guest_input_comment_#/#]')"><strong>이모티콘 고르기</strong></a>
을 추가하시면 됩니다.

저의 경우에는 폰트값을 조금 조정해서
<FONT color="#1999cf"><STRONG><A onClick='javascript:bbcodeintro();' style=cursor:pointer;>버튼 사용법 클릭!</A>,  <a style="cursor:pointer;" onclick="showHide('emoselect[#/#_guest_input_comment_#/#]')">이모티콘 고르기</a></STRONG></FONT>
이런식으로 만들었네요 ^^

이제 Show/Hide 버튼까지 만들었으니, 위의 방대한 분량의 스크립트를 복사하신 후, BBcode 삽입 도우미 만들기 기준으로
<span style="cursor:pointer"><a onclick="javascript:bbcodeintro();" title="BBCode 사용법" class="rollover">
<strong>BBCode 사용법</strong></a></span></div>
</div>
뒤에 싸그리 마그리 붙여 넣으시면 됩니다~

이제 Guestbook 스크립트 추가는 모두 끝났습니다!
거의 다 왔으니 힘 내세요~

다음 단계 들어가기 전에 Guestbook 에서 이모티콘들이 정상 작동하는지 확인하신 후 넘어가세요 ^^
실수는 반복하기 쉬우니까요~


3. skin.html에 Comment 스크립트 추가하기

Guestbook 과 거의 틀린 내용이 없으므로 아주 빨리 진행하겠습니다~ (사실 지금 해야될 숙제가 심각할 정도로 많아서 ^^;;)

이번에는 아래 내용이 이번에 사용될 그 유명한 ID값 가까이에 있는 스크립트입니다.
name="[#/#_rp_input_comment_#/#]
앞에나 뒤에서 id="내용"중에 내용을 복사해 두세요.

이번에도 막대한 양의 스크립트를 올려드립니다. 바뀐 부분은 파란색으로 표시한 부분 말고는 없습니다^^ (여기도 #/#를 ##로 바꾸어 주세요!)

추가할 스크립트 보기

이번에도 역시 바꾸기 기능을 이용해서 내용을 ID값으로 바꾸어 줍니다.

이모티콘 고르기 버튼도 위와 다른 것은 아래의 추가할 스크립트에 파란색 부분 뿐이고, 나머지는 동일한 작업을 거치시면 됩니다. (물론 이번에는 Guestbook 쪽이 아니라 Comment 창의 스크립트를 고치셔야 합니다 ^^;)
<a style="cursor:pointer;" onclick="showHide('emoselect[#/#_article_rep_id_#/#]')"><strong>이모티콘 고르기</strong></a>

물론 스킨 작업 후에는 상콤하게 저장을 눌러주신 후에, 이번에는 Comment 창으로 가셔서 정상적으로 작동하는지 확인해 주시기 바랍니다~

덧붙여서.. 만약 [emo=숫자]를 사용하고 싶으시다면 방대한 스크립트를 메모장2에 넣으신 후 [emoticon= 을 [emo= 로 모두 바꾸기 하는 작업을 거쳐주시면 됩니다 ^^ 위에서 이미 두가지 방식 모두 다 JS 파일에 추가를 했으니깐요~

꼭 블로그 어딘가에 이모티콘들의 저작권을 표시하여 주시기 바랍니다! 예를 들어 양파군 - EmStudio 하고 링크를 http://blog.roodo.com/onion_club에 걸어두셔도 좋구요~^^ 제작자 같은 것만 표시해 주시면 만사 오케입니다 :D


이제....... 남은 일은 방문자 분들께 이모티콘 사용을 적극적으로 권장하는 것 뿐입니다! 움하하하!!

여러분 정말 수고하셨습니다~
제가 잘 썼는지 모르겠네요 호호;

이번주 내로 꼭 사진 포스팅 한번 더 하겠습니다, 찾아주시는 분들 감사드려요~
저작자 표시 비영리 동일 조건 변경 허락
Posted by Forevler
Tag , , , ,
Trackback 7 Comment 55
prev 1 ... 31 32 33 34 35 36 37 38 39 ... 106 next
openclose