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

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

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

이 글을 읽으시는 모든 분들은 반드시!
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 문을열어