BBCode for Tistory를 설치했습니다.
2009/09/19 12:28
Informa[T]ion!/Computer
BLUEnLIVE님께서 제작 해주신 BBCode for Tistory를 설치했습니다. 지우개님의 소개로 알게 됐는데 요놈 상당한 물건이네요~
BBCode는 댓글&방명록 출력을 깔끔하게(볼드, 이탤릭, 밑줄, 이미지넣기, 동영상 넣기, 이모티콘 넣기 등...) 해주는 플러그인 같은 것입니다. 티스토리에서 공식적으로 BBCode 플러그인을 지원하지 않아 BLUEnLIVE님께서 제작&배포를 해주시고 있다고 하네요~ 참으로 감사할 따름이지요~^^
BBCode for Tistory가 탄생하게 된 비화를 문스팸님께서 자세히 설명해 주셨습니다.
설치 과정
배포하시는 BLUEnLIVE님 께서 손수 자세하게 설명을 해 주셨기 때문에 저는 큰 그림&다루시지 않은 부분만 설명하고 자세한 설명은 배포자님의 블로그로 링크해 드립니다.
일단 설치하는데 필요한 과정을 크게 보면~
1. BBCode를 내 블로그에 심는다. (js파일과 이미지 파일 업로드&skin.html 내용 추가)
2. BBCode 삽입 도우미를 설치한다. (이미지 파일 업로드&style.css 내용 추가&skin.html 내용 추가)
3. 최신 버전에 맞도록 소스를 살짝 수정한다. (skin.html 수정)
먼저 BBCode의 최신버전은 http://zoc.kr/584 여기로 가면 구할 수 있고, 설치 방법 또한 안내하고 있는 링크를 따라가면 손쉽게 설치할 수 있습니다. 현재 3.1 버전까지 나왔으며, 제작자님의 말을 봤을 때, 큰 버그가 발견되지 않는다면 앞으로 업데이트 버전이 나올지는 미지수인 것 같네요.
그런데 내 블로그에 최신 버전을 심어놓는다고 댓글 창에 저렇게 입력도구가 나오진 않습니다. (저는 자동으로 나오는 줄 알고 한참 헤맸습니다.) 그래서 따로 BBCode 삽입 도우미를 설치해야 하는데, 설치 방법은 http://zoc.kr/493 여기로 가시면 자세히 나와있습니다. 그대로 따라하시면 됩니다. 제작자님께서 워낙 자세하게 설명을 해 주셨기 때문에...^^
여기까지가 2번의 과정을 마친 것입니다. 그런데 3번은 무슨 말이냐면...저기 소개 되어있는 BBCode 삽입 도우미가 예전 버전용이기 때문에 업데이트 된 이모티콘이 적용이 안됩니다. 그리고 OTL, :O, :x와 같은 추가 이모티콘을 적용하려면 약간의 소스 수정이 필요합니다.
소스의 수정이 필요한 부분에 대해 알아봅시다.
BBCode 삽입 도우미의 textarea 앞에 추가 하라는 소스의 이미지 태그가 들어간 부분의 수정이 필요합니다. 새로운 이모티콘으로 적용하기 위해서죠~ (모든 이미지 태그 부분을 수정할 필요는 없습니다. 앞부분 사진, 링크, TV모양 이미지는 그대로 사용되고, 실제 이모티콘 부분만 수정하면 됩니다.)
예를 들어 37~41줄 소스를 보면 아래와 같습니다. 이 소스는 첫번째 이모티콘인 :) 입니다.
그리고 마지막으로 제작자님께서 말씀하신 내용인데 제대로 적용을 하려면 센터 > 플러그인 > 댓글/방명록 이모티콘 표시를 사용안함으로 바꿔주셔야 제대로 적용됩니다.
마지막으로 좋은 프로그램 공개해 주신 BLUEnLIVE님께 감사드립니다.
BBCode는 댓글&방명록 출력을 깔끔하게(볼드, 이탤릭, 밑줄, 이미지넣기, 동영상 넣기, 이모티콘 넣기 등...) 해주는 플러그인 같은 것입니다. 티스토리에서 공식적으로 BBCode 플러그인을 지원하지 않아 BLUEnLIVE님께서 제작&배포를 해주시고 있다고 하네요~ 참으로 감사할 따름이지요~^^
BBCode for Tistory가 탄생하게 된 비화를 문스팸님께서 자세히 설명해 주셨습니다.
나비님으로부터 inureyes님의 BBCode 출력 플러그인을 소개받아 사용하던 어느날, bluenlive님께서 텍스트큐브의 BBCode 플러그인을 탐내시더니 급기야 티스토리에서도 BBCode를 사용할 수 있는 BBCode for tistory를 개발하기에 이른다.
같은 티스토리 유저이신 엔즐님께서 버튼을 클릭하여 입력을 편리하게 할 수 있는 아이디어를 제공. 블럭을 설정해서 현재 선택된 부분에 코드를 적용하게끔 개선된다.
시간이 흘러 bluenlive님과 함께 킹크랩을 맛있게 먹음. 며칠 뒤 BBCode를 쉽게 적용할 수 있도록 'BBCode 삽입 도우미 만들기'라는 팁을 게시. 옥토씨, 내심 wysiwyg 에디터 스타일의 버튼을 만들어야겠다고 생각했으나 Forevler님께서 이미 구현중... 이것을 보고 bluenlive님께서 자신의 블로그에 업어오신걸 옥토씨가 다시 업어옴. 왼손은 거들뿐...
어제밤, 규식아버님께서 플러그인의 embed 태그를 개선해 주셨다. 고마워요 (정)규식아빠~
도우미를 에디터의 버튼바 형식으로 꾸미고 일부 텍스트를 모두 아이콘으로 교체. 아이콘 그리는게 이렇게 어려운 줄 몰랐음ㅠㅠ (달랑 세개;;)
설치 과정
배포하시는 BLUEnLIVE님 께서 손수 자세하게 설명을 해 주셨기 때문에 저는 큰 그림&다루시지 않은 부분만 설명하고 자세한 설명은 배포자님의 블로그로 링크해 드립니다.
일단 설치하는데 필요한 과정을 크게 보면~
1. BBCode를 내 블로그에 심는다. (js파일과 이미지 파일 업로드&skin.html 내용 추가)
2. BBCode 삽입 도우미를 설치한다. (이미지 파일 업로드&style.css 내용 추가&skin.html 내용 추가)
3. 최신 버전에 맞도록 소스를 살짝 수정한다. (skin.html 수정)
먼저 BBCode의 최신버전은 http://zoc.kr/584 여기로 가면 구할 수 있고, 설치 방법 또한 안내하고 있는 링크를 따라가면 손쉽게 설치할 수 있습니다. 현재 3.1 버전까지 나왔으며, 제작자님의 말을 봤을 때, 큰 버그가 발견되지 않는다면 앞으로 업데이트 버전이 나올지는 미지수인 것 같네요.
그런데 내 블로그에 최신 버전을 심어놓는다고 댓글 창에 저렇게 입력도구가 나오진 않습니다. (저는 자동으로 나오는 줄 알고 한참 헤맸습니다.) 그래서 따로 BBCode 삽입 도우미를 설치해야 하는데, 설치 방법은 http://zoc.kr/493 여기로 가시면 자세히 나와있습니다. 그대로 따라하시면 됩니다. 제작자님께서 워낙 자세하게 설명을 해 주셨기 때문에...^^
여기까지가 2번의 과정을 마친 것입니다. 그런데 3번은 무슨 말이냐면...저기 소개 되어있는 BBCode 삽입 도우미가 예전 버전용이기 때문에 업데이트 된 이모티콘이 적용이 안됩니다. 그리고 OTL, :O, :x와 같은 추가 이모티콘을 적용하려면 약간의 소스 수정이 필요합니다.
소스의 수정이 필요한 부분에 대해 알아봅시다.
BBCode 삽입 도우미의 textarea 앞에 추가 하라는 소스의 이미지 태그가 들어간 부분의 수정이 필요합니다. 새로운 이모티콘으로 적용하기 위해서죠~ (모든 이미지 태그 부분을 수정할 필요는 없습니다. 앞부분 사진, 링크, TV모양 이미지는 그대로 사용되고, 실제 이모티콘 부분만 수정하면 됩니다.)
예를 들어 37~41줄 소스를 보면 아래와 같습니다. 이 소스는 첫번째 이모티콘인 :) 입니다.
<div class="emoticons">이 소스에서 불러올 이미지 파일을 수정해야 합니다.(강조되어있는 부분) 현재 적용이 되어있는 소스의 이미지 파일은 티스토리에서 자체 제공하는 이모티콘 파일입니다. 따라서 아래와 같이 소스를 수정해 줘야 BBCode 3.1버전 안에 함께 동봉되어있는 이모티콘 파일로 적용이 됩니다.
<a href="#" onClick="insertAtCursor('', '', ':)');return false;" title=":)" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon06.gif">
<img src="./images/bb_emo6.gif"></a></div>
<div class="emoticonspace"> </div>
<div class="emoticons">파일명은 이모티콘 순서대로 되어있더군요. 그리고 앞에 나오는 이미지 파일은 컬러, 뒤에 나오는 이미지 파일은 흑백 파일입니다. 또, 적용해야 하는 부분이 방명록, 댓글 입력부분이라서 두 군데 모두 수정해야 합니다.
<a href="#" onClick="insertAtCursor('', '', ':)');return false;" title=":)" class="rollover">
<img class="rollover" src="./images/bbemo1.gif">
<img src="./images/bbemo1g.gif"></a></div>
<div class="emoticonspace"> </div>
그리고 마지막으로 제작자님께서 말씀하신 내용인데 제대로 적용을 하려면 센터 > 플러그인 > 댓글/방명록 이모티콘 표시를 사용안함으로 바꿔주셔야 제대로 적용됩니다.
마지막으로 좋은 프로그램 공개해 주신 BLUEnLIVE님께 감사드립니다.
'Informa[T]ion! > Computer' 카테고리의 다른 글
| Portable Program! (8) | 2009/09/30 |
|---|---|
| [파이어폭스] Adsense Notifier 0.9.8 파폭 3.5에서 설치하기 (0) | 2009/09/19 |
| BBCode for Tistory를 설치했습니다. (14) | 2009/09/19 |
| [파이어폭스] 블로그 방문자수 알리미 플러그인 (14) | 2009/09/12 |
| 티스토리 초대장 드려요 [마감] (46) | 2009/09/07 |
| 윈도우 7 정품인증 ㅠㅠ (27) | 2009/09/03 |
Comment List
2009/09/19 15:41
조만간 컴퓨터 박사 될 듯 ~~~ :D
2009/09/19 16:14
그리고 사실 저는 컴 박사입니다 :O
ㅋㅋㅋ 농담이구여~ 컴퓨터가지고 조물락조물락 하는거 좋아해서 관심가면 파는 스타일이라 ㅋㅋㅋ
2009/09/19 16:17
http://www.ziwoogae.com/1074
2009/09/20 00:41
일단 제 컴퓨터에 익스8이 깔려있지도 않고 해서...나중에 한번 시도해봐야겠어요~ :)
좋은 정보 감사드려요~
2009/09/19 20:55
2009/09/20 00:41
2009/09/21 09:27
html보다 간편하고 실용적이라서 해외 웹보드에선 많이들 사용하지만
국내엔 아직 보편화되지않아서 사용하질 않지만 플러그인 형식으로 나온다면 무척 간편해지는 코드인데..
아스키코드도 출력 되는데말이죠..:P
2009/09/21 23:08
마땅히 어떻게 소개를 해야 할지 몰라서 플러그인 같은 것이라고 설명을 하게 되었네요 ;)
티스토리에서도 공식 지원하면 좋으련만...
근데 파폭에서 원래 인식이 잘 안되나여?
ur이나 embed 같은게 잘 안보여지던데 OTL
익스에선 잘 보이구요~
2009/09/28 20:47
2009/09/29 23:41
2010/10/14 04:24
2011/06/14 18:13
2011/06/10 20:37
2011/06/14 18:13