티스토리 블로그에 이모티콘을 적용해 봅니다.


이전에 "정말 쉬운 티스토리 이모티콘 사용 방법" 이라는 글을 포스팅 한적이 있습니다.


당시에는 코드를 직접 만들고 적용하다보니 크게 불편함이 없다고 생각했었는데 이모티콘이 변경될 때마다 방문자들에게 일일이 문구를 공지해야 하고 이모티콘 문구를 일일이 입력해야 되는 번거로움이 있어 이모티콘 이미지를 클릭하면 자동으로 댓글에 입력되는 형태로 바꾸어 보았습니다.

참고사항
- 첨부파일에 코딩된 내용이 포함되어 있으니 다운로드후 이용하시면 됩니다.
- 소스에 알아보기 쉽게 주석처리로 설명해 두었습니다.
- 티스토리 스킨마다 ID와 Class가 다르기 때문에 저와 똑같은 "탕비수다" 스킨을 사용하지 않는다면 ID, Class 수정후 사용하셔야 합니다.
셋팅


1) 사용할 이미지를 찾아 티스토리에 업로드 또는 링크를 준비합니다.

* 첨부파일에는 이모티콘 이미지가 들어있지 않습니다.

* 제 블로그처럼 카카오톡 이미지를 이용하려고 한다면 "C:\Program Files (x86)\Kakao\KakaoTalk\resource\basic_emoticon" 여기를 참고해 주세요.



2) 스킨편집에서 [head] ~ [/head] 사이에 위와 같이 withu_emoticon.css 파일을 불러옵니다.



3) [s_rp_input_form] 을 찾아 위의 이미지에서 보이는것과 같이 html 코드를 넣어줍니다.



4) 마지막으로 jquery.caret.js, withu_emoticon.js 를 불러옵니다.

사용법


정상적으로 파일이 로드 되었다면 위와 같이 이모티콘 목록이 생성되어 집니다.

이모티콘 목록을 클릭하면 숨겨져있는 이모티콘이 노출되며 이미지 클릭시 댓글란에 자동으로 입력됩니다.

 * html 구조상 textarea 안에는 이미지가 들어갈수가 없기 때문에 이미지 대신 대체 문자 이모티콘이 입력되며 댓글 입력후에는 정상적으로 이미지가 노출됩니다.



댓글 작성후에는 위와 같이 문자 이모티콘에서 이미지로 바뀝니다.

WithU

모바일 어플 및 PC 관련정보 제공

    이미지 맵

    블로그 다른 글

    댓글 2

    *

    *

    이전 글

    다음 글

    티스토리 툴바