블로그를 하면서 이모티콘도 넣고싶어서 이것저것 찾아보다가
우연히 발견했다!!

bbcode!! 이것이다!!

방명록과 댓글에도 손쉬운 태그를 사용해서 링크도 걸 수도 있고 이모티콘도 넣을 수 있고
(이모티콘은 아직 삽질 중이다)

bbcode설명서보기

bbcode를 이해하셨다면 이제 적용을 해봐야겠죠?
텍스트큐브용은 Sleepy님이 포스팅해주신 내용으로 적용하시면 되겠습니당

내용보기

bbcode

BBCode for Textcube + Helper

◆ 탄생 설화

나비님으로부터 inureyes님의 BBCode 출력 플러그인을 소개받아 사용하던 어느날, bluenlive님께서 텍스트큐브의 BBCode 플러그인을 탐내시더니 급기야 티스토리에서도 BBCode를 사용할 수 있는 BBCode for tistory를 개발하기에 이른다.
같은 티스토리 유저이신 엔즐님께서 버튼을 클릭하여 입력을 편리하게 할 수 있는 아이디어를 제공. 블럭을 설정해서 현재 선택된 부분에 코드를 적용하게끔 개선된다.
시간이 흘러 bluenlive님과 함께 킹크랩을 맛있게 먹음. 며칠 뒤 BBCode를 쉽게 적용할 수 있도록 ‘BBCode 삽입 도우미 만들기’라는 팁을 게시. 옥토씨, 내심 wysiwyg 에디터 스타일의 버튼을 만들어야겠다고 생각했으나 Forevler님께서 이미 구현중… 이것을 보고 bluenlive님께서 자신의 블로그에 업어오신걸 옥토씨가 다시 업어옴. 왼손은 거들뿐…
어제밤, 규식아버님께서 플러그인의 embed 태그를 개선해 주셨다. 고마워요 (정)규식아빠~
도우미를 에디터의 버튼바 형식으로 꾸미고 일부 텍스트를 모두 아이콘으로 교체. 아이콘 그리는게 이렇게 어려운 줄 몰랐음ㅠㅠ (달랑 세개;;)

 

◆ 플러그인 설치

※ 주의 : BBCode 플러그인은 댓글/방명록 뿐만 아니라 본문에도 적용됩니다.

‘Textcube 설치 폴더/plugins’ 폴더에 압축을 풀고 플러그인 설정 페이지에서 ‘사용’으로 지정한다.

제공되는 코드는 대충 아래정도이다.

[b][/b] : 글씨를 굵게함
[i][/i] : 글씨를 기울임
[u][/u] : 글씨에 밑줄
[color=색상][/color] : 텍스트 색상 (‘red/green’ 등의 이름이나 ‘#ff0000’같은 색상 코드를 사용)
[url=주소][/url] : 하이퍼링크 연결
[quote][/quote] : 인용 상자
[img=주소] : 이미지 삽입
[embed=주소 너비 폭] : 동영상 삽입. ‘너비’와 ‘폭’은 생략이 가능하며, 생략시 425×355로 지정

주황색은 블럭 상태에서 텍스트가 들어가는 위치

 

◆ BBCode 버튼바 설치

압축파일 안의 /images 폴더에 있는 파일은 skin폴더/images 폴더에 압축 해제한다.

style.css 수정

style.css 수정
skin 폴더의 style.css 파일에 상자 안의 내용을 추가한다.

/* ——————————————————————- */
/* BBCode Helper */
/* ——————————————————————- */
.emoticonborder { border-style: solid; border-width: 1px; border-color: #cbcbcb; padding: 3px; margin: 0 0 -2px 0; height: 21px;}
.emoticons { cursor:pointer; float: left; margin:2px 2px 1px 0; }
.emoticonspace { float: left; margin-right:0px; }
.emoticonusage { cursor:pointer; float: right; }
a.rollover img { border-width:0px; display:block; }
a.rollover img.rollover { display:none; }
a.rollover:hover { position:relative; background-color:transparent !important;}
a.rollover:hover img { display:none; }
a.rollover:hover img.rollover { display:block; }

skin.html 수정

skin.html 수정
1. 압축파일 속 타이틀.txt 파일의 내용을 복사하여 skin폴더/skin.html…</title> 뒤에 붙여넣는다.

2. <textarea로 검색하면 두군데가 나올텐데 각각 아래와 같이 id=… 부분을 추가해 준다.

<textarea name=”…” id=”…” cols=”50″ rows=”6″> </textarea>
▲ 방명록      /      ▼ 댓글
<textarea name=”…” id=”comment_” cols=”50″ rows=”6″> </textarea>

3. 압축파일 속 방명록.txt 파일의 내용을 복사하여 방명록의 <textarea 앞에 붙여넣고 댓글.txt 파일의 내용은 댓글의 <textarea 앞에 붙여넣는다.

방명록.txt, 댓글.txt 파일에서 스킨폴더로 써있는 부분은 각자 블로그의 경로에 맞게 수정한다

티스토리를 쓰시는분들은 네이버에 ‘bbcode 티스토리’로 검색하시면 많이 나와있습니다ㅎ
이제 댓글이랑 방명록에 이모티콘넣는 창을 추가해야하는데 쉽지 않을것같네요..OTL
성공하면 포스팅하도록 하겠습니다 🙂

cute_babe