블로그 댓글창 배경 이미지 넣기

블로그 댓글창 배경 이미지 넣기

블로그에서 댓글창의 역할을 아주 중요한 위치를 차지합니다.
다들 아시겠지만 댓글이 많은 포스팅은 검색엔진에서 상위에 랭크 될 수 있는 점수를 받습니다.

고수님들 블로그를 구경하시다 보면 댓글 창에 이미지 또는 GIF 애니메이션이 삽입되어 있는 것을 많이들 보셨을 겁니다.
저 또한 궁금하여 쓸지 안 쓸지 모르지만 폼으로 만들어 두고자 이렇게 포스팅 하면서 폼 구성을 완료 했습니다.

초보 분들도 따라 하시기 쉽도록 구성해봤습니다. 
우리도 댓글창 꾸며 보아요.

쿨펀치의 세상리뷰 는 여러분의 소중한 댓글과 VIEW ON 클릭 구독 클릭이 큰힘이되어.
더 좋은 블로그를 만들 수 있게 하는 원동력이 됩니다.  

댓글창에 배경 이미지 넣기

댓글 창에 배경 이미지를 넣기 위해서는 자신의 댓글창의 크기를 알아야 합니다.
자신의 화면을 캡쳐 하셔서 사이즈를 확인해보시면 됩니다.

캡쳐방법은 알툴바를 사용 하는 저로선 쉽게 알 수 있습니다. 
직접지정 캡쳐 Alt + 3 키보드를 눌러서 확인 할 수 있습니다.

쿨펀치의 경우 댓글창의 크기가 가로 705px 세로 170px 입니다.

 

티스토리 관리자모드 접속해주세요.HTML/CSS 편집 선택

검색 Ctrl + F 하셔서  rp_input_comment          <=== 요 항목을 검색해 주세요.

 

댓글창의 속성이 설정된 소스 부분입니다.
붉은색 박스 안에 row="10" 부분이 댓글창의 글 줄 수를 정하는 부분 입니다.  참고 하시고요.

자신의 댓글창의 속성과 사이즈를 알았다면. 들어갈 이미지를 준비 해주세요.
이미지의 경우 인터넷 검색 하시면 많이 나옵니다.  GIF 애니메이션도 가능 합니다. 

티스토리 파일업로드 선택 , 추가 선택.

 

배경이미지 추가한 파일을 선택.
1. 쿨펀치의 경우 tistory_004.jpg 파일입니다. 참고 하세요.
2. 미리보기 그림을 마우스 오른쪽 버튼 클릭.
3. 속성 클릭.

 

속성창 주소(URL) 주소부분의 이미지 주소 파일만 복사 하시면 됩니다.
http:// 이미지 주소 .jpg 까지만 마우스로 드래그 복사 해주세요.


다시 한,  티스토리 관리자모드 접속해주세요.HTML/CSS 편집 선택

검색 Ctrl + F 하셔서  rp_input_comment          <=== 요 항목을 검색해 주세요.

 

변경전 소스  <textarea name="[##^_rp_input_comment_^##]" rows="10" cols="50"></textarea> 소스중 ^ 표시부분 소스를 보여 주기 위함입니다.  실제 적용시 ^ 꼭 제거 해주셔야 합니다.

변경후 소스 <textarea style="background-image:url(복사한 이미지 경로);background-repeat:no-repeat; background-position:left" onClick="this.style.backgroundImage=''" name="[##^_rp_input_comment_^##]" rows="10" cols="50"></textarea> 소스중 ^ 표시부분 소스를 보여 주기 위함입니다.  실제 적용시 ^ 꼭 제거 해주셔야 합니다.

복사한 이미지 경로를 넣어주면 소스 수정이 완료 된다.

수정소스 다운로드 하세요.

댓글창_배경이미지.txt

위 소스대로 수정 할 경우 댓글 창에 이미지가 확인 될 것이다. 
댓글 창에 마우스로 클릭 하는 순간 이미지가 사라지게 된다. 이유는 마우스 액션이 적용이 되어 있기 때문이다.
댓글 쓰는 거에 방해가 될지도 모르는 이미지 사자지게 액션을 넣은 이유다.
이미지가 사라지지 않고 댓글을 쓰는 동안 계속 있기를 원하면. 마우스 액션 부분만 지우면 된다.

변경후 소스 <textarea style="background-image:url(복사한 이미지 경로);background-repeat:no-repeat; background-position:left" onClick="this.style.backgroundImage=''" name="[##^_rp_input_comment_^##]" rows="10" cols="50"></textarea> 소스중 ^ 표시부분 소스를 보여 주기 위함입니다.  실제 적용시 ^ 꼭 제거 해주셔야 합니다.

onClick="this.style.backgroundImage='' 이 부분을 지워 주시면 댓글 창을 클릭해도 이미지는 그대로 유지 된다.

댓글 창에 배경 이미지 넣기가 끝이 났다.
GIF 애니메이션 까지 가능 하니 예쁘게 꾸며 보세요.

관련 글 & 도움되는 글 - 티스토리 블로그 댓글창 스크롤바 넣어보자. - 구글 웹로그 분석 Google Analytics 설치방법 - 구글 애드센스 광고위치 내 맘대로 상단 하단 변경 - 애드센스 광고위치 변경 좌측 우측에 애드센스 넣기 - 애드센스 와 뷰 애드박스 동시에 달아보자. - 검색엔진 최적화하는 방법01 - 타이틀 순서 변경 - 검색엔진 최적화하는 방법02 - 페이지 로딩 속도 개선 방법 - 검색엔진 최적화하는 방법03 - 구글 검색엔진 메타태그 설치

쿨펀치의 세상리뷰 는 여러분의 소중한 댓글과 VIEW ON 클릭 구독 클릭이 큰힘이되어.
더 좋은 블로그를 만들 수 있게 하는 원동력이 됩니다.