댓글 입력창에 그림 배경 넣기 [티스토리 블로그 노하우]

[티스토리 블로그 노하우]
댓글 입력창에 그림 넣기

돌아다니다 보면 참~ 이쁜게 많이 있습니다. ^^ 그렇죠?
저도 꾸미는 것을 좋아해서 이것저것 하는데 너무 꾸미는 것은 그렇고 댓글에 그림넣는것은 너무 이쁘고 좋더라구요. 바로 적용해 보았습니다. 까먹을 까봐 이렇게 올립니다. 도움이 되시는 분들도 계실줄 알고 올리니 천천히 따라해 보세요~ ^ㅇ^


관리자 로그인 하시고
스킨 / HTML CSS 편집 메뉴로 들어갑니다.

댓글 창에 들어갈 그림을 만드셔서 '파일 업로드' 탭을 클릭하세요~

파일 업로드 버튼을 눌러 그림이 선택하시면 올릴 수 있습니다.

'HTML/CSS 편집' 탭을 눌려 편집창으로 돌아 오시고
키보드 CTRL + F 를 동시에 누르면 검색창이 나옵니다.
이곳에서 'rp_input_comment'를 검색 하세요
아래의 글은 제가 이미 수정한 상태이기 때문에 태그(글)가 다르게 보일 것입니다.

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 이렇게 워래 있는 태그를 (새로 스크린샷 찍어 올립니다. ^ㅇ^)
아래와 같이 메모장에 있는 태그로 교체하시면 됩니다.

 주의사항 : ★을 #으로 바꾸셔야 합니다. 아니면 글 아래에 있는 '티스토리_댓글창_배경이미지_넣기코드.txt' 파일을 다운로드 받아 사용하시면 좋습니다. ^^

마우스 클릭해도 사라지지 않는 그림 태그
<textarea style="background-image:url(./images/댓글이미지.jpg); background-repeat:no-repeat; background-position:right" name="[★★_rp_input_comment_★★]" rows="10" cols="110"></textarea> 

마우스 클릭하면 그림 사라지는 태그
<textarea style="background-image:url(./images/댓글이미지.jpg); background-repeat:no-repeat; background-position:right" name="[★★_rp_input_comment_★★]" rows="10" cols="110" onFocus="this.style.backgroundImage='';"></textarea> 붉은색 부분만 추가되었습니다.

→→→→→→→ 다운로드용 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

티스토리_댓글창_배경이미지_넣기코드.txt

능력이 되시는 분들은 원하는 이미지를 넣으시면 됩니다. (jpg 혹은 gif)

혹시 몰라 제가 사용하는 이미지 올려봅니다.
저같은 경우 파일 이름을 'coment01.jpg / coment02.jpg / coment03.jpg' 이런식으로 올려 놓았습니다. ^ㅇ^
나중에 바꾸기 쉽게 말이죠 ^^

그림 : coment01.jpg

그림 : coment02.jpg

==================================================================================



포토샵에서 제작을 하실 때에는 스크롤 되는 부분까지 감안을 해서 아래 그림과 같이
오른쪽에 스크롤 부분까지 희 여백을 주어야 합니다.

↓↓↓↓↓ 포토샵 원본 파일 ↓↓↓↓↓

댓글그림.psd

포토샵 원본 올려드렸습니다. 위에 파일 모양 클릭해서 받아가세요~

===================================================================================
여기부터 초보분들은 복잡해 지니까 보실 분만 보세요~

테그에 대해서 설명을 드리면 (★★ => ## 별을 샵으로 변경하세요)
<textarea style="background-image:url(./images/댓글이미지.jpg); background-repeat:no-repeat; background-position:right" name="[★★_rp_input_comment_★★]" rows="10" cols="110" onFocus="this.style.backgroundImage='';"></textarea>
붉은색 부분이 클릭했을 때 배경이 사라지는 태그 입니다. 삭제해도 무방합니다.

<textarea style="background-image:url(./images/댓글이미지.jpg); background-repeat:no-repeat; background-position:right" name="[★★_rp_input_comment_★★]" rows="10" cols="110" onFocus="this.style.backgroundImage='';"></textarea> 
댓글 입력창의 높이를 결정합니다. 10에서 9로 바꾸면 입력창의 높이가 12픽셀 줄어들게 됩니다.

<textarea style="background-image:url(./images/댓글이미지.jpg); background-repeat:no-repeat; background-position:right" name="" rows="10" cols="110" onFocus="this.style.backgroundImage='';"></textarea>
배경 그림이 패턴 형태로 할것이지 아닌지 결정하는 태그 입니다. 삭제를 하면 무한반복이 됩니다.

이것이 패턴의 원본입니다. 이것을 'coment03.jpg' 으로 파일을 업로드 하고
<textarea style="background-image:url(./images/댓글이미지.jpg); background-position:right" name="" rows="10" cols="110" onFocus="this.style.backgroundImage='';"></textarea>
이렇게 반복하는 태그를 없애면 어떻게 될까요? ^ㅇ^ 벽지처럼 도배가 되겠죠 ^^

패턴 이미지는 http://blog.naver.com/moonju4425?Redirect=Log&logNo=80139516071 님의 블로그에서 얻어왔습니다. 좋은 패턴이 많으니 한번 들려 보세요 ^ㅇ^


아이고 스크롤 압박~~~~ 너무 심하죠? 그럼 오늘은 여기까지 하겠습니다. 관련된 팁은 더 있으나 별로 쓰지도 않는 것이라 이것만 알아도 충분히 원하시는 이쁜 블로그 댓글 그림을 만드실 수 있습니다.

모르시거나 글이 도움이 되셨다면 댓글, 추천~ 아시죠 ^ㅇ^ 행복한 하루 되세요~