티스토리에 관한 내용은 처음 포스팅 해보는것 같아요.

일단 티스토리 자체가 네이버와는 다른 개방형 블로그이긴 하지만,,
최소한의 틀은 있어서 이해하는데 조금 걸렸더랬죠.

더더군다나 다른 분이 만든 스킨을 썼더니..
각종 포털싸이트에 돌아다니는 티스토리 응용법을 제 스킨에 씌우려고 했다가
몽창 날라갈뻔한걸 백업 습관때문에 어떻게 살렸는지;;ㄷㄷㄷ

이 글을 읽으시는 모든 분들은 반드시!
Admin-html은 바로바로 백업해두시는 센스!

해도 떴으니 바로 포스팅 해보도록 하지요.
천천히 따라오셔요^^

1. 기본 코멘트 창




현재 보고 계시는 화면이 제 원래 블로그 코멘트 창이랍니다.
상당히 심플하지만 뭔가 심심합니다 (스킨 제작자님 ㅈㅅㅈㅅ..ㅠㅠ)
이걸 한가인 온냐의 화려하고 상큼하고 수려하고 레알 짤없이 이쁘신 얼굴로 바꿔보도록 해요!


2. 코멘트 창 사이즈 재기

이건 개인 블로그 스킨마다 모두 다르니 제가 말씀드리수는 없지만,
스킨 환경설정에 보시면 본문 사이즈를 알수 있으니 확인 바라구요,
간단하게 코멘트창 사이즈를 재보고 싶으시다는 분들은,
포토샵을 열어서 화면 캡쳐후 붙여넣기 해보시면 간단히 알 수 있습니다.


3. 코멘트창 이미지 만들기



코멘트 창 사이즈를 재셨으면,
코멘트 창에 들어갈 자신만의 이미지를 만들어보아요^^
전 아까 말씀드렸다시피 한가인 온냐의 슈퍼 울트라 캡짱 고귀한 얼굴을 올려볼겁뉘다.

포토샵을 켜서 원하는 이미지로 뚝딱 뚝딱 만들어봅시다
참 쉽죠? 라고 말하고 전 이미지 만드는데 3분,
쓸만한 이미지 찾는데 3일ㅡ,.ㅡ;;;;;

아흥...이미지 찾는게 더 어려움;;ㅇㅇ
차라리 한가인을 그리고 말지;;;
물론 그렇게 되면 한가인 그리는데 3달.ㅇㅇ


4. 파일업로드



여튼 코멘트창에 들어갈 이미지를 다 만드셨으면,
이젠 삽입을 하는데 삽입전 이미지 파일을 티스토리 서버로 올려야 합니다.
방법은 
admin- 스킨- html/css편집 -파일 업로드를 찾아가서 넣으시면 됩니다.
이미지 이름은 아무 상관없지만 되도록 소문자 영문이좋을거예요.
관리하기가 훨씬 편해집니다.
전 back_commnet.jpg로 만들었습니다!


5. style html 수정

이제는 중요한 지점!
이 부분을 따라하기 앞서 절대 백업 먼저 하시고 오셔요^^

코멘트 창을 제어하는 코드를 찾아봅니다.
검색은 Ctrl+F 로 하시고 input_commnet 라는 명령어를 찾아봅니다.
딱 하나 혹은 두 세개 정도가 나옵니다.

요런것을 찾아주세요!



원본
<textarea name="##_rp_input_comment_##" rows="6" cols="50" onFocus="this.style.background='none'"></textarea>

수정후
<textarea name="" rows="6" cols="50" style="background:url(./images/back_comment.jpg) no-repeat right; background-color:#FFFFFF;"></textarea>

다음과 같이 수정할수가 있는데, 저기 빨간색으로 체크해놓은 곳이 제가 아까 만들어서 업로드한 파일입니다.

여기서 잠깐! 이 부분은 스킨마다 모두 다 다를수 있습니다.
그러므로 백업은 절대 필수이구요,
제가 쓴글이 안맞을수는 있지만 그럴땐 댓글 달아주세요 같이 방법을 강구해보도록 하지요.

저 같은 경우만 해도 다른 블로그에서 무작정 읽고 따라 하다가 개털려서;;;
싹 다 날려먹고 펑펑울다가 간신히 백업파일 찾아서 변경했습니다...
라고 말하고 3초동안 앜ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 이렇게 비명 지르고
걍 롤업 했음--;;

저 같은 상황에서 왜 날렸냐면..

수정후
<textarea name="" rows="6" cols="50" style="background:url(./images/back_comment.jpg) no-repeat right; background-color:#FFFFFF;"></textarea>

여기에서 원본과 비교했을시 textarea가 공백이 생겨 코멘트에 오류가 생겼지요.
그래서 저는 이렇게 바꿔보았습니다.

최종본
<textarea name="##_rp_input_comment_##" rows="6" cols="50" style="background:url(./images/back_comment.jpg) no-repeat right; background-color:#FFFFFF;"></textarea>

파란색 글씨가 추가 된것이 보이지요?
이부분은 원본에서 가져온것이랍니다.
잊지말고 바꿔주셔야해요
그렇지 않으면 코멘트 오류가 납니다.


6. 완성!



자 그럼 다 완성이 되었습니다.
열심히 이쁜 코멘트 창을 감상하시면 됩니다.

그리고 이글을 보고 잘 따라하셨다면 역시 댓글을 하나씩만 남겨주십쇼..굽신굽신..
아잉~♡

아참! 그리고 불펌은 절대 금지인거 아시죠?;;
오늘 새벽 제글을 대량 불펌해간 블로그를 찾았는데 참 그때 기분이란;;;;;;;;;;;;;;



Posted by 문을열어

댓글을 달아 주세요

  1. 우와 꼭 댓글달아야될것만 같아요 ㅋㅋ

    • 하핫하핫 감사합니다!
      저도 제글 한번 읽어보고 괜히 코멘트창 보면서
      왠지 댓글 남기면 한가인양이 컵휘 사줄것 같아서 ㅎㄷㄷㄷㄷㄷㄷ

      ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
      댓글 감사드려용^^

  2. 제가 어디선가 보고서 댓글창에 이미지를 넣었는데....
    댓글을 쓰려고 마우스 클릭을 하면 사라져요... ㅠㅠ
    어떻게 하면 좋을까요??

    • 아아...
      그게 저도 한번 그랬던것 같은데,,
      tasha님 홈피 가보니 정말 그렇네요!

    • 일단 tasha님 홈피 소스를 긁어다 보니
      클릭하면 바뀌게끔 되어있는것 같아요
      한번 제가 작성한 코드대로 바꿔서 해보시겠어요?


      아참! 백업은 필수입니다
      백업 꼭 필수로 하셔야해요!

    • tasha님 안녕하세요^^

      지금 tasha님 홈피 소스를 긁어봤는데
      --------원본------------
      <textarea style="background-image:url(http://cfs.tistory.com/custom/blog/9/93688/skin/images/14.JPG);background-repeat:no-repeat;background-position:right"name="comment" rows="10" cols="50" onblur="this.style.background= 'url(http://cfs.tistory.com/custom/blog/9/93688/skin/images/formbg_comment_n.gif) repeat-x'" onfocus="this.style.background= 'url(http://cfs.tistory.com/custom/blog/9/93688/skin/images/formbg_comment_f.gif) repeat-x'"></textarea>

      ---------------------
      이렇게 되어있네요!
      아마 클릭하면 이미지가 변경 되게끔 된것 같아요!

      그래서 좀 변경을 해볼건데요
      Admin-스킨변경-html/css가셔서,,
      일단 내용 복사해서 백업을 먼저 합니다.

      그뒤에 아까 저 위 원본 부분을
      -------------------수정---------------------

      <textarea name="comment" rows="10" cols="50" style="background:url(http://cfs.tistory.com/custom/blog/9/93688/skin/images/14.JPG) no-repeat right; background-color:#FFFFFF;"></textarea>
      ----------------------------------------------

      요렇게 한번 변경해보셔요^^
      안된다면 다시 한번 같이 생각해보고,

      된다면 우리 이웃블로그 해요^^

  3. 도움 많아갑니다 . ;ㅂ;
    티스토리 블로그 갓 만들어서 이리저리 헤메고 있었는데
    덕분에 멋진 코멘트창을 얻게 되었어요 감사합니다~~~~~~~~~~~

    • 오오오~~
      감사합니다!
      오히려 제가 더 감사한 이유가..
      이렇게 제 글 보시고 멋진 코멘창 만들어주시니 증명이 된듯한듯하여 너무 기분이 좋아요^^!

  4. 잘배우고 갑니다~
    html은 은근히 어렵더군요;;뭐가 뭔지도 모르겠고요

  5. 저도 이제 막 블로그를 시작했는데요. 이쁘게 꾸미는데 큰 도움이 되었습니다.
    요즘 나쁜남자에서 한가인 보는데 흑 여신이네요ㅜㅠㅜ
    아줌마라니 말도 안되는ㅋㅋㅋㅋㅋ

  6. 어쩌죠?ㅜ_ ㅜ하라시는대루 했는데 제 홈피엔 댓글을 입력하구 확인 누르면
    본문내용을 입력하라고만 떠요;ㅁ ;
    혹시 몰라 스펠링 검사도 마쳤는데..ㅜ_ ㅜ도와주세용//ㅅ//

    • 수정햇어요;ㅁ ;ㅋㅋ
      문님께서 최종본이라구 올린부분 파란글씨에
      ##_rp_input_comment_##

      이부분에 앞뒤로 [] 를 넣으니 되더라구요;ㅁ ;

      이렇게..
      제 홈피만 이상한거였나봐요..훌쩍-_ ㅠ
      암튼 잘 보고가요^_ ^

  7. 와우 신기해요 ㅋㅋㅋㅋㅋ

  8. 아..쉬울 줄 알았는데ㅠㅠ
    두시간째 헤매고 있네요ㅠㅠ
    뭐가 문제인지..절망적이네요ㅋㅋㅋ
    이따 다시 한번 심기일전해서 꼭 이미지 삽입해봐야겠어요~

  9. 와 좋은 정보 감사합니다 ^^

  10. 드디어 저두 달았습니다.
    그런데 본문 내용에서 수정해주셨으면 하는 부분이 있어요.
    ---------------------------------------------------------------------
    [여튼 코멘트창에 들어갈 이미지를 다 만드셨으면,
    이젠 삽입을 하는데 삽입전 이미지 파일을 티스토리 서버로 올려야 합니다.
    방법은
    admin- 스킨- html/css편집 -파일 업로드를 찾아가서 넣으시면 됩니다.
    이미지 이름은 아무 상관없지만 되도록 소문자 영문이좋을거예요.
    관리하기가 훨씬 편해집니다.
    전 back_commnet.jpg로 만들었습니다!]
    ---------------------------------------------------------------------
    이 부분에서 back_commonet.jpg로 똑같이 저장하는 바람에 ㅋㅋ url 위치가 달라서 애먹었습니다.ㅋ

    좋은 정보 감사합니다.