티스토리 블로그 댓글창에 이미지 넣기
2013.09.15 20:54
티스토리 블로그 댓글창에 이미지 넣기
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

오늘 소개할 블로그 팁은 댓글창에 이미지를 넣는 방법입니다.

 

지금까지 제 블로그에 적용하거나 적용하고픈 마음이 없었는데 요즘은 넣어야 겠다는 생각이 들어 제 블로그에 달면서 글 작성합니다.

 

블로그 댓글창에 이미지 넣기를 이용하면 쉽게 알리고자 하는 글이나 경고문구를 넣을수 있습니다.

 

저두 댓글창에 이미지 넣기를 적용하는것은 댓글 작성시 비밀글로 하지 말아달라는 문구때문에 적용합니다.

 

댓글도 정보입니다.

 

제가 모르는 부분, 글로 표현못한 부분을 댓글에서 배우고 깨우칠수 있는데 가끔 비밀글로 작성을 하시는 분이 계십니다. 티스토리 특성상 비밀댓글에 제가 답을 달면 제 글만 보여지는데 다른분이 보시면 질문글을 못보고 답글만 보시니 문맥도 이상하고..

 

서론이 길었네요. 댓글창에 이미지를 넣어주고 마우스를 댓글창에 클릭하면 사라지고 마우스 커서가 다른곳으로 가면 다시 이미지가 나오는 방식을 넣겠습니다.

 

댓글창에 마우스커서에 반응하는 이미지 넣기

 

댓글창에 사용할 이미지를 준비하세요. 이미지 사이즈는 사용하시는 스킨마다 틀리니 ...

이미지가 준비되셨으면 블로그 관리자 -> HTML/CSS 편집 -> 파일업로드에 이미지 파일을 올려주세요.

 

블로그 관리자 -> HTML/CSS 편집 -> HTML/CSS 를 선택하시고 키보드 Ctrl + F를 누르면 "찾기"창이 뜹니다. "rp_input_comment"을 찾기하면 딱 한군데 나옵니다.

 

박스로 표시한 부분중  rows="8" 다음에 아래 소스를 넣으시면 됩니다.

 

style="background:url(./images/이미지파일이름) no-repeat right; background-color:#FFFFFF;" onFocus="this.style.backgroundImage='';" onBlur="if(this.value==''){ this.style.backgroundImage='url(./images/이미지파일이름)'; }" title="댓글을 남겨주세요^^"

 

배경 왼쪽,가운데,오른쪽 조정은 right수정하시면 됩니다.background-color:#FFFFFF; 는 삭제하고 사용중입니다.배경컬러지정인데 스킨자체에서 댓글창에 색상 지정이 되있는데 굳이 할 필요성이 없다고 느껴서요.

 

소스 보기 : comment_image.txt

 

 

위 이미지처럼 넣어주시면 됩니다.

 

<textarea name="[##_rp_input_comment_##]" id="comment" cols="50" rows="8" style="background:url(./images/comm.png) no-repeat right; background-color:#FFFFFF;" onFocus="this.style.backgroundImage='';" onBlur="if(this.value==''){ this.style.backgroundImage='url(./images/comm.png)'; }" title="댓글을 남겨주세요^^"></textarea>

 

빨간색 부분이 추가된 소스

 

이것으로 소스 수정이 끝났습니다. 만약 방명록 글쓰기 폼에도 적용하실분은 "guest_textarea_body"를 검색하셔서 소스 넣어주시면 됩니다.

, , , , , , , , , , , , ,

  1. 저도 댓글창에 이미지를 넣고 싶은데 귀찮음이...ㅜㅜ

  2. 안녕하세요. 한성민님
    안달아두 된다면 안다는게 좋을듯 합니다.

    아무리 작은 용량의 이미지 파일이라도 모이다 보면 블로그 느려질수도 있구요.^^

    댓글 감사합니다.

  3. 찾던게 여기있네요 감사합니다

  4. 잘 사용하시구 알찬 블로그 운영하세요.^^
    댓글 감사 합니다.