티스토리 #1 반응형 스킨 댓글창에 이미지 넣기

티스토리 #1 반응형 스킨 댓글창에 이미지 넣기

티스토리 블로그를 사용하면서 

생각보다 댓글이 없다는 거다. 

아주 활성화 되지 않는이상 사람들은 거의 눈팅만 하다간다.

"ㅋㅋㅋ" 만 써줘도 얼마나 고마울까. ㅋㅋ

먼저 원래 댓글창인데 저 엄청 큰 여백에 글씨 

"여러분의 소중한 댓글을 입력해주세요" 

라고 부탁형의 글씨인데 보지도 않는다. ~~ ^^

그래서 댓글창에 아래 이미지를 삽입해 넣어 봤다.

그래도 안쓰면 뭐... 댓글창 팝업이라도 뛰워볼까.ㅋ

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

1. 이미지 만들기 크기(819 * 103) 배경으로 넣을거여서 댓글창과 크기를 같게 만들었다. 2. 스킨편집 - html 편집 - 파일 업로드 3. 스킨편집 - html 편집 - HTML 수정

1. 이미지 만들기 크기(819 * 103) 배경으로 넣을거여서 댓글창과 크기를 같게 만들었다.

그림판으로 만들었는데 제가만든 위의거 변형해서 쓰셔도 되요.~

화면 스샷은 그래서 없어요. 

2. 스킨편집 - html 편집 - 파일 업로드

1번에서 만든 이미지 파일을 추가 하여 저장하면 이제 사용가능하다. 

datgul2.png 파일이름을 요렇게 지었다. 

3. 스킨편집 - html 편집 - HTML 수정

3-1. htrml 수정전 모습 - 수정되어여 할 부분이 <textarea 근처이다.

3-2. 수정후의 모습

아래 핑크색 부분이 추가하면 되는데 간단하게 설명하면 

백그라운드에 datgul2.png 를 보여줘라 

단 댓글창이 포커스될시에는 이미지를 없애라 

그런데 아무것도 안쓰고 포커스가 사라졌다. 그럼 다시 datgul2.png 를 보여줘라

위와 같은 뜻입니다.

<textarea id="" name="" style="background:url(./images/datgul2.png) no-repeat right; background-color:#FFFFFF;" onFocus="this.style.backgroundImage='';" onBlur="if(this.value==''){ this.style.backgroundImage='url(./images/datgul2.png)'; }" title="댓글을 남겨주세요^^" class="tf_reply" placeholder="" tabindex="1"></textarea>

이것으로 소스 수정은 끝이 났습니다. 

그럼 이제 댓글 달아주실거죠. ??  ^^

귀찮으면 아래 하트 하나 누르고 가셔도 되요. ㅋ