블로그 댓글달기에 영미 골룸을(?) 달아보자~

제 블로그 댓글달기 입력창에서 열심히 호객행위(?)를 하고 있는 영미골룸...ㅋㅋ (안영미 포에버~)
블로그 시작후 한달이 넘도록 아무도 댓글을 달아주지 않길래...
다른 블로거들의 댓글 달아달라는... 애교넘치는 이미지나 글들을 보고 나도 한번 만들어 봤다!

그래서 인지?
댓글은 제법 늘었지만... 아무도 영미골룸에 대한 언급이 없는것이다...

그러다가...
최근에야 최초로... 오픈양님이 재밌다고 말씀해 주신다...  오픈양 블로그 가보기 ==> http://theopen1.tistory.com/

그리고...
파라마님께서 어떻게 하는건지 궁금해 하시길래...      파라마님 블로그 가보기 ==> http://paramalay.tistory.com/
혹시 필요하신 분들께 알려드리고자 이렇게 포스팅해본다!


제 블로그 댓글달기 입력창에는 처음엔 위와같은 영미골룸이 애절하게 유혹(?)을 하고...
실제로 댓글 입력을 하기 시작하면...

다음과 같이 해맑게 좋아라 하는 영미골룸으로 변하게 됩니다!! (이거 모르셨던분들은 밑에 댓글을 달아보세요!!)

내 블로그 댓글달기에 영미골룸을 달아보자!!

1. 이런 컨셉으로 자신의 블로그에 적용하고 싶으신 분들은... 먼저 두장의 이미지를 준비해주시기 바랍니다!
   첫이미지(편의상 reply_img1)는 댓글입력전, 두번째이미지(편의상 reply_img2)는 댓글을 입력중일때 이미지입니다.

2. 블로그 관리자 메뉴에서 스킨 -> HTML/CSS편집 화면으로 넘어간다.

3. 먼저 파일 업로드 탭을 클릭후, 준비된 2개의 이미지를 업로드 합니다.
   그런뒤 업로드 된 이미지를 리스트에서 확인후 좌측에 미리보기 화면에 나타나면 마우스를 올려놓고,
   마우스 오른쪽 클릭을 하시고, 속성을 선택하시면 다음과 같이 등록정보가 나타나는데
   업로드 하신 이미지의 URL정보를 드래그 하셔서 복사해 둡니다.

4. 이번에는 다시 HTML/CSS 편집 창에서 상단부에 아래와 같이 자바스크립트 소스를 삽입합니다.

<script  type="text/javascript">

function check_aym(obj){
     if(obj.value.length>1){
         aym_url='http://cfs.tistory.com/custom/blog/36/365163/skin/images/reply_img2.jpg';
     }else{
         aym_url='http://cfs.tistory.com/custom/blog/36/365163/skin/images/reply_img2.jpg';
    }
    obj.style.cssText="background:url("+aym_url+") no-repeat top right;";
}

</script>


위의 소스를 복사하셔서 붙여 넣기를 하시구요... 이때 해당 이미지 경로를 적어주는 amy_url 변수에
위의 그림과 같이 1,2번에 맞춰, 3번순서에서 복사해둔 이미지 경로를 바꿔 줍니다.

여기서 이미지 경로를 자신의 블로그에 올려진 이미지 경로로 바꾸어 주는것이 가장 중요한 부분이므로 유의하세요!!



5. 키보드 컨트롤키+F 눌러, "댓글 달기" 로 검색을 하면 아래와 같은 위치에 검색이 되는데...
   textarea 에 아래와 같이    onkeyup="check_aym(this)"  <== 요 스크립트를 삽입합니다.

  이 스크립트를 통해서 댓글입력시 이미지를 변경해 주는 역할을 하게 됩니다.


6. 마지막으로 HTML/CSS 하단부의  style.css 를 수정해야 합니다.
   댓글 관련 css 스타일을 변경하려면, 위의 방법처럼 컨트롤키+F 로 "댓글" 로 검색하면 해당위치로 이동됩니다.

   .commentWrite textarea 클래스에 아래 소스를 입력합니다. 이때 이미지 경로는 첫번째 이미지 경로와 같습니다.

            height:110px; background:url(reply_img1의 경로) no-repeat top right; 

이때, height:110px 는 자신이 올린 이미지의 사이즈에 맞게 수정하셔도 됩니다. 제가 올리 영미골룸은 실제로는 120px 인데
120으로 하면 하단부에 약간의 틈이 생겨서 110으로 맞추니까 딱 들어 맞더군요... 자신의 이미지 높이에서 10정도 빼고 입력하면 될것 같습니다.



7. 자, 이제 위와 같이 모두 입력을 하셨으면, 저장하기 버튼을 클릭후 확인해 보시기 바랍니다.
    만약 이미지가 제대로 나타나지 않을 경우에는 이미지 경로를 다시 확인해 보시구요,
    스크립트 오류가 나는경우에는 오타가 없는지 등을 확인해 보시기 바랍니다.
 

도움이 되셨길 빌며...

영미골룸보다 재밌게 만드신 분들은 꼭 트랙백 남겨주세요^^