티스토리 댓글창에 BBCode 사용하기

오늘은 티스토리 댓글창에 BBCode를 사용하는 방법을 간단히 소개해보려고 합니다.
BBCode란 우리가 흔히 사용하는 HTML과 비슷한 역할을 하는 가벼운 마크업(markup) 언어입니다.

그렇다면  굳이 티스토리 댓글창에 BBCode를 사용하려는 이유가 무엇일까요?
위에 적은 것처럼 BBCode는 마크업언어이기 때문에 단순히 문자만 사용할 수 있는 티스토리 기본 댓글보다 더 많은 역할을 할 수 있습니다.

가장 대표적인 기능이 이미지&동영상 첨부이고, 글자에 여러가지 효과를 주는 것도 가능합니다.
(볼드체, 기울이기, 밑줄긋기, 색상넣기, 링크걸기 등등)
특히 이미지첨부 기능을 이용해서 댓글창에 이모티콘 기능을 넣을 수 있는데 깔끔한 것을 좋아하는 블로거 일지라도 방명록에는 한번쯤 활용해봄직한 기능입니다.

본격적으로 BBCode를 적용하기 위해선 아래의 순서대로 따라오시면 됩니다.

  1. BLUEnLIVE님이 만드신 BBCode 3.5를 다운받아 압축을 풉니다.
  2. BBCode35 – TiStory 폴더에 있는 파일들을 티스토리 HTML/CSS 편집 – 파일업로드 – +추가 를 통해 업로드합니다. 단순히 BBCode 기능만을 더하시려면 bbcode35.js만 업로드하시면 됩니다. 다른 파일들은 이모티콘 활용 및 티스토리 댓글창을 BBCode 에디터로 만들기 위한 이미지 파일들입니다.
    bbcode35.js 파일을 개개인에 맞게 수정 후 사용하시면 더욱 좋습니다. 저는 개인적으로 명령어를 한글로 바꾸어 사용중입니다.
  3. Helper 폴더 안에 있는 BBCodehelper for TiStorySkin을 통해 사용중인 스킨의 HTML을 수정해줍니다.
    [pe2-image src=”http://lh4.ggpht.com/-1qLqDCQ4Nag/UpSWqVXex_I/AAAAAAAAJF0/U68iBabNp3Y/s144-c-o/20131126001.jpg” href=”https://picasaweb.google.com/114042155253071707161/Rainpencil_2013#5950546661697570802″ caption=”Tistory BBCode” type=”image” alt=”20131126001.jpg” pe2_gal_align=”none” ]

    기존에 사용하던 소스를 붙여넣고 적용키를 눌러주는 것만으로 손쉽게 BBCode가 적용됩니다.
    BBCode가 적용된 소스를 다시 복사해 티스토리의 HTML을 편집해주시면 됩니다.

위의 작업까지 완료하셨다면 여러분은 [BBCode 명령어] 쓸 말 [/BBCode 명령어] 과 같은 형식으로 BBCode를 사용하실 수 있습니다.

방문자가 BBCode를 사용하기 쉽도록 하기 위해서는 BBCode 삽입 도우미 만들기를 참고하시길 바랍니다. 위의 포스팅을 참고해서 여러분만의 이모티콘과 디자인으로 멋진 댓글창을 만드시길 빌겠습니다.

글자와 비슷한 크기로 이모티콘을 적용하셔서 깔끔한 우주오빠님 블로그를 참고하시는 것도 도움이 될 것 같습니다.